Firebase React Chakra UI Starter

A starter project for Firebase web.

• React
• Chakra UI
• Github actions for deployment

Demo

Visit https://react-chakra-ui-starter.web.app

Installation

Clone the repository

git clone git@github.com:stephenbaidu/firebase-react-chakra-ui-starter.git

Rename the directory if you want

mv firebase-react-chakra-ui-starter my-firebase-app

Go to the directory (cd if renamed above)

cd firebase-react-chakra-ui-starter

Rename the git remote url to your remote url

git remote set-url origin git@github.com:<YOUR USERNAME>/<YOUR REPO NAME>.git

Install npm modules

npm install --prefix ./functions
yarn --cwd ./hosting install

Add .env.local with following content

REACT_APP_FIREBASE_APIKEY=<from firebase config>
REACT_APP_FIREBASE_AUTHDOMAIN=<from firebase config>
REACT_APP_FIREBASE_DATABASEURL=<from firebase config>
REACT_APP_FIREBASE_PROJECTID=<from firebase config>
REACT_APP_FIREBASE_STORAGEBUCKET=<from firebase config>
REACT_APP_FIREBASE_MESSAGINGSENDERID=<from firebase config>
REACT_APP_FIREBASE_APPID=<from firebase config>
REACT_APP_FIREBASE_MEASUREMENTID=<from firebase config>

To complete deployment to firebase via Github actions, add the following Secrets to your reposity on Github:

FIREBASE_TOKEN (get this via "firebase login:ci")
REACT_APP_FIREBASE_APIKEY
REACT_APP_FIREBASE_APPID
REACT_APP_FIREBASE_AUTHDOMAIN
REACT_APP_FIREBASE_MEASUREMENTID
REACT_APP_FIREBASE_MESSAGINGSENDERID
REACT_APP_FIREBASE_PROJECTID
REACT_APP_FIREBASE_STORAGEBUCKET

Set your firebase app id in .firebaserc by changing react-chakra-ui-starter to <YOUR APP ID>. Make a commit for this change. Finally, push to your remote repository

git push origin master

Project Structure

• .github (contains github workflows) Github Actions
• functions (contains your cloud functions)
• hosting (contains your react app)

Here is the tree:

├── .github
│   ├── workflows
│   │   ├── functions.yml
│   │   └── hosting.yml
├── functions
│   ├── package.json
│   ├── src
│   │   ├── common
│   │   │   ├── db.ts
│   │   │   └── types.ts
│   │   ├── fn
│   │   │   ├── auth
│   │   │   │   └── user_on_create_fn.ts
│   │   │   ├── common.ts
│   │   │   └── http
│   │   │       └── hello_world.ts
│   │   └── index.ts
│   ├── tsconfig.json
│   └── tslint.json
├── hosting
│   ├── README.md
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   ├── src
│   │   ├── App.tsx
│   │   ├── auth
│   │   │   ├── AuthProvider.tsx
│   │   │   ├── authContext.ts
│   │   │   ├── createUserWithEmail.ts
│   │   │   ├── index.ts
│   │   │   ├── loginAnonymously.ts
│   │   │   ├── loginWithEmail.ts
│   │   │   ├── loginWithGoogle.ts
│   │   │   ├── signOut.ts
│   │   │   └── useSession.ts
│   │   ├── background.png
│   │   ├── components
│   │   │   ├── BrandingPane.tsx
│   │   │   ├── CenteredMiddleBox.tsx
│   │   │   ├── ColorModeSwitcher.tsx
│   │   │   ├── FullPageBox.tsx
│   │   │   ├── LoginPane.tsx
│   │   │   ├── Logo.tsx
│   │   │   ├── PasswordInput.tsx
│   │   │   ├── SignupPane.tsx
│   │   │   ├── TermsAndPrivacyText.tsx
│   │   │   ├── TextDivider.tsx
│   │   │   └── index.ts
│   │   ├── firebase
│   │   │   ├── config.js
│   │   │   └── index.ts
│   │   ├── hooks
│   │   │   ├── index.js
│   │   │   ├── useError.ts
│   │   │   └── useWindowDimensions.ts
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── logo.svg
│   │   ├── react-app-env.d.ts
│   │   ├── reportWebVitals.ts
│   │   ├── routes
│   │   │   ├── Index.tsx
│   │   │   ├── auth
│   │   │   │   └── Index.tsx
│   │   │   ├── dashboard
│   │   │   │   └── Index.tsx
│   │   │   ├── login
│   │   │   │   └── Index.tsx
│   │   │   └── signup
│   │   │       └── Index.tsx
│   │   ├── setupTests.ts
│   │   ├── theme.ts
│   │   └── utils.ts
│   ├── tsconfig.json
│   └── yarn.lock
├── .firebaserc
├── .gitignore
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── README.md

Auth page