r-park / todo-redux-saga Goto Github PK

View Code? Open in Web Editor NEW

191.0 13.0 49.0 123 KB

Todo app with Create-React-App • React-Redux • Redux-Saga • Firebase • OAuth

Home Page: https://todo-redux-saga.firebaseapp.com

License: MIT License

JavaScript 84.66% HTML 1.58% CSS 13.76%

create-react-app react react-redux react-router react-router-redux redux-saga firebase

todo-redux-saga's Introduction

A simple Todo app example built with Create React App, React Redux, Redux Saga, and Firebase

Try the demo at todo-redux-saga.firebaseapp.com.

Stack

Create React App
React Redux
React Router
React Router Redux
Redux Saga
Redux Devtools Extension for Chrome
Firebase SDK with OAuth authentication
Immutable
Reselect
SASS

Quick Start

$ git clone https://github.com/r-park/todo-redux-saga.git
$ cd todo-redux-saga
$ npm install
$ npm start

Deploying to Firebase

Prerequisites:

Create a free Firebase account at https://firebase.google.com
Create a project from your Firebase account console
Configure the authentication providers for your Firebase project from your Firebase account console

Configure this app with your project-specific details:

// .firebaserc

{
  "projects": {
    "default": "your-project-id"
  }
}

// src/firebase/config.js

export const firebaseConfig = {
  apiKey: 'your api key',
  authDomain: 'your-project-id.firebaseapp.com',
  databaseURL: 'https://your-project-id.firebaseio.com',
  storageBucket: 'your-project-id.appspot.com'
};

Install firebase-tools:

$ npm install -g firebase-tools

Build and deploy the app:

$ npm run build
$ firebase login
$ firebase use default
$ firebase deploy

NPM Commands

Script	Description
`npm start`	Start webpack development server @ `localhost:3000`
`npm run build`	Build the application to `./build` directory
`npm test`	Test the application; watch for changes and retest

todo-redux-saga's People

Stargazers

Watchers

todo-redux-saga's Issues

kyt?

Would you consider replacing the build scripts with kyt or is there any specific need that is unmet? https://github.com/NYTimes/kyt

Great repo, thanks for your effort on this.
I want to deploy my application to heroku instead of firebase. However I am not able to run start script after deployement. Any chance you may know what I may be missing? Npm run build && npm run server should do the trick or?

Thanks,
Arda

[Question] Saga call with Array

Could you explain to me the 10th line of code? I can't figure out why we must use an array here. Thank you.

history.push/replace vs react-router-redux's push

Hey, first off, thank you so much for this example (as well as the other redux/firebase w/o sagas example). They seem to be a near perfect example on getting a basic/standard firebase setup inside a React/Redux project (you probably saved me days of effort just on the firebase code.... then the saga code, with a version without sagas for reference is amazing). While by no means critical, it may be worth making the 2 more consistent (ie. same action constants).

Anyway, aside from thanking you, I definitely want to pick your brain on a few things... in some cases it's hard to figure out if you are doing something in a specific way just because this example is concentrating on demoing other features and you just didn't care about certain parts... or if there are specific reasons for parts of the code.

One question I have is, is there a reason you are using history.push instead of react-router-redux's push action?

Also, is firebase-list.js based off of some other example/project.. or is it completely custom for these examples? (either way THANK YOU, it's a great piece of code I have already stolen)

Thanks in advance, and sorry for creating an issue for my questions... but I figure this being a demo repo, the issue won't be cluttering up more important ones.

firebase classes for more complex data structures

Hey @r-park love this example. I've applied this example's logic to a more complex firebase structure with denormalized entries.

How would you recommend building a firebase model that can support lists of objects like this?

{
  "some-list" : {
    "-KbgyM0uO2l9oHCDwzAq" : {
      "prop" : "great",
      "some-ids" : {
        "-KbgyM-bzdBprmzIePhp" : true,
        "-KbwQ_AiyQcagPHnoEeI" : true
      },
      "other-ids" : {
        "again" : true,
        "nice" : true,
        "try" : true,
        "word" : true
      }
    },
    "-KbhA_tJ9ZyqQVzwHwWT" : {
      "item" : "fun",
      "some-ids" : {
        "-KbhA_sCvTVPBaFBRYcL" : true,
        "-KbwIevJI96eLSBP9h3b" : true
      },
      "other-ids" : {
        "again" : true,
        "new" : true,
        "nice" : true,
        "try" : true
      }
    }
  }
}

The existing firebase-list works really well for a list of simple objects, but is a little clunky for lists with other simple lists nested inside. Maybe some sort of composable model structure? I've also looked at firebase-saga which takes a more functional approach, although, I like being able to set the class properties in the watchers.

I'm a little torn on how to proceed. What do you recommend for more complex, denormalized structures?