Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chouaib-629/reactjs_swolenormous_gymapp
A fitness application designed to provide users with exercises to achieve significant muscle growth and development
https://github.com/chouaib-629/reactjs_swolenormous_gymapp
css3 font-awesome google-fonts html5 js jsx nodejs react reactjs tailwindcss vite
Last synced: 19 days ago
JSON representation
A fitness application designed to provide users with exercises to achieve significant muscle growth and development
- Host: GitHub
- URL: https://github.com/chouaib-629/reactjs_swolenormous_gymapp
- Owner: chouaib-629
- Created: 2024-07-17T10:40:33.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-17T11:33:37.000Z (6 months ago)
- Last Synced: 2024-07-17T14:19:57.558Z (6 months ago)
- Topics: css3, font-awesome, google-fonts, html5, js, jsx, nodejs, react, reactjs, tailwindcss, vite
- Language: JavaScript
- Homepage:
- Size: 2.62 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Swolenermous Gym WebApp
A fitness application designed to provide users with exercises to achieve significant muscle growth and development
This repository contains the code for a Gym WebApp built using HTML, CSS, Tailwind CSS, JS and React. The webApp includes coponents as Hero, WorkOut, SectionWrapper, Generator, ExerciseCard and Button.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Screenshot](#screenshot)
- [Contributing](#contributing)
- [Contact Information](#contact-information)
## Features
- **Responsive Design:** Optimized for various screen sizes, providing a seamless experience across devices.
- **Smooth Scrolling:** Enhances user navigation and overall experience.
- **Custom Fonts:** Utilize "Poppins" for a modern and clean look.
- **Multiple Components:** Includes coponents as Hero, WorkOut, SectionWrapper, Generator, ExerciseCard and Button.
## Technologies Used
- **HTML5** for structuring content
- **CSS3** for styling and layout
- **Tailwind CSS 3.0** for rapid prototyping and responsive design
- **JavaScript** for dynamic behavior and interactivity
- **React 18.3.1** for building reusable UI components
- **Font Awesome 6.5.2** for icons and graphics
- **Google Fonts** for custom typography
## Getting Started
To get a local copy of the website up and running, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/chouaib-629/reactjs_Swolenormous_GymApp.git
```
2. **Navigate to the project directory:**
```bash
cd reactjs_Swolenormous_GymApp
```
3. **Install dependencies:**
```bash
npm install
```
4. **Initialize Tailwind CSS:**
```bash
npx tailwindcss init -p
```
5. **Start the developement server:**
```bash
npm run dev
```
6. **Open the website in your web browser:**
- Open `https://localhost:5173` in your web browser to view the website.
OR
- On your terminal tape:
```bash
o + enter key
```
## Usage
### Customization
- **Colors:** Defined in `:root` in `index.css`, easily customizable.
- **Fonts:** Primary font can be changed by updating the font-family propertie in the CSS file.
### Structure and Styling
The Swoolnermous Gym WebApp is built using a modular structure, with each component serving a specific purpose. The website is divided into several sections, including:
- **Hero Section:** A prominent section that have a call to action.
- **WorkOut Section:** A section that displays various workout routines and exercises.
- **SectionWrapper:** A reusable component that wraps around other sections, providing a consistent layout and design.
- **Generator:** A component that generates exercises and workouts based on your selection.
- **ExerciseCard:** A component that displays individual exercises, including their names, descriptions, and number of sets.
- **Button:** A custom button component that can be used throughout the website.
## Screenshot
Here is a screenshot of the website:
### Full Website
## Contributing
Contributions are welcome! Please follow these steps to contribute:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature/your-feature-name
```
3. Make your changes and commit them:
```bash
git commit -m "Add your commit message"
```
4. Push to the branch:
```bash
git push origin feature/your-feature-name
```
5. Create a pull request.
## Contact Information
For questions or support, please contact [Me](mailto:[email protected]).