{"id":22117285,"url":"https://github.com/arnobt78/Gym-Fitness-Instructor--React-FullStack","last_synced_at":"2025-10-12T06:31:49.507Z","repository":{"id":255936847,"uuid":"853925673","full_name":"arnobt78/SwoleNormous-GymFit-ReactVite-WebApp","owner":"arnobt78","description":"SwoleNormous is an ultimate gym training app built with React Vite and TailwindCSS and deployed on Netlify.","archived":false,"fork":false,"pushed_at":"2024-09-29T11:21:20.000Z","size":74,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-01T13:37:56.613Z","etag":null,"topics":["gym","gym-application","react","react-components","react-hooks","react-vite","reactjs","tailwindcss","workout-app"],"latest_commit_sha":null,"homepage":"https://swolenormous-arnob.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-07T23:19:12.000Z","updated_at":"2024-09-29T11:21:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"95c0c5cb-0c0d-4c73-8dff-768386a9ab37","html_url":"https://github.com/arnobt78/SwoleNormous-GymFit-ReactVite-WebApp","commit_stats":null,"previous_names":["arnobt78/swolenormous-gymfit-reactvite-webapp"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSwoleNormous-GymFit-ReactVite-WebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSwoleNormous-GymFit-ReactVite-WebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSwoleNormous-GymFit-ReactVite-WebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FSwoleNormous-GymFit-ReactVite-WebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/SwoleNormous-GymFit-ReactVite-WebApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236176746,"owners_count":19107387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gym","gym-application","react","react-components","react-hooks","react-vite","reactjs","tailwindcss","workout-app"],"created_at":"2024-12-01T13:31:20.222Z","updated_at":"2025-10-12T06:31:49.495Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SwoleNormous Gym/Fitness Instructor - ReactVite Web App\n\n![Screenshot 2024-09-08 at 01 19 47](https://github.com/user-attachments/assets/20bc47ba-6ccf-458b-bd37-6449cd0f1c1f) ![Screenshot 2024-09-08 at 01 20 28](https://github.com/user-attachments/assets/73df8bd0-2946-46d4-8b92-28a154173830) ![Screenshot 2024-09-08 at 01 21 18](https://github.com/user-attachments/assets/ffe45b85-5246-4b4e-9cc9-e1c77507519d) ![Screenshot 2024-09-08 at 01 22 12](https://github.com/user-attachments/assets/11391ac5-fbad-4754-bfa3-3d77d5a970c0)\n\n---\n\n## Project Summary\n\n**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.\n\n- **Live Demo:** [https://swolenormous-arnob.netlify.app](https://swolenormous-arnob.netlify.app)\n\n---\n\n## Table of Contents\n\n1. [Project Features](#project-features)\n2. [Technology Stack](#technology-stack)\n3. [Project Structure](#project-structure)\n4. [Installation \u0026 Running Locally](#installation--running-locally)\n5. [Web Worker \u0026 Training Logic Mechanism](#web-worker--training-logic-mechanism)\n6. [Detailed Usage Walkthrough](#detailed-usage-walkthrough)\n7. [Keywords](#keywords)\n8. [Conclusion](#conclusion)\n\n---\n\n## Project Features\n\n- **Automatic Workout Generator:** Smartly composes workouts based on user-selected muscle groups, equipment, and goals.\n- **Customizable Training Objectives:** Supports fat loss, hypertrophy, strength, and skill-based routines.\n- **Rich Exercise Library:** Hundreds of exercises with detailed descriptions, alternatives, and equipment variants.\n- **Responsive Design:** Fully mobile-friendly and desktop-ready UI.\n- **Modern UI/UX:** Built with TailwindCSS for a clean, fast, and modern interface.\n- **Open Source Algorithms:** Training logic is transparent and easy to extend.\n- **Deployed Online:** Easily accessible via web browser, no installation required.\n\n---\n\n## Technology Stack\n\n- **Frontend:** React (with Vite as build tool)\n- **Styling:** TailwindCSS, PostCSS, Autoprefixer\n- **Logic/Algorithms:** Custom JavaScript modules (`swoldier.js`, `functions.js`)\n- **Deployment:** Netlify\n\n---\n\n## Project Structure\n\n```\nSwoleNormous-GymFit--ReactVite/\n├── public/\n│   └── ... (static assets)\n├── src/\n│   ├── components/\n│   │   └── Generator.jsx      # Main workout generator UI\n│   ├── utils/\n│   │   ├── swoldier.js       # Core exercise definitions and logic\n│   │   └── functions.js      # Workout generation algorithms\n│   ├── App.jsx\n│   ├── main.jsx\n│   └── index.css             # Tailwind directives\n├── package.json\n├── tailwind.config.js\n├── postcss.config.js\n└── README.md\n```\n\n- **components/**: React UI components, including the workout generator.\n- **utils/swoldier.js**: Contains data and metadata for exercises (type, muscles, equipment, levels, descriptions, and substitutions).\n- **utils/functions.js**: Implements the workout generation logic—matching user goals to exercise routines.\n- **public/**: Static assets and images.\n\n---\n\n## Installation \u0026 Running Locally\n\n### 1. Prerequisites\n\n- [Node.js](https://nodejs.org/en/) installed (recommended: latest LTS version)\n- npm (comes with Node.js)\n\n### 2. Install Dependencies\n\n```sh\nnpm install\n```\n\n### 3. Start the Development Server\n\n```sh\nnpm run dev\n```\nThen open your browser to [http://localhost:5173/](http://localhost:5173/)\n\n### 4. (Optional) Build for Production\n\n```sh\nnpm run build\n```\n\n### 5. TailwindCSS Setup (Summary)\n\nIf you're starting from scratch (not needed for existing clone):\n\n```sh\nnpm create vite@latest my-project -- --template react\ncd my-project\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\nThen configure `tailwind.config.js`:\n\n```js\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: { extend: {} },\n  plugins: [],\n}\n```\n\nAnd add to `src/index.css`:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n---\n\n## Web Worker \u0026 Training Logic Mechanism\n\n### How the Training Logic Works\n\n- **Exercise Database:** All exercises are defined in `swoldier.js` with their metadata (muscle groups, equipment, difficulty, description, alternatives).\n- **Workout Generator:** The main function in `functions.js` (`generateWorkout`) takes user input (muscles, goal, available equipment) and algorithmically creates a workout routine by:\n  - Filtering valid exercises by user context.\n  - Assigning compound and accessory exercises.\n  - Matching exercise schemes (sets/reps) to the chosen goal (e.g., hypertrophy, strength).\n  - Ensuring muscle group coverage and exercise variety.\n- **UI Interaction:** In `Generator.jsx`, users select their preferences, then the app displays a generated routine.\n- **Teaching Content:** Each exercise includes a description and alternatives, helping users learn proper form and variations.\n\n#### Example (Pseudocode):\n\n```\nUser selects: Goal = Hypertrophy, Muscle = Chest, Equipment = Bands\n\n1. Filter exercises that target 'chest' and use 'bands'\n2. Randomly (but intelligently) mix compound \u0026 accessory movements\n3. Generate a workout with 5 sets, alternating between types\n4. Output: A routine with set/reps, exercise name, and teaching description\n```\n\n---\n\n## Detailed Usage Walkthrough\n\n1. **Open the App:** [Live Demo](https://swolenormous-arnob.netlify.app) or run locally.\n2. **Select Muscle Group(s):** Choose from major muscle groups (Chest, Back, Legs, Shoulders, etc.).\n3. **Choose Your Goal:** Fat loss, Hypertrophy, Strength, or Skill.\n4. **Pick Available Equipment:** Options adapt exercises to your gym/home resources.\n5. **Generate Workout:** The app suggests a structured routine, complete with set/rep schemes and exercise descriptions.\n6. **View Exercise Details:** Click on exercises to view form tips, substitutions, and teaching notes.\n7. **Customize Further:** Rerun the generator or adjust selections for new routines.\n\n---\n\n## Keywords\n\n- Gym Workouts\n- Fitness Training\n- React Vite\n- TailwindCSS\n- Workout Generator\n- Exercise Algorithms\n- Web App\n- Training Logic\n- Personalized Routines\n- Open Source Fitness\n- JavaScript Fitness Apps\n\n---\n\n## Conclusion\n\nSwoleNormous-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.\n\n**Contributions and feedback are welcome!**\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FGym-Fitness-Instructor--React-FullStack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2FGym-Fitness-Instructor--React-FullStack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FGym-Fitness-Instructor--React-FullStack/lists"}