sampl / firefly Goto Github PK

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

File structure: flat folders for layout, pages, presentational?

Paginate the list of posts

Should probably use the models in /source in the scripts and functions to make sure things go smoothly.

Maybe break root dir structure into server/client/models while we're at it

https://babeljs.io/docs/usage/cli/#babel-node

Solve #27 by not using setState at all and replacing eventemitter3 with redux or mobx

https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e

Include cleanup of Supermodel errors

Don't really want to have to write docs in HTML. Worth having a compile step?

Currently using "once" to get items, but "on" caches the data locally and speeds everything up.

Would require a good way for views to turn db refs "off" when they unmount

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component

Already removing listeners when the post is unmounted, but not cancelling the firebase "get" callback. Can we do that?

Or track mounted status in the component state? Yuck...

Code CSS styles into index.html on gh-pages branch

Colors, sizes in a 'theme.js'

Rename source and functions does to be more understandable by showing what they really are: out client frontend code (for browsers) and our server backend code (for GCE on Firebase).

This can also make our dir structure flatter

Don't forget to rename 'build' to something like 'client_build'

Related to #22 and #19

ESlint

Demo dense list
Table editing?
Style guide

Algolia stopped getting updated somewhere

npm install slugify

Using Algolia and Firebase cloud functions

Sentry for monitoring, GA for analytics, intercom for support?

It's still got all the Firefly code--only need index.html and CNAME

Remove model classes and new keywords In favor of object.create

https://youtu.be/riDVvXZ_Kb4

Related to #31 and #39

Esp as the code moves to use more es6 syntax, it'll be hard for newcomers to understand what's happening.

Add Readme.md files to subfolders, for ex in /models, so explain what each part of the app does. Also add more verbose code comments to critical parts of the app.

Consider some form of literate js, like Literate Coffeescript?

Probably need it in validation rules--gets a bit messy, but otherwise the db is "wrong"
Could do it in form validation too, might need to happen anyway #21
Could do it easily in Post model, but it needs to happen the other two place anyway most likely

Let's do a few small things to override browser defaults and make the pages look nice.

System UI font, primary color, lower heading font weight

Errors out now

Call PostList from the Home page so you don't have to click to see posts

Do with #19 to keep things clean

Not sure why, investigate

Make a github pages landing page for the project

Or... just import the readme into Home.js and use the project itself as the demo?

Keep top-level files as simple as possible by moving the router wrapper, ScrollToTop etc to App

https://reacttraining.com/react-router/web/example/modal-gallery

Two Firebase project configs are already set up, but we still need to make separate optimized webpack configs, import the right Firebase config for the right env, and update npm scripts.

Include sample node script(s) for importing data, data migrations, etc

Which means you have two of the same page on refresh, one in the modal and one in the bg

Meta tag etc