Skip to content

Dhilipkumar-max/Fittness_Tracker

Repository files navigation

FitTrack – Fitness Tracking App

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.

Features

  • 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.

Project Structure

.
├── 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

Getting Started

Prerequisites

  • Node.js (v18+ recommended)
  • Convex CLI (for backend dev)

Installation

  1. Clone the repository:

    git clone <your-repo-url>
    cd <project-directory>
  2. Install dependencies:

    npm install
  3. Start the development servers:

    npm run dev

    This will start both the frontend (Vite) and backend (Convex) servers.

  4. Access the app: Open http://localhost:5173 in your browser.

Scripts

  • npm run dev – Start frontend and backend in parallel
  • npm run lint – Typecheck and lint the code

Authentication

  • Uses Convex Auth with anonymous login by default.
  • You can update authentication providers in convex/auth.config.ts.

Database Schema

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

Customization

  • Add new activities: Update convex/activities.ts and 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.

Deployment

See Convex Hosting and Deployment for backend deployment, and Vite Deployment Guide for frontend.

License

MIT (or your preferred license)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors