Features • Tech Stack • Getting Started • Environment Variables • Folder Structure • Deployment
Cap M.Saleh is a modern, full-stack web application designed to help users log their gym workouts, track their progress over time, and visualize their training data. It features user authentication, role-based access control (User/Admin), training level management, and a clean interface built with Next.js and Shadcn/UI. Admins have additional capabilities to manage users, training levels, and view aggregated workout data.
- User Authentication: Secure sign-up, sign-in, and session management using NextAuth.js with improved validation.
- Workout Logging: Easily log new workouts, including exercises, sets, reps, and weight.
- Workout History: View a detailed history of past workouts.
- Training Level Management:
- Create, update, and delete training programs and levels.
- Assign users to specific training levels.
- Organize workouts by training level and workout day.
- Progress Tracking:
- Visualize workout volume and exercise progress over time.
- Training consistency charts and metrics.
- Support for different weight units.
- Admin Dashboard:
- Manage users (add, delete, change roles, assign training levels).
- View all user workouts grouped by date and training level.
- (Admin data is excluded from admin views for privacy/clarity).
- Responsive Design: User-friendly interface on both desktop and mobile devices.
- Dark/Light Mode: Theme switching support using
next-themes. - Improved Loading States: Integrated Suspense and loading indicators for better user experience.
- Framework: Next.js (v15+ with App Router & Turbopack)
- Language: TypeScript
- Authentication: NextAuth.js (v5 Beta)
- Database: PostgreSQL (via
pg) - ORM: Prisma
- UI Components: Shadcn/UI including Dialog, Table, Separator
- Styling: Tailwind CSS (v4)
- Forms: React Hook Form with Zod for validation
- Charting: Recharts
- Icons: Lucide React
Follow these instructions to set up the project locally for development.
- Node.js (v18 or later recommended)
- pnpm (or npm/yarn/bun)
- PostgreSQL Database
-
Clone the repository:
git clone https://github.com/your-username/gym-training.git # Replace with your repo URL cd gym-training
-
Install dependencies:
pnpm install
-
Set up Environment Variables:
- Copy the example environment file:
cp .env.example .env.local
- Fill in the required values in
.env.local(see Environment Variables section below).
- Copy the example environment file:
-
Database Setup:
- Ensure your PostgreSQL server is running.
- Push the Prisma schema to your database. This will create the necessary tables.
pnpm prisma db push
- (Optional) You can seed the database if you have seed scripts:
# pnpm prisma db seed (if you create a seed script)
-
Run the development server:
pnpm devThe application should now be running at [http://localhost:3000](http://localhost:3000).
Make sure to create a .env.local file in the root directory and add the following variables:
# Database Connection (Prisma)
# Example: postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=public
DATABASE_URL="your_postgresql_connection_string"
# NextAuth.js Configuration
# Generate a secret: openssl rand -base64 32
AUTH_SECRET="your_super_secret_auth_secret"
AUTH_URL="http://localhost:3000" # Your base app URL
# Optional: Add OAuth Provider Credentials (e.g., Google, GitHub)
# GOOGLE_CLIENT_ID="..."
# GOOGLE_CLIENT_SECRET="..."
# GITHUB_ID="..."
# GITHUB_SECRET="..."DATABASE_URL: Your full PostgreSQL connection string.AUTH_SECRET: A random string used to encrypt JWTs and session data. Useopenssl rand -base64 32to generate one.AUTH_URL: The base URL of your application.- Add credentials for any OAuth providers you configure in
auth.ts.
gym-training/
├── .next/ # Next.js build output (generated)
├── node_modules/ # Project dependencies (generated)
├── app/ # Next.js App Router pages, layouts, and components
│ ├── (auth)/ # Authentication routes (signin, error, etc.) - Grouped, no layout segment
│ ├── admin/ # Admin-specific pages (users, workouts)
│ ├── api/ # API routes (e.g., NextAuth callback)
│ ├── levels/ # Training level pages and level-specific workouts
│ ├── workout/ # Workout related pages (list, detail, new, edit)
│ ├── layout.tsx # Root layout
│ ├── loading.tsx # Global loading component
│ ├── page.tsx # Main dashboard page ('/')
│ ├── globals.css # Global styles
│ ├── not-found.tsx # Custom 404 page
│ └── forbidden.tsx # Custom 403 page
├── actions/ # Server Actions
│ ├── auth.ts # Authentication actions
│ ├── dashboard.ts # Dashboard data and metrics
│ ├── levels.ts # Training level management
│ ├── userActions.ts # User management actions
│ └── workouts.ts # Workout management
├── components/ # Reusable UI components (mostly client-side)
│ ├── admin/ # Admin-specific components
│ │ ├── CreateLevelDialog.tsx # Training level creation
│ │ ├── DeleteLevelDialog.tsx # Training level deletion
│ │ ├── LevelChangeForm.tsx # User level assignment
│ │ └── UpdateLevelDialog.tsx # Training level updates
│ ├── auth/ # Authentication components (forms, buttons)
│ ├── dashboard/ # Dashboard-specific components
│ │ ├── ConsistencyChart.tsx # Training consistency visualization
│ │ └── TrainingDaysInfo.tsx # Training days metrics
│ ├── layout/ # Layout components (Navbar, ThemeToggle)
│ ├── levels/ # Level-specific components
│ │ └── ExerciseProgressChart.tsx # Exercise progress visualization
│ ├── providers/ # Context providers (Theme, Session)
│ ├── ui/ # Shadcn/UI base components
│ │ ├── button.tsx # Button component
│ │ ├── dialog.tsx # Dialog component
│ │ ├── loading.tsx # Loading indicators
│ │ ├── spinner.tsx # Spinner component
│ │ ├── table.tsx # Table component
│ │ ├── textarea.tsx # Textarea component
│ │ └── ... other UI components
│ └── workout/ # Workout specific components (Card, Form, Filter)
├── lib/ # Utility functions, Prisma client instance, validations
│ ├── generated/ # Prisma client output (generated)
│ ├── validations/ # Zod schemas
│ │ ├── auth.ts # Authentication validation
│ │ ├── levels.ts # Level management validation
│ │ ├── workout.ts # Workout validation
│ │ └── ... other validation schemas
│ ├── prisma.ts # Prisma client singleton
│ └── utils.ts # General utility functions
├── prisma/ # Prisma configuration
│ ├── migrations/ # Database migration history (generated)
│ └── schema.prisma # Database schema definition
├── public/ # Static assets (images, icons)
├── types/ # TypeScript type definitions
├── .env.example # Example environment variables
├── .env.local # Local environment variables (ignored by git)
├── .eslintrc.json # ESLint configuration
├── .gitignore # Files/folders ignored by git
├── components.json # Shadcn/UI configuration
├── LICENSE # Project license file (BSD 3-Clause)
├── next.config.mjs # Next.js configuration
├── next-env.d.ts # Next.js TypeScript declarations
├── package.json # Project dependencies and scripts
├── pnpm-lock.yaml # pnpm lockfile
├── postcss.config.mjs # PostCSS configuration
├── README.md # This file
├── tailwind.config.ts # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Ensure you set up the required environment variables (especially DATABASE_URL and AUTH_SECRET) in your Vercel project settings.
Check out the Next.js deployment documentation for more details.
Contributions are welcome! If you'd like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-nameorgit checkout -b fix/your-bug-fix. - Make your changes and commit them with clear messages.
- Push your branch to your fork:
git push origin feature/your-feature-name. - Open a pull request to the main repository.
Please ensure your code adheres to the project's coding style and includes tests if applicable.
This project is licensed under the BSD 3-Clause License. See the LICENSE file for details.
(Optional: Add sections for Contributing Guidelines, License, etc. here)