Demo: https://reword.firebaseapp.com/
This project is an effort to learn React and some emerging JS libraries. These include:
- Redux
- React Router
- React DnD for drag and drop
- CSS Modules
In addition, the app uses
- Firebase as a backend, including auth
- Material UI components
- gulp and Browserify to assemble to project
- ESLint
- ES2015
With the exception of Browserify, gulp, ESLint, and ES2015, all of these technologies are new to me. I'm probably doing lots of stuff wrong, so feedback/PRs are welcomed!
It's a web app that mimics a classic refrigerator magnets game. If you log in, you can create phrases by dragging words around. Phrases are displayed along with their author on the main page.
Check out the latest version at https://reword.firebaseapp.com/
I started building this project using the action creator and action constant conventions advocated in the Redux docs. I evenually found that the additional indirection wasn't helpful to me, so I removed them in favor of passing object literals. Apparently, this is an ok thing to do.
What about redux-router or react-router-redux?
I started out using redux-router to inject router state into the app state. However, I realized that there wasn't a real need for it. I occassionally needed a reference to the current router location, but it was just as easy to use the router reference from context, which is the standard react-router way of doing things. Removing one of the many, many library dependencies was also satisfying.
I started out doing that too. But for now, I have found it better to keep up with dependency changes.
npm test
Tests use jsdom, mocha, chai, and sinon.
###Create a Firebase app.
- Make note of the app name; you will be plugging that in a bunch of places.
- In GitHub settings, Register a new OAuth application.
- You can use a homepage url like: https://<firebase app name>.firebaseapp.com/.
- Use the authorization callback url: https://auth.firebase.com/v2/\/auth/github/callback
- After saving the application, GitHub will provide you with a Client ID and Client Secret for the application. In Firebase, go to the app management page for your app, select the Login & Auth area, then the GitHub. Enable GitHub Authentication and plug in the Client ID and Client Secret.
###Local setup
- Clone this repo.
cd
to the directory andnpm install
.- Create
config.json
like
{
"firebaseApp": "<A firebase app name>",
"adminUser": "github:<your github user id>"
}
You can find your github user id here. (Thanks @caius)
You should now be able to run the development server:
gulp serve
The server will listen on localhost:3000. After loading the page, you can click login with GitHub in the upper right. You should be presented with a GitHub Authorize Application screen. After you authorize, you should be able to go to settings and add words.
To build and deploy to Firebase:
npm run deploy