Reword

An experiment with React, Redux, and more

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!

What is it?

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/

Infrequently Asked Questions

Where are the action creators and action constants?

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.

What about shrinkwrapping those npm dependencies?

I started out doing that too. But for now, I have found it better to keep up with dependency changes.

Tests

npm test

Tests use jsdom, mocha, chai, and sinon.

Set up instructions

###Create a Firebase app.

• Make note of the app name; you will be plugging that in a bunch of places.

Enable GitHub auth for your Firebase app.

• 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 and npm 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