Skip to content

Starter template for ReactJS using Mantine UI and Firebase backend. Running with Vite. This has the auth, settings, and dashboard started. With dark theme functioning.

Notifications You must be signed in to change notification settings

mhabashy/starter-reactjs-firebase-vite-mantine

Repository files navigation

Starter Template

If you like this and/or use it. Please buy me a cup of coffee. I like drinking Starbucks 😗. Sure it will save a ton of startup time. https://paypal.me/michaelhabashy

Before you can use this you have to setup firebase and set varibles in .env file or just replace everything in src/config. Also set project name for firebase .firebaserc

- Vite

- ReactJS

- Firebase

- Mantine UI

- ReactFire

- Zustand

- Lodash

- FontAwesome

In my opinion, this is the best template for building a startup or an application quickly. Making available for other developers, it already has a firebase auth setup and Mantine UI Light/Dark Theme with AppShell.

Vite - Config

https://vitejs.dev/config/#config-file-resolving

Firebase - Doc

https://firebase.google.com/docs

Mantine UI - Doc - Best reactJS UI with a lot of widgets

https://mantine.dev/getting-started/

Reactfire - Doc

https://github.com/FirebaseExtended/reactfire

Zustand - Doc - Much better than redux but easy to replace with redux

https://docs.pmnd.rs/zustand/introduction

Lodash - Doc

https://lodash.com/docs/4.17.15

FontAwesome - Icons

https://fontawesome.com/icons https://fontawesome.com/v5/docs/web/use-with/react

Please keep in mind that this template is using bootstrap utilities for flex/grid/spacing https://getbootstrap.com/docs/5.2/utilities/flex/


Run Dev

npm run dev

Build and Publish to Firebase

npm run build

Login

Desktop Login Light

Desktop Login Dark

Mobile Login Light

Mobile Login Dark

Signup

Desktop Dashboard Up Light

Desktop Sign Up Dark

Mobile Sign Up Light

Mobile Sign Up Dark

Dashboard

Desktop Dashboard Light

Desktop Dashboard Dark

Mobile Dashboard Light

Mobile Dashboard Dark

Dashboard

Desktop Dashboard Light

Desktop Dashboard Dark

Mobile Dashboard Light

Mobile Dashboard Dark

Settings

Desktop Settings Light

Desktop Settings Dark

Mobile Menu

Mobile Menu Light

Mobile Menu Dark

If you like this and/or use it. Please buy me a cup of coffee. I like drinking Starbucks 😗. Sure it will save a ton of startup time. https://paypal.me/michaelhabashy

About

Starter template for ReactJS using Mantine UI and Firebase backend. Running with Vite. This has the auth, settings, and dashboard started. With dark theme functioning.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published