What is this? 🤩

Simple Web App template to get your started on your next SPA project. You get an awesome React front-end app paired with Firebase serverless backend. Very easy to get started, just configure firebase and circle ci and you will have a fully up and running full-stack app with CI.

To understand how this template was being used, check out the live version of Codelit. Basically a school for Front-end & React learning. Each course features a series of questions and can be solved interactively and ear points to unlock new material.

Pretty much the simpler version of Codelit.io

What does it do? 🤔

• 📝 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

What do I need? 🤘

Few steps to get it fully customized with your configs

• setup firebase account and get configs

• Update YOUR_PROJECT in .circleci/config.yml with 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.json if 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 screenshots folder to create similar data.

• Finally, create an admin account by signing up in the app and adding the admin property in firestore. See screenshots

• Remove unused routes, dependencies, features and containers. Some components are built specifically for Mo Skool and they might not apply to your project.

• Have fun 🤘

Can I make this better?

YESS!! PRs are welcomed 🙌

Getting Started

• Install yarn

• Start yarn start

• check yarn dependencies for updates yarn check-updates

• build yarn build

• test yarn test

Helpful Resources

• Get started 🚀
• File Architecture
• Firebase
• HOC
• Material UI
• React Hooks
• Store / State Management
• Styling
• Testing

3rd Party Dependencies

• 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

Mind Map

Architecture and components mind map 🗺

Storybook

http://localhost:9009/