Using Firebase, Next.js, React, Redux, styled-components, and Reactstrap to build a Todo app

Here are some notes on making yet another task manager app using Firebase, Next.js, React, Redux, styled-components, Reactstrap (Bootstrap 4 alpha), Flow, and Prettier. I realize Hacker News clones are the new Todo app, but I built an old Todo app since I'm old. I starting out making a different app, but then I started putting my todo notes in my app so...

The app is here: https://kage.saltycrane.com and the code is here: https://github.com/saltycrane/kage.

Notes

• Uses Firebase password authentication, Google authentication, and anonymous authentication when a user does not sign in.
• Uses the Firebase database to persist tasks.
• Next.js supports server-side rendering but I'm not taking advantage of this because I could not figure out how to configure Firebase auth on the server side.
• I'm a fan of using Redux for applications. I think it makes complicated interactions easy to follow and debug. However, Redux is not good at handling complicated asynchronous side effects. I use redux-thunk a little to sequence asynchronous actions and async+await in some places. I tried to keep it's usage to a minimum because it is easy to misuse/overuse. I've played with redux-saga and it seems good. Maybe I will use it if I build something more complicated.
• Uses my own redux-promise-memo library. It contains promise middleware copied from Gluestick, a reducer to store arguments for "memoization" and API status, and a memoize decorator which will prevent firing a promise-based action if has already been fired with the same arguments. "Memoization" is in quotes because it does not manage storing the cached data. It only manages whether to dispatch the action or not. Assume the user has stored the data in Redux.
• Initially I didn't understand how to use styled-components. Later I realized styled-components could be used in place of sub objects in a styles object for a component when using e.g. Radium or Aphrodite. I like how it makes the JSX look clean. I've heard performance is a weakness of styled-components but they are working to improve it.
• I'm a former backend developer so I don't know how to make things pretty. I guess I'll go with Bootstrap.
• Flow has a lot of pain points but in-editor feedback is useful and it helps me write simpler code.
• Prettier is great.

Other ideas to try

• Graphcool instead of Firebase
• Apollo or Relay Modern in addition to or in place of Redux
• Make a Progressive Web App and add redux-offline

Here's how to try out Next.js on Mac OS X

Install Node.js and Yarn¶

• Install Node.js 6.10 LTS using Homebrew

  $ brew install node@6 
  

  This is an alternate version of Node.js so the PATH environment variable needs to be updated to find it. Update ~/.bash_profile to add Node 6 to the beginning of the PATH variable

  $ echo 'export PATH="/usr/local/opt/node@6/bin:$PATH"' >> ~/.bash_profile 
  

  Restart the terminal to source ~/.bash_profile to update the PATH variable. After restarting the terminal, check that Node is installed:

  $ node --version
  v6.10.3
  

• Install the Yarn package manager using the npm package manager that comes with Node.js

  $ npm install -g yarn 
  

  Verify yarn is installed:

  $ yarn --version
  0.24.5
  

Hello World with Next.js¶

• Create a new project folder

  $ mkdir ~/myproject 
  $ cd ~/myproject 
  

• Create a new file named package.json with the following:

  {
    "dependencies": {
      "next": "3.0.0-beta16",
      "react": "15.6.1",
      "react-dom": "15.6.1"
    },
    "scripts": {
      "dev": "next",
      "build": "next build",
      "start": "next start"
    }
  }
  

• Install Next.js and React in the local project directory

  $ yarn 
  

• Create a pages directory and a new file pages/index.js:

  import React from "react";
  
  export default class Hello extends React.Component {
    render() {
      return <div>Hello World</div>;
    }
  }
  

• Start the dev server

  $ yarn dev 
  

• Go to http://localhost:3000 in the browser