Welcome to GYM Website – a modern, responsive web application designed to help users kickstart their fitness journey. Built with React for the frontend and Express.js for the backend, this project provides an engaging gym experience with interactive features like a BMI calculator, contact form, image gallery, and motivational hero section. It's perfect for gym owners, fitness enthusiasts, or anyone looking to showcase services and tools in a sleek, user-friendly interface.
This README provides a comprehensive guide to understanding, setting up, and contributing to the project. Whether you're a developer exploring the code or a user testing the app, you'll find everything you need here.
- Hero Section: Eye-catching landing page with motivational text and call-to-action buttons to inspire users.
- BMI Calculator: Interactive tool to calculate Body Mass Index (BMI) based on height, weight, and gender. Includes categorized feedback with toast notifications (e.g., underweight, normal, overweight).
- Gallery: Dynamic image grid showcasing gym vibes with high-quality photos of workouts and facilities.
- Contact Form: Secure form for user inquiries, powered by backend email integration. Handles validation, loading states, and error/success feedback.
- Footer: Simple, branded footer crediting the developer.
- Responsive Design: Mobile-first approach with CSS styling for seamless viewing on all devices.
- Toast Notifications: User-friendly alerts for form submissions, BMI results, and errors using React Toastify.
The app is structured as a full-stack project: React for dynamic UI and Express for handling contact emails via a Nodemailer-like utility.
## Tech Stack
| Category | Technologies / Tools | Purpose |
|----------------|-----------------------------------------------------------|-------------------------------------------------------------------------- |
| **Frontend** | React (18.x), React Toastify, Axios, React Spinners | Building interactive components, API calls, notifications, and loading indicators. |
| **Backend** | Node.js (18.x), Express.js, CORS, dotenv | Server setup, API endpoints for email sending, and environment configuration. |
| **Styling** | CSS (Modular: App.css, index.css) | Responsive layouts and visual enhancements. |
| **Utilities** | Nodemailer (via sendEmail.js) | Email dispatch for contact form functionality. |
| **Deployment** | Vercel / Netlify (Frontend), Heroku / Render (Backend) | Simple and reliable hosting options. |
## Project Structure
The repository is organized into clear directories for maintainability:
GYM-website/
├── public/ # Static assets (e.g., images like bmi.jpg, img1.webp)
├── src/
│ ├── components/ # Reusable React components
│ │ ├── BMICalculator.jsx # BMI calculation logic with form and feedback
│ │ ├── Contact.jsx # Contact form with API integration
│ │ ├── Footer.jsx # Simple footer component
│ │ ├── Gallery.jsx # Image gallery grid
│ │ ├── Hero.jsx # Landing hero section
│ │ └── Navbar.jsx # Navigation bar (if implemented)
│ ├── utils/ # Helper functions
│ │ └── sendEmail.js # Email sending utility (backend integration)
│ ├── App.js # Main app component (routes/components orchestration)
│ └── index.js # Entry point for React app
├── server.js # Express backend server (contact API)
├── config.env # Environment variables (e.g., PORT, FRONTEND_URL)
├── package.json # Dependencies and scripts
└── README.md # This file!
- Frontend Focus: Most components are self-contained JSX files in
/src/components, making it easy to extend (e.g., add WorkoutSessions.jsx or Pricing.jsx). - Backend: A lightweight
server.jsfile handles the/send/mailendpoint. No database – pure API for email.
- Node.js (v18.x or higher)
- npm or yarn
- Git
-
Clone the Repository:
git clone https://github.com/Devsars24/GYM-website.git cd GYM-website -
Install Dependencies:
-
For Frontend (React):
cd src # If separate, or run in root if bundled npm installKey packages:
react,react-dom,axios,react-toastify,react-spinners. -
For Backend (Express):
npm install express cors dotenv(Run in root or a
/serverfolder if separated.)
-
-
Environment Setup:
- Create a
.envfile in the root (copy fromconfig.envtemplate):PORT=4000 FRONTEND_URL=http://localhost:3000 EMAIL_USER=your-email@gmail.com # For Nodemailer EMAIL_PASS=your-app-password - Update
sendEmail.jswith your email credentials (Gmail App Password recommended for security).
- Create a
-
Verify Structure:
- Ensure images are in
/public(e.g.,/bmi.jpg,/img1.webp). - Test imports in components (e.g.,
import { toast } from "react-toastify";).
- Ensure images are in
-
Start the Backend (Contact Form API):
node server.js- Server runs on
http://localhost:4000. - Test endpoint: POST to
/send/mailwith body{ name: "Test", email: "test@example.com", message: "Hello!" }.
- Server runs on
-
Start the Frontend (React Dev Server):
npm start # Or yarn start- App runs on
http://localhost:3000. - Open in browser to interact with BMI calculator, gallery, etc.
- App runs on
-
Testing Features:
- BMI Calculator: Enter height (cm), weight (kg), select gender, and submit. View results and toasts.
- Contact Form: Fill form and submit – emails sent to
saurabhsingh100605@gmail.com. - Gallery/Hero: Static but responsive; customize images in
Gallery.jsx.
Add these to your package.json for efficiency:
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"server": "node server.js",
"dev": "concurrently \"npm run server\" \"npm start\""
}
}- Install
concurrentlyfor parallel backend/frontend:npm install --save-dev concurrently.
Using Axios (as in Contact.jsx):
axios.post('http://localhost:4000/send/mail', { name, email, message })
.then(res => console.log(res.data)) // { success: true, message: "Message Sent Successfully." }
.catch(err => console.error(err.response.data));- Frontend: Deploy to Vercel/Netlify via GitHub integration. Build command:
npm run build. - Backend: Deploy to Heroku/Render. Set env vars in dashboard.
- Full-Stack Tip: Use a proxy in
package.json("proxy": "http://localhost:4000") for CORS-free dev.
Contributions are welcome! Here's how to get involved:
- Fork the repo and create a feature branch (
git checkout -b feature/amazing-bmi-update). - Commit changes (
git commit -m "Add BMI age factor"). - Push to branch (
git push origin feature/amazing-bmi-update). - Open a Pull Request.
Guidelines:
- Follow ES6+ syntax and React best practices (hooks, functional components).
- Add tests for new features (e.g., using Jest for BMI logic).
- Update README for major changes.
- Issues? Open one with details on bugs or ideas.
This project is licensed under the MIT License - see the LICENSE file for details.
Developed by Saurabh Singh Rajput
- Email: saurabhsingh100605@gmail.com
- GitHub: Devsars24
Designed and Developed with 💪 by Saurabh Singh Rajput. Let's get moving!
If you're new to this project (as the developer or a learner):
- Frontend (React): Handles UI. Each
.jsxfile is a component – e.g.,BMICalculator.jsxuses state (useState) for inputs and calculates BMI with simple math:weight / (height_m^2). Toasts add UX polish. - Backend (Express): Tiny server for one job – emailing contacts.
server.jssets up routes;sendEmail.js(not shown but referenced) uses Nodemailer. - Why This Structure?: Modular for easy expansion (e.g., add auth or database). Start simple, scale up.
- Common Tweaks: Fix typos (e.g., "advide" → "advice", "maintaing" → "maintaining" in code). Add more images or routes.
Questions? Dive into the code or ping me! 🚀