-
Notifications
You must be signed in to change notification settings - Fork 1
Architecture
The frontend is written in React and uses Redux for state management. The src/containers folder contains all React components that are connected to the Redux store. src/containers/views contains all React components that represent a page in the app.
The container components typically use multiple components from src/components. The React components in src/components are reusable UI components that typically don't have any state. Sass (scss flavor) is used as a CSS preprocessor and postCSS (see Build System) is used to prefix CSS rules. Every component has its own SCSS file that contains its styles (sadly there are some exceptions). All css is inlined by the build system and is not scoped(!).
All code related to Redux can be found in src/redux. The src/redux/modules folder contains reducers and initial states for every subproperty of the store.
Snipstory is developed using Firebase as a backend. This gives us nice features like real-time data changes, authentication and file uploads for free. Most (if not all) Firebase requests happen in the redux actions (src/redux/actions.js).
All Firebase related objects are exported from the src/helpers/firebase.js file
Suggestion for implementing REST API: Make sure your data has the same structure or is at least retrievable in the same format (so you don't have to change up the code itself)
- Replace all Firebase code with the necessary fetch requests, the way you get data doesn't matter it maps over it anyway.
- Create a helper file where you will define all API requests you need and just invoke these in the actions. More maintainable + cleaner code
All links that are coming from Firebase in the code and database would have to be replaced too.
TODO: Firebase hosting and travis-ci. Jest for tests (non written yet). automatic deploy on master branch.
TODO: create-react-app