Nocturnal Pumpkin Maelstrom

    cra-template-firebase-starter

    0.0.5 • Public • Published

    Create React App Firebase Starter Template

    npm License MIT PRs Welcome

    React NPM

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

    Installation

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

    OR

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

    ⚙️ 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 your config details in your .env.

    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. In your terminal

    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.js
    │   │   |   ├── AuthContainer.js
    │   │   |   ├── Logout.js
    │   │   ├── utils
    │   │   |   ├── Center.js
    │   ├── config
    │   │   ├── firebase.config.js
    │   │   ├── firebase.js
    │   │   ├── routes.js
    │   ├── screens
    │   │   ├── Login.js
    │   │   ├── Home.js
    

    📝 Authors

    Install

    npm i cra-template-firebase-starter

    DownloadsWeekly Downloads

    2

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    40.7 kB

    Total Files

    27

    Last publish

    Collaborators

    • pettiboy