Grocery List App

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
    }
  }
}

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

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

Tags