https://github.com/arnobt78/Gym-Fitness-Instructor--React-FullStack
SwoleNormous is an ultimate gym training app built with React Vite and TailwindCSS and deployed on Netlify.
https://github.com/arnobt78/Gym-Fitness-Instructor--React-FullStack
gym gym-application react react-components react-hooks react-vite reactjs tailwindcss workout-app
Last synced: 8 months ago
JSON representation
SwoleNormous is an ultimate gym training app built with React Vite and TailwindCSS and deployed on Netlify.
- Host: GitHub
- URL: https://github.com/arnobt78/Gym-Fitness-Instructor--React-FullStack
- Owner: arnobt78
- Created: 2024-09-07T23:19:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-29T11:21:20.000Z (over 1 year ago)
- Last Synced: 2024-12-01T13:37:56.613Z (over 1 year ago)
- Topics: gym, gym-application, react, react-components, react-hooks, react-vite, reactjs, tailwindcss, workout-app
- Language: JavaScript
- Homepage: https://swolenormous-arnob.netlify.app
- Size: 72.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SwoleNormous Gym/Fitness Instructor - ReactVite Web App
   
---
## Project Summary
**SwoleNormous-GymFit** is a dynamic, web-based gym and fitness training application built with React, Vite, and TailwindCSS. It provides users with intelligent workout generation, exercise guidance, and personalized training plans, leveraging advanced algorithmic logic for routine creation. The app is designed for both beginners and advanced gym-goers, supporting a variety of goals and equipment availability.
- **Live Demo:** [https://swolenormous-arnob.netlify.app](https://swolenormous-arnob.netlify.app)
---
## Table of Contents
1. [Project Features](#project-features)
2. [Technology Stack](#technology-stack)
3. [Project Structure](#project-structure)
4. [Installation & Running Locally](#installation--running-locally)
5. [Web Worker & Training Logic Mechanism](#web-worker--training-logic-mechanism)
6. [Detailed Usage Walkthrough](#detailed-usage-walkthrough)
7. [Keywords](#keywords)
8. [Conclusion](#conclusion)
---
## Project Features
- **Automatic Workout Generator:** Smartly composes workouts based on user-selected muscle groups, equipment, and goals.
- **Customizable Training Objectives:** Supports fat loss, hypertrophy, strength, and skill-based routines.
- **Rich Exercise Library:** Hundreds of exercises with detailed descriptions, alternatives, and equipment variants.
- **Responsive Design:** Fully mobile-friendly and desktop-ready UI.
- **Modern UI/UX:** Built with TailwindCSS for a clean, fast, and modern interface.
- **Open Source Algorithms:** Training logic is transparent and easy to extend.
- **Deployed Online:** Easily accessible via web browser, no installation required.
---
## Technology Stack
- **Frontend:** React (with Vite as build tool)
- **Styling:** TailwindCSS, PostCSS, Autoprefixer
- **Logic/Algorithms:** Custom JavaScript modules (`swoldier.js`, `functions.js`)
- **Deployment:** Netlify
---
## Project Structure
```
SwoleNormous-GymFit--ReactVite/
├── public/
│ └── ... (static assets)
├── src/
│ ├── components/
│ │ └── Generator.jsx # Main workout generator UI
│ ├── utils/
│ │ ├── swoldier.js # Core exercise definitions and logic
│ │ └── functions.js # Workout generation algorithms
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css # Tailwind directives
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── README.md
```
- **components/**: React UI components, including the workout generator.
- **utils/swoldier.js**: Contains data and metadata for exercises (type, muscles, equipment, levels, descriptions, and substitutions).
- **utils/functions.js**: Implements the workout generation logic—matching user goals to exercise routines.
- **public/**: Static assets and images.
---
## Installation & Running Locally
### 1. Prerequisites
- [Node.js](https://nodejs.org/en/) installed (recommended: latest LTS version)
- npm (comes with Node.js)
### 2. Install Dependencies
```sh
npm install
```
### 3. Start the Development Server
```sh
npm run dev
```
Then open your browser to [http://localhost:5173/](http://localhost:5173/)
### 4. (Optional) Build for Production
```sh
npm run build
```
### 5. TailwindCSS Setup (Summary)
If you're starting from scratch (not needed for existing clone):
```sh
npm create vite@latest my-project -- --template react
cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
Then configure `tailwind.config.js`:
```js
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: { extend: {} },
plugins: [],
}
```
And add to `src/index.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
---
## Web Worker & Training Logic Mechanism
### How the Training Logic Works
- **Exercise Database:** All exercises are defined in `swoldier.js` with their metadata (muscle groups, equipment, difficulty, description, alternatives).
- **Workout Generator:** The main function in `functions.js` (`generateWorkout`) takes user input (muscles, goal, available equipment) and algorithmically creates a workout routine by:
- Filtering valid exercises by user context.
- Assigning compound and accessory exercises.
- Matching exercise schemes (sets/reps) to the chosen goal (e.g., hypertrophy, strength).
- Ensuring muscle group coverage and exercise variety.
- **UI Interaction:** In `Generator.jsx`, users select their preferences, then the app displays a generated routine.
- **Teaching Content:** Each exercise includes a description and alternatives, helping users learn proper form and variations.
#### Example (Pseudocode):
```
User selects: Goal = Hypertrophy, Muscle = Chest, Equipment = Bands
1. Filter exercises that target 'chest' and use 'bands'
2. Randomly (but intelligently) mix compound & accessory movements
3. Generate a workout with 5 sets, alternating between types
4. Output: A routine with set/reps, exercise name, and teaching description
```
---
## Detailed Usage Walkthrough
1. **Open the App:** [Live Demo](https://swolenormous-arnob.netlify.app) or run locally.
2. **Select Muscle Group(s):** Choose from major muscle groups (Chest, Back, Legs, Shoulders, etc.).
3. **Choose Your Goal:** Fat loss, Hypertrophy, Strength, or Skill.
4. **Pick Available Equipment:** Options adapt exercises to your gym/home resources.
5. **Generate Workout:** The app suggests a structured routine, complete with set/rep schemes and exercise descriptions.
6. **View Exercise Details:** Click on exercises to view form tips, substitutions, and teaching notes.
7. **Customize Further:** Rerun the generator or adjust selections for new routines.
---
## Keywords
- Gym Workouts
- Fitness Training
- React Vite
- TailwindCSS
- Workout Generator
- Exercise Algorithms
- Web App
- Training Logic
- Personalized Routines
- Open Source Fitness
- JavaScript Fitness Apps
---
## Conclusion
SwoleNormous-GymFit--ReactVite is a flexible, modern, and powerful gym training app that combines advanced algorithmic logic with a user-friendly interface. Whether you’re a beginner or an expert, it helps you generate effective, personalized workouts that match your equipment and goals—making fitness accessible, structured, and fun.
**Contributions and feedback are welcome!**
---