A well designed React app themed for a record label using only functional components and hooks. State management is done entirely using the Context API and React hooks. Supports complete Signup and Login authentication flows. Authenticated users can access the dashboard and upload Albums and Singles. Ensures that mongo and firebase are in sync at all times.
- React - The web framework used
- Material UI - React UI framework
- Formik with Yup validation - For building forms
- music-metadata-browser - metadata parser used for music file validation
- axios - Promise based HTTP client
- React icons - Popular icon pack
- Firebase
- Mongo
Brief file description and overview of how the app is organized.
firebase-mongo-boilerplate │ README.md │ ... │ └───src │ └───assets │ ├───components │ ├───config │ ├───constants │ ├───pages │ ├───state │ │ ├───api │ │ ├───constants │ │ ├───reducers │ │ └───Store.js │ ├───styles │ └───utils
| Folder | Description |
|---|---|
| assets | Material needed for the project such as images and svgs |
| components | React components that are reusable |
| config | Services such as firebase have config defined here. The rest of the app imports those services (such as firebase auth) from here |
| constants | Files that contain constants such as route names, form schemas - things that have a fixed value |
| pages | Contains pages. Ideally a page is something that only contains imports and UI while logic is abstracted to components and to the store. Each route displays a page. |
| state | Everything related to state management is housed here. Store.js contains the Context store . |
| state/api | Functions that handle async tasks by interacting with firebase and mongo |
| state/constants | Constants related to the state such as action types |
| styles | Files related to styling such as CSS files and Material UI theme providers |
| utils | Extra features for the app that improve user experience. Currently only contains logic for the global notification system. |
- Documentation - Description of various methods and type definitions used in the codebase
- Medium article series coming soon!
Project was made using create-react-app
To run this project, clone this repo and then:
$ cd ../cloned_directory
$ npm install
$ npm start