Skip to main content

​
Installation

This guide will help you set up BodyWorks on your local machine for development and customization.

​
Prerequisites

Before installing BodyWorks, ensure you have the following installed:

​
Node.js

BodyWorks requires Node.js 18 or higher. 
node --version
We recommend using Node.js 20 LTS for the best compatibility and performance.
BodyWorks uses Bun as the preferred package manager for faster installs and better performance. 
curl -fsSL https://bun.sh/install | bash
While Bun is recommended, you can also use npm, yarn, or pnpm as package managers.

​
Clone the repository

Get the BodyWorks source code from GitHub: 
git clone https://github.com/Akshat-Jaiswal-8/body-works-next.git
cd body-works-next

​
Install dependencies

Install all required packages using your preferred package manager: 
bun install
This will install all dependencies including:
  • Next.js 15 - React framework with server components
  • React 19 - UI library
  • TypeScript - Type safety
  • @tanstack/react-query - Data fetching and caching
  • Shadcn UI components - Pre-built accessible components
  • Tailwind CSS 4 - Utility-first CSS framework
  • Motion (Framer Motion) - Animation library
  • Axios - HTTP client for API calls
  • Lucide React - Icon library
Installation with Bun is significantly faster than npm, typically completing in under 30 seconds.

​
Environment setup

BodyWorks connects to the Body Works API to fetch exercise and routine data. The API endpoint is already configured in the codebase.

​
API configuration

The application uses axios for API calls. The base configuration is located in the hooks directory:
  • hooks/useExercises.tsx - Fetches exercise data
  • hooks/useBodyParts.tsx - Fetches body part categories
  • hooks/useEquipments.tsx - Fetches equipment types
  • hooks/useTargetMuscles.tsx - Fetches target muscle groups
No API key is required for the Body Works API - it’s free and open to use.

​
Optional environment variables

If you want to customize the application, you can create a .env.local file in the root directory:
.env.local
# Optional: Analytics
NEXT_PUBLIC_VERCEL_ANALYTICS_ID=your-analytics-id

# Optional: Custom API endpoint
NEXT_PUBLIC_API_URL=https://your-api-endpoint.com
Never commit .env.local or any file containing sensitive information to version control.

​
Run the development server

Start the local development server: 
bun run dev
The development server uses Next.js with Turbopack for ultra-fast hot module replacement (HMR). Open your browser and navigate to: 
http://localhost:3000
You should see the BodyWorks homepage with the hero section displaying:
“Push yourself harder to become better”
The first load may take a few seconds while Next.js compiles the pages. Subsequent changes will be reflected instantly thanks to Turbopack.

​
Build for production

To create an optimized production build: 
bun run build
Then start the production server: 
bun run start

​
Project structure

Understanding the codebase organization: 
body-works-next/
├── app/                      # Next.js 15 app directory
│   ├── (home)/              # Homepage components
│   │   └── _components/     # Hero, Features, Testimonials, FAQ
│   ├── exercises/           # Exercise pages
│   ├── body-parts/          # Body part filter pages
│   ├── equipments/          # Equipment filter pages
│   ├── target-muscle/       # Target muscle pages
│   ├── routines/            # Workout routine pages
│   ├── layout.tsx           # Root layout with metadata
│   ├── page.tsx             # Homepage
│   └── globals.css          # Global styles
├── components/              # Reusable components
│   ├── ui/                  # Shadcn UI components
│   ├── navbar.tsx           # Navigation bar
│   ├── footer.tsx           # Footer component
│   ├── exercise-card.tsx    # Exercise display cards
│   └── descripted-card.tsx  # Cards with descriptions
├── hooks/                   # Custom React hooks
│   ├── useExercises.tsx     # Exercise data fetching
│   ├── useBodyParts.tsx     # Body parts data
│   ├── useEquipments.tsx    # Equipment data
│   └── useTargetMuscles.tsx # Target muscle data
├── lib/                     # Utility functions
│   └── utils.ts             # Helper utilities
├── public/                  # Static assets
│   ├── hero.webp            # Hero image
│   └── img.webp             # Additional images
├── package.json             # Dependencies and scripts
├── next.config.ts           # Next.js configuration
├── tailwind.config.ts       # Tailwind CSS config
└── tsconfig.json            # TypeScript config

​
Verify installation

Confirm everything is working correctly:
1

Check the homepage

Navigate to http://localhost:3000 and verify the hero section loads with the headline and call-to-action button.
2

Test exercises page

Click “Explore for free” or navigate to /exercises. You should see exercise cards loading from the API.
3

Test filtering

Navigate to /body-parts, /equipments, or /target-muscle and verify that categories load correctly.
4

Check routines

Visit /routines to ensure workout routines are fetching and displaying properly.
5

Verify React Query devtools

Look for the React Query devtools icon in the bottom corner of your browser. This indicates data fetching is working correctly.

​
Troubleshooting

​
Port already in use

If port 3000 is already in use, Next.js will automatically try port 3001. You can also specify a custom port: 
bun run dev -- -p 3001

​
Module not found errors

If you encounter module errors, try cleaning the installation: 
rm -rf node_modules
rm bun.lockb
bun install

​
TypeScript errors

If you see TypeScript errors, ensure you’re using TypeScript 5+: 
bun add -d typescript@latest

​
API connection issues

If exercises aren’t loading:
  1. Check your internet connection
  2. Verify the Body Works API is accessible
  3. Check the browser console for error messages
  4. Ensure React Query is properly configured in app/providor.tsx
If you’re behind a corporate firewall, the Body Works API might be blocked. Contact your network administrator.

​
Next steps

Now that you have BodyWorks running locally:

Component architecture

Learn about the application architecture and component structure.

Customize the UI

Modify styles, themes, and components to match your brand.

API integration

Understand the Body Works API and how data flows through the app.

UI library

Explore the Shadcn UI components used throughout the app.

Build docs developers (and LLMs) love

Get started for freeTalk to us