Giter Club home page Giter Club logo

kage's Introduction

Yet another task manager built with Firebase, Next.js, React, Redux, styled-components, Reactstrap (Bootstrap 4 alpha), Flow, and Prettier.

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 React 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-api-memoization helper. 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.

Try it

https://kage.saltycrane.com

Run the dev server

All the commands below were run with Node.js 6.10 and yarn 0.24 on OS X 10.11.

$ git clone https://github.com/saltycrane/kage.git
$ cd kage
$ yarn
$ yarn dev
$ # open http://localhost:3000 in the browser

Run some component benchmarks

Benchmarking code was copied from threehams

$ git clone https://github.com/saltycrane/kage.git
$ cd kage
$ yarn
$ yarn benchmark

Run webpack-bundle-analyzer

$ git clone https://github.com/saltycrane/kage.git
$ cd kage
$ yarn
$ yarn analyze

Run Prettier

$ git clone https://github.com/saltycrane/kage.git
$ cd kage
$ yarn
$ yarn prettier

Export a static site

$ git clone [email protected]:saltycrane/kage.git
$ cd kage
$ yarn
$ yarn export
$ # serve contents of the `/out` directory

Deploy to cloud using now

$ # install now from https://zeit.co/download
$ git clone https://github.com/saltycrane/kage.git
$ cd kage
$ yarn
$ now

kage's People

Contributors

saltycrane avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.