This project will show you how to use React, Firebase, Typescript, and Material Design to create a basic to-do list app, that is basic, but real-world.
Clone or download
Latest commit a2f5c90 Jun 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea 1) adding run configs for JetBrains Webstorm Sep 26, 2016
src Update copyright Jun 22, 2018
typings Update copyright Jun 22, 2018
.gitignore 1) adding gitignore file for project Sep 26, 2016
LICENSE Update copyright Jun 22, 2018
README.MD Update README.MD Oct 4, 2016
package.json 1) adding gitignore file for project Sep 26, 2016
typings.json initial commit of the project Sep 26, 2016
webpack.config.js Update copyright Jun 22, 2018

README.MD

What does this project do?

For more information on this project, please read this tutorial - http://developerlife.com/2016/10/02/getting-started-with-react-and-firebase/

Quick directions on getting this setup on my machine

If you have a Mac and don't have node installed, then get brew and install node

  • /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • brew install node

Initial Setup

  • Go to the folder when you downloaded this project from github and run the following:
  • npm install babel webpack webpack-dev-server typescript typings -g
  • typings install dt~node --global --save
  • npm install
  • more info on Node + Typescript

Firebase Setup in the Firebase Console web app

  • Create a new project
  • Set Database -> Rules to read/write by public using { "rules": { ".read": true, ".write": true } }
  • Set the Auth -> SignIn Methods to enable Google and Anonymous
  • Put the config object generated by Firebase in constants.js
  • When you deploy this to heroku, make sure to add your heroku app URL as an authorized domain in the Firebase console

Running it

For Dev

  • npm run dev

For Prod

  • npm run postinstall
  • npm run start

Optional

  • Install the React DevTools for Chrome here
  • Install the Redux DevTools for Chrome here

See it in action

To see this app in action, here it is on heroku: