Architecture and Tech Stack

Architecture & Tech Stack 🏗️

This project uses a modern Serverless architecture, leveraging the power of React for the frontend and Firebase for backend services.

Overview Diagram

graph TD
    Client[React Client]
    Mobile[Mobile Apps (Capacitor)]
    Firebase[Firebase Services]
    GH[GitHub Pages]

    Client -->|Auth, Data| Firebase
    Mobile -->|Wrap| Client
    Client -->|Hosting| GH
    
    subgraph Firebase Services
        Auth[Authentication]
        DB[Firestore NoSQL]
        Storage[File Storage]
    end

Loading

Technology Stack

Frontend Core

• React: Main UI library.
• Vite: Next-generation frontend tooling for fast builds.
• Tailwind CSS: Utility-first CSS framework for styling.
• React Router: Handling navigation and routing.

Data & Backend

• Firebase Authentication: Handles user signup, login (Email/Password, Google).
• Cloud Firestore: NoSQL real-time database.
• Firebase Storage: Storing user uploads (profile pictures, event banners).

Mobile

• Capacitor: Cross-platform native runtime. Allows us to deploy the web app as a native iOS and Android app.

Deployment / DevOps

• GitHub Actions: CI/CD pipelines to build and deploy.
• GitHub Pages: Hosting the static web application.

Key Design Principles

1. Responsive First: Designed to look great on mobile and desktop.
2. Component-Based: Reusable UI components (in src/components).
3. Secure by Default: Using Firestore Security Rules and Environment Variables.