Skip to content

GLA Firebase - Grocery List app utilizing React and Firebase/Firestore

License

Notifications You must be signed in to change notification settings

merogersdev/gla-firebase

Repository files navigation

Grocery List App

GLA Firebase Screenshot

Quick Summary

Real-world grocery list application with SSO and persistent database via Firebase.

Goal

Testing React + Firebase as an alternative to the MERN stack, and improve application as I learn more. Demo deployed to AWS S3 + CloudFront via Github Actions.

Core Technologies

  • Vite v4.3.9
  • React v18.2
  • Tanstack Query v5.24
  • Sass v1.71
  • Firebase v10.8

Scripts

  • Development Server: yarn run dev
  • Build for Production: yarn run build
  • Production Preview: yarn run preview
  • Run Tests: yarn run test
  • Run Tests with Auto Fix: yarn run test:auto
  • Run Linting: yarn run lint
  • Run Linting with Auto Fix: yarn run lint: fix
  • Initial Setup for Husky: yarn run prepare

Initial Setup (Development)

  1. Sign up for Firebase and create Web App.
  2. Enable Firebase Auth (using both Email and Password & Google Auth)
  3. Under Firestore Database rules, copy/paste the following:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Grocery Items
    match /items/{item} {
    	allow read;
      allow create: if request.auth != null;
    	allow delete: if request.auth != null;
      allow update: if request.auth != null;
    }

    // Users
    match /users/{user} {
    	allow read;
    	allow create;
    	allow update: if request.auth.uid == user
    }
  }
}

  1. Clone or fork repository and copy example.env to .env and add your Firebase application credentials

  2. To start the development server, run yarn run dev

Tags

HTML5 SASS JavaScript React React Query Vite Firebase Yarn GitHub Actions AWS Jest