FitTrack is a modern fitness tracking web application built with React, Vite, and Tailwind CSS for the frontend, and Convex for the backend. It allows users to log workouts, track progress, manage fitness goals, and store motivational images—all with seamless authentication and a beautiful, mobile-friendly UI.
- User Authentication: Anonymous sign-in by default using Convex Auth, with easy extensibility for other providers.
- Dashboard: View today's stats (workouts, duration, distance, calories) and workout history.
- Workout Logging: Log workouts with activity type, duration, distance, calories, notes, mood, and optional images.
- Activity Management: Choose from popular or all activities, each with icons and categories.
- Gallery: Upload and view workout and motivational images in a personal gallery.
- Settings: Personalize your profile, units (metric/imperial), theme (light/dark/system), and notification preferences.
- Goals: (Schema support) Set and track weekly, monthly, or yearly goals for workouts, distance, calories, or duration.
- Responsive UI: Mobile-first design with sticky navigation and smooth transitions.
.
├── src/ # Frontend React components and styles
│ ├── components/ # Dashboard, WorkoutForm, Gallery, Settings, etc.
│ ├── App.tsx # Main app logic and navigation
│ └── index.css # Tailwind CSS styles
├── convex/ # Convex backend (database, functions, schema)
│ ├── schema.ts # Database schema (profiles, activities, workouts, images, goals)
│ ├── activities.ts # Activity-related backend logic
│ ├── workouts.ts # Workout-related backend logic
│ ├── profiles.ts # Profile management logic
│ ├── images.ts # Image upload and retrieval logic
│ └── router.ts # HTTP API routes
├── index.html
├── package.json
└── tailwind.config.js
- Node.js (v18+ recommended)
- Convex CLI (for backend dev)
-
Clone the repository:
git clone <your-repo-url> cd <project-directory>
-
Install dependencies:
npm install
-
Start the development servers:
npm run dev
This will start both the frontend (Vite) and backend (Convex) servers.
-
Access the app: Open http://localhost:5173 in your browser.
npm run dev– Start frontend and backend in parallelnpm run lint– Typecheck and lint the code
- Uses Convex Auth with anonymous login by default.
- You can update authentication providers in
convex/auth.config.ts.
The backend schema (see convex/schema.ts) includes:
- profiles: User profile, preferences, and notification settings
- activities: List of activities (name, icon, category, calories/minute)
- workouts: User workouts with stats, notes, mood, and optional geolocation/heart rate/pace data
- images: User-uploaded images (workout or motivational)
- goals: User goals (weekly, monthly, yearly) for workouts, distance, calories, or duration
- Add new activities: Update
convex/activities.tsand seed as needed. - Change UI theme: Users can select light, dark, or system theme in settings.
- Notifications: Toggle reminders, goal updates, and achievements in settings.
See Convex Hosting and Deployment for backend deployment, and Vite Deployment Guide for frontend.
MIT (or your preferred license)