FoodMe-Test

Playground for building a CI/CD process before integrating into my side project

Content

• Tech Stack
• Github
  • Github Actions
• Basic Application Design
  • Functions by Page
• In-depth breakdown
  • Authentications

Tech Stack

• Firebase:
  • Firestore (NoSQL)
  • Authentication
• React with Vite
• React Router
• Tailwindcss
• Github Actions
• Cypress for e2e and component testing

Github

---
title: Testing
---
gitGraph
    commit
    commit id: "Intialize environment" tag: "v0.10"
    branch alpha
    checkout alpha
    commit
    commit
    checkout main
    merge alpha
    

Loading

Playing with gitGraph

Github Actions

I have been having issues with firebase pre-configured github actions when I want to upload the entire project to github.
It runs fine with in a branch with only /hosting as the run executes fine possibly without firebase-tools packaged.
For now, I decided to default the working directory to /hosting for both merge and pull request workflow

defaults:
  run:
    shell: bash
    working-directory: ./hosting


jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
            ...
        env:
          FIREBASE_CLI_EXPERIMENTS: webframeworks //required 

I'll be interested in checking out the extension Changed-Files to see if i can atomize the workflow

Basic Application Design

flowchart TD
    LoginPage["/login"]
    InventoryPage["/fridge"]
    RecipePage["/recipes"]    
    Dashboard["/dashboard"]

    UserAuth["userAuthentication"]

    LoginPage --> UserAuth 
    UserAuth --> Authenticated 

    subgraph Authenticated
        Dashboard --> RecipePage
        Dashboard --> InventoryPage
        Dashboard --> /receipt
    end
   

Loading

Functions by Page

/dashboard

• Dashboard for quick view of items

/recipes

• Handles recipe searching

/fridge

• Grocery inventory management

/reciept

• reciept management

In-depth-breakdown

More for personal overview of the intricacies as a sanity check

Authentication

flowchart TD
    subgraph AuthContext
        firestore.js --> signInWithUser --> useContext

    end

Loading