Skip to content
BranchesTags

Repository files navigation

Vanguard: Peak Performance

A hyper-visual command center for long‑term targets, short‑term execution, and deep‑work focus.

Live Demo

Features

  • Google Sign‑In with Firebase Auth
  • Long‑term Targets with color themes
  • Task management per Target with priorities and due dates
  • Real‑time data via Firestore listeners
  • Notifications feed for system events
  • Pomodoro Focus mode with soundscapes and XP rewards
  • Progress analytics (charts) and calendar roadmap
  • Rank, XP and badges system
  • Safety quota indicator (demo guardrail) via /api/health in dev/prod server

Screenshots

Dashboard

Focus Mode

Milestones

Architecture

graph TD
  A[User] --> B[Browser: React + Vite + TS]
  B -->|Firebase SDK| C[Firebase Auth]
  B <-->|onSnapshot| D[Firestore]

  subgraph Dev/Prod Server
    E[Express] -->|Dev| F[Vite Middleware]
    E -->|Prod| G[Static dist/ + /api/health]
  end

  B <-->|/api/health| E

  subgraph Build
    H[Vite Build] --> I[dist/]
  end

  I -->|Static Hosting| B
Loading
  • Client: React 19 + TypeScript + Tailwind CSS 4 + motion + recharts + date‑fns
  • Data: Firebase Auth + Firestore (users, targets, notifications; tasks as subcollection)
  • Server: Express wrapper for Vite dev and SPA serving in prod; exposes /api/health and a simple request-quota guard

Data Model

classDiagram
  class UserProfile {
    string uid
    string email
    string displayName
    string photoURL
    number streak
    number xp
    Rank rank
    Badge[] badges
    timestamp lastActive
  }

  class Target {
    string id
    string uid
    string title
    string description
    string category
    string deadline
    string color
    timestamp createdAt
  }

  class Task {
    string id
    string targetId
    string uid
    string title
    boolean completed
    string dueDate
    Priority priority
    timestamp createdAt
  }

  class Notification {
    string id
    string uid
    string title
    string message
    enum type
    boolean read
    timestamp createdAt
  }

  UserProfile "1" o-- "many" Target : owns
  Target "1" o-- "many" Task : has
  UserProfile "1" o-- "many" Notification : receives
Loading

Key Flows

sequenceDiagram
  actor U as User
  participant UI as UI (React)
  participant Auth as Firebase Auth
  participant DB as Firestore

  U->>UI: Click "Sign in with Google"
  UI->>Auth: signInWithPopup()
  Auth-->>UI: auth state (uid, profile)
  UI->>DB: onSnapshot(users/{uid})
  DB-->>UI: User profile doc
  UI->>DB: onSnapshot(targets where uid==user)
  DB-->>UI: Targets and tasks
Loading 
sequenceDiagram
  actor U as User
  participant UI as UI (React)
  participant DB as Firestore

  U->>UI: Create Target
  UI->>DB: addDoc(/targets, target)
  DB-->>UI: onSnapshot update
  UI->>DB: addDoc(/notifications, "New Target Forged")
  DB-->>UI: onSnapshot notifications
Loading

Repository Structure

Vanguard-Peak-performance/
├─ src/
│  ├─ App.tsx                 # App shell, views, and Firestore listeners
│  ├─ firebase.ts             # Firebase init + helpers
│  ├─ types.ts                # Shared types
│  ├─ index.css               # Tailwind v4 theme tokens and layers
│  ├─ main.tsx                # React bootstrap
│  ├─ lib/utils.ts            # cn() utility
│  └─ components/
│     ├─ TargetCard.tsx
│     ├─ TargetDetailView.tsx
│     ├─ NewTargetModal.tsx
│     ├─ NotificationCenter.tsx
│     ├─ PomodoroTimer.tsx
│     ├─ AnalyticsView.tsx
│     ├─ CalendarView.tsx
│     └─ DatePicker.tsx
├─ server.ts                  # Express dev/prod server + /api/health
├─ firestore.rules            # Firestore security rules
├─ firebase-applet-config.json# Firebase web config (client-safe)
├─ vite.config.ts             # Vite + React + Tailwind config
├─ tsconfig.json
├─ package.json
└─ README.md

