Create React App TypeScript Firebase Starter Template

Make sure you ⭐️ this repository if you find it helpful or interesting :)

✨ Installation

npx create-react-app your-project-name --template typescript-firebase

OR

yarn create react-app your-project-name --template typescript-firebase

NOTE: This template is also available in JavaScript here.

⚙️ Usage

SetUp firebase

1. Go to your Firebase Console

2. Click on Add project.

   • Follow steps and create project.

3. Click on web icon.

   • Register web app.
   • You will get details for setting up Firebase SDK.

4. Add the config details in your .env file (available in root of your project).

SetUp SignIn with google

1. In your project console, click on Authentication and Get Started.

2. In Sign-in method, click on Google.

3. Toggle Enable and click on Save.

To create a new screen

1. Create a new component in src/screens.

2. In your src/config/routes.ts.

{
    path: "/your-route",
    component: YourScreenComponentName,
    name: "Screen Name For Reference",
    protected: false, // if user needs to be authenticated to access this screen
}

To Deploy on GitHub Pages

1. Add your domain (your-github-username.github.io) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

2. update the homepage field in your package.json to the domain you are hosting on. (By default it is: http://your-github-username.github.io/your-repo-name)

3. (Optional) Test production build locally: Update the homepage field to / and run:

npm i -g serve # install serve globally via npm
npm run build-and-serve

4. Deploy to GitHub Pages run:

npm run deploy

✨ Featues

1. Routing

Routing setup using react-router-dom.

• With easily implementable private routes (routes only authenticated users can use).

• Easily add new screens.

2. Authentication

Authentication implemented implemented

SignIn with Google implemented using firebase and react-firebase-hooks.

3. Firebase Configured

Firebase configured with GoogleAuthProvider implemented.

4. Material UI

Login Screen UI built using @mui/material.

5. Deploy on Github Pages

Deploying on GitHub pages powered by gh-pages and spa-github-pages

🔧 File Structure

├── src
│   ├── components
│   │   ├── auth
│   │   |   ├── AuthChecker.tsx
│   │   |   ├── AuthContainer.tsx
│   │   |   ├── Logout.tsx
│   │   ├── utils
│   │   |   ├── Center.tsx
│   ├── config
│   │   ├── firebase.config.ts
│   │   ├── firebase.ts
│   │   ├── routes.ts
│   ├── screens
│   │   ├── Login.tsx
│   │   ├── Home.tsx

📝 Authors

• Hussain Pettiwala (@pettiboy)

Special thanks to this well written blog and this repo by alexandr-g.