Great and simple getting started Web App template. You get a great React front-end app paired with Firebase serverless technologies. Very easy to get started, just configure firebase and circle ci and you will have a fully up and running full-stack app.
Used for Front-end/React courses and code questions in each course. Answering these questions can be done by solving broken code in each course and earning points.
This template is the simpler version of Moskool.com
- 📝 Email and Social sign in
- 🏗 Material-UI library with Dark mode
- 🚀 Custom Components Library
- 🎉 Custom Theme with Responsive mode
- 🌏 Global Hook State
- 🎣 Custom Permission and Roles Hooks
- ♺ Save and Read DB data from firestore collection.
- 🚓 Admin and protected routes
- 📱 Single Page routing and lazy loading
- 🍼 Built using Functional Components
- 🙏 Simple state management with Higher order components and context API
- 🚢 Circle CI ready (Builds and live deployment)
- 💎 Story book
- 💅 Prettier and Linter
- 🛂 Commit hooks and commitizen
- 🔥 Offline and PWA ready
Few steps to get it fully customized with your configs
-
Update
YOUR_PROJECTin.circleci/config.ymlwith your firebase info -
Setup Circle Ci deployments following this firebase hosting deployment article
-
Commitizen and Husky Commit hooks can get annoying and prevent commits and pushes from happening, disable the in
package.jsonif needed -
Adjust prettier and linter configs
-
Review and update Routes and Constants
-
It's important to populate firestore with dummy data to view the pages, the UI is data driven. Follow the pics in the
screenshotsfolder to create similar data. -
Finally, create an admin account by signing up in the app and adding the admin property in firestore. See screenshots Have fun 🤘
YESS!! PRs are welcomed 🙌
-
Install
yarn -
Start
yarn start -
check yarn dependencies for updates
yarn check-updates -
build
yarn build -
test
yarn test
- Get started 🚀
- File Architecture
- Firebase
- HOC
- Material UI
- React Hooks
- Store / State Management
- Styling
- Testing
- Material UI + icons
- @sentry/browser for monitoring prod for console errors
- firebase
- material-table, an admin tool for adding questions
- react-live: code editor + live preview + error debugger
- react-typist: typist effect seen throughout
- react-hook-form: Helps you create forms easily
- use-global-hook: Easy state management using hooks
- string-similarity: Compare two strings and get a matching percentage between the strings
- recompose: used to compose a wrappedComponent with multiple HOCs
DEV Dependencies:
- react-test-renderer: used for testing with Jest
- husky for pre-push and comments
- commitizen for commits
- Prettier code formatting
- ESlint code linter