Prerequisites

  • Node.js 18+ (LTS recommended)
  • A Firebase project with:
    • Authentication (Google provider enabled)
    • Firestore database (in Native mode)
  • Optional: A deployment target (Vercel/Netlify/Firebase Hosting or a Node host)

Quick Start

  1. Install dependencies 
    npm install
  2. Configure environment (optional, for AI features)
    • Create .env.local and set: 
      GEMINI_API_KEY=your_key_here
APP_URL=http://localhost:3000
  3. Configure Firebase
    • Ensure firebase-applet-config.json contains your web app config. These keys are client-visible by design for Firebase web apps.
  4. Run in development 
    npm run dev
  5. Typecheck (optional) 
    npm run lint

Firebase Setup

  1. Create a project in the Firebase console and add a Web App.
  2. Enable Google sign‑in in Authentication → Sign‑in method.
  3. Create a Firestore database (Native mode).
  4. Copy your Web App config into firebase-applet-config.json (fields like apiKey, authDomain, projectId, etc.).
  5. (Recommended) Apply security rules similar to those in firestore.rules.
  6. Seed data by signing in and creating your first Target from the UI.

Scripts

  • npm run dev — Start Express on port 3000 with Vite middleware (development).
  • npm run build — Build SPA to dist/ via Vite.
  • npm run preview — Preview the built SPA.
  • npm run lint — Typecheck with tsc --noEmit.

Note: The clean script uses a POSIX command; it may not work on Windows without a shell that supports rm -rf.

Build & Optimize

npm run build
npm run preview

The build step produces a static dist/ folder. The UI works on static hosts; if /api/health isn’t available (no server), the safety quota widget silently disables.

Hosting Guides

Option A: Static Hosting (Vercel, Netlify, Firebase Hosting)

  • Build Command: npm ci && npm run build
  • Publish/Output Directory: dist/
  • Notes:
    • No server routes are required. The /api/health widget will be inactive.
    • For Firebase Hosting: configure a simple hosting target with public: dist and rewrite to index.html.

Option B: Node Hosting with Express (Render, Railway, Fly, etc.)

Use the existing server.ts to serve the built SPA and /api/health.

  1. Ensure your host installs dev dependencies or adjust start to use a loader:
    • Start command examples:
      • npx tsx server.ts
      • Or node --loader tsx server.ts
  2. Set env vars as needed (APP_URL, optional GEMINI_API_KEY).
  3. Configure health checks to GET /api/health if your platform supports them.

Option C: Container/Cloud Run (Example)

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npx","tsx","server.ts"]

Deploy the container to your host of choice. Ensure GEMINI_API_KEY/APP_URL are set in the environment.

Security Notes

  • Do not commit private API keys. Use .env.local or platform secret managers.
  • Firebase web config is safe to expose; Firestore access is governed by firestore.rules.
  • Review and tailor rules to your threat model before production.

Troubleshooting

  • 503 “Daily Limit Reached”: The server includes a demo request quota guard. Reduce requests or wait for the 24h reset.
  • Permission denied in Firestore: Ensure you are authenticated and rules allow your operation.
  • Google sign‑in popup blocked: Allow popups for your domain or test in a different browser.
  • Static deploy shows blank /api/health: That endpoint only exists with the Node server; this is expected.
  • Windows clean script: If npm run clean fails, delete dist/ manually or use rimraf.

Roadmap Ideas

  • Integrate Gemini for planning assistance (uses GEMINI_API_KEY)
  • Persist focus session history and enhance analytics
  • Offline/optimistic updates
  • Mobile‑first PWA packaging

License

Licensed under the MIT License.

SIddhant Bhasin Production

About

New way to magae daily task fight the battle through vanguard

vanguard-peak-performance-848379575396.us-west1.run.app/

Topics

focus-managementproductivityreacttask-management

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

Generated from google-gemini/aistudio-repository-template