GymWhiz is the ultimate fitness companion, revolutionizing your fitness journey with a range of powerful features. Gym Discovery simplifies gym exploration, allowing users to effortlessly find the ideal fitness space by filtering based on name, location, rating, and category. User Profiles enable easy sign-up, profile creation, and editing, allowing users to showcase their fitness journey, set a profile photo, and curate a list of favorite gyms for quick access. GymWhiz's Favorite Gyms feature ensures efficient management of preferred fitness spots. Engage with the fitness community by sharing experiences through Gym Reviews and Ratings, where GymWhiz calculates average ratings for informed decision-making. Stay on top of your fitness progress with the BMI Calculator, setting goals for a healthier lifestyle. GymWhiz also keeps users connected with the latest fitness trends and updates through Newsletter Subscription, delivering valuable insights directly to their inbox. The platform offers an interactive messaging system for responsive communication, along with a wealth of workout tips and weight loss advice. GymWhiz's responsive design ensures a seamless experience across computers and mobile phones, making it a comprehensive and user-friendly virtual fitness guide.
The GymPage component is a React-based feature that dynamically renders a list of gyms based on user preferences. It incorporates essential functionalities such as:
- Gym Listing: Display a list of gyms fetched from GymWhiz's database.
- Filtering: Allow users to filter gyms by city, category, and rating.
- Pagination: Implement pagination for a seamless browsing experience.
- Loading State: Provide visual feedback to users while gyms are being loaded.
The Filtering component complements the GymPage by providing an intuitive user interface for applying filters. Key features of the Filtering component include:
- City Filter: Enable users to filter gyms based on their location.
- Category Filter: Allow users to narrow down gyms by selecting specific fitness categories.
- Rating Filter: Implement a rating filter for users to find gyms based on their ratings.
- Reset Filters: Provide a convenient option to reset all applied filters.
The GymWhiz Search Bar component is a versatile and user-friendly feature designed to empower users in discovering gyms effortlessly. With its intuitive design and real-time filtering capabilities, this component provides a seamless search experience within the GymWhiz app.
- Dynamic Search: As users type, the search bar dynamically filters gyms based on the entered query, including gym names, categories, and cities.
- Interactive Results: The search results are presented in an interactive dropdown, allowing users to easily identify and select gyms of interest.
- Navigation Integration: Clicking on a search result seamlessly navigates users to the detailed page of the selected gym, enhancing the overall user journey.
- Automatic Clearing: The search bar intelligently clears its input and results when users click outside the search container, ensuring a tidy and distraction-free interface.
- Error Handling: In case of errors, such as gyms not being found, users receive clear error messages through toast notifications for a transparent user experience.
The GymWhiz Profile Page is a personalized and feature-rich hub where users can manage their account details, view and update personal information, and customize their profile photo. This page serves as a central destination for users to interact with their account settings, enhancing their overall experience within the GymWhiz fitness application.
- User Information: Display essential user details, such as name, email, and account creation date, providing a quick overview of the user's profile.
- Profile Photo Management: Allow users to upload, change, or delete their profile photo, enhancing personalization and identity within the GymWhiz community.
- Editable Profile Fields: Provide user-friendly input fields for updating personal information, including first name, last name, age, weight, and height.
- Password Update: Enable users to securely update their account password by entering a new password and confirming the change. Interactive Notifications: Implement real-time error handling and success notifications using toast messages, ensuring a transparent and user-friendly experience.
The GymWhiz Rating and Review System provide users with a dynamic platform to share and discover insights about fitness facilities. Users can express their opinions through personalized reviews, accompanied by a visually intuitive rating system. This system aims to foster community engagement, empower users in their fitness journey decision-making, and contribute to a vibrant fitness ecosystem.
Visual Representation The Rating component offers an elegant visual representation of user ratings using star icons. Each star reflects a portion of a rating, allowing users to express nuanced evaluations of gym experiences. The component utilizes icons such as outlined stars, filled stars, and half stars to convey varying levels of satisfaction.
Developers can easily integrate and customize the Rating component within GymWhiz, adapting its appearance and behavior to align with the application's design and user experience preferences.
User-Generated Content GymWhiz's Review System empowers users to share their firsthand experiences and insights about specific gyms. Reviews contain essential information such as user comments, ratings, and the reviewer's name, fostering transparency and authenticity.
Real-Time Interaction The system enables real-time interaction by displaying user-generated reviews for a particular gym. Users can read, appreciate, and contribute to a growing repository of valuable information, ultimately aiding others in making informed decisions about gym selections.
Submission Process Users can submit reviews effortlessly through a user-friendly form. The submission process includes providing a textual comment and assigning a rating on a scale from one to five. This streamlined process encourages active participation in the GymWhiz community.
![Image 1](https://live.staticflickr.com/65535/53430563791_d111b975c1_c.jpg")
The GymWhiz BMI Calculator is a user-friendly and efficient tool designed to help individuals assess their Body Mass Index (BMI) with ease. BMI is a widely used indicator of body fatness and provides valuable insights into one's weight status. GymWhiz's BMI Calculator simplifies the process, allowing users to make informed decisions about their health and fitness goals.
Effortless Calculation With GymWhiz's BMI Calculator, users can effortlessly input their weight and height, enabling the tool to perform accurate BMI calculations. The user-friendly interface ensures a seamless experience, making it accessible for individuals at any fitness level.
Real-Time Results Upon calculation, the BMI Calculator instantly provides users with their Body Mass Index, rounded to one decimal place. This real-time feedback allows users to gauge their current weight status promptly.
Weight Category Determination In addition to the BMI result, GymWhiz's BMI Calculator categorizes users into distinct weight categories. These categories, including "Underweight," "Normal Weight," "Overweight," and "Obese," offer a clear understanding of how an individual's BMI aligns with established health standards.
Experience a smooth and secure login process with GymWhiz. Our login feature ensures effortless access to your fitness journey. Simply enter your email and password, and GymWhiz will handle the rest. Receive personalized greetings upon successful login and stay connected to your fitness preferences.
Embark on your fitness journey with GymWhiz by creating a personalized account. Our signup feature offers an intuitive registration process, allowing you to set up your account with your first and last name, email, and a secure password. Seamlessly transition from signup to login, explore GymWhiz's extensive features, connect with the fitness community, and access valuable resources to enhance your fitness lifestyle.
Explore fitness spaces in intricate detail with GymWhiz's GymDetail Page. This feature-rich page offers a comprehensive overview of your selected gym, providing essential information such as location, contact details, pricing, and opening hours. Immerse yourself in the gym's ambiance with vivid images and stay informed about user reviews to make confident decisions. GymWhiz goes beyond static details by integrating interactive elements, allowing users to favorite gyms, share their experiences through reviews, and access real-time information. The GymDetail Page serves as a dynamic hub for fitness enthusiasts, offering an immersive and user-friendly experience to enhance your fitness journey.
Elevate the user experience on your GymWhiz application with the sophisticated and feature-rich Footer component. Seamlessly combining style and functionality, GymWhiz's Footer provides users with easy access to essential links, including Home, Gyms, Tips, and the captivating Our Story. Stay connected through prominent social media icons, and make a statement with the GymWhiz logo. The Footer doesn't just stop at navigation—it also offers users the convenience of reaching out with a dedicated contact form, ensuring efficient communication. Keep users informed with a neatly organized address section, complete with icons for location, mobile contact, and email. The Footer is not just a design element; it's a user-friendly interface that enhances the overall accessibility and aesthetic appeal of GymWhiz.
Discover a treasure trove of wellness insights and fitness guidance with GymWhiz's Tips page. Immerse yourself in a visually stunning and informative journey, supported by captivating images that set the tone for a healthier lifestyle. The Tips page is thoughtfully designed to offer a diverse range of articles, each crafted to provide valuable information on weight loss, effective workouts, nutritional guidance, and more. Engage with enlightening content such as "Understanding the Role of Nutrition in Your Weight Loss Journey" and "Effective Workouts for Burning Fat and Building Muscle," empowering users to make informed choices on their fitness journey. Explore topics like choosing the perfect gym buddy, supporting health in a hybrid workforce, and practical advice on what to take to the gym. GymWhiz's Tips page is a holistic resource, combining practical tips, expert advice, and visually appealing content to inspire and guide users toward their health and fitness goals.
- Gym Discovery: Explore a variety of gyms by filtering based on name, location, rating, and category. GymWhiz makes it easy for you to find the perfect fitness space tailored to your preferences.
- User Profiles: Sign up, create, and edit your user profile with ease. Showcase your fitness journey, set a profile photo, and keep track of your favorite gyms.
- Favorite Gyms: Save and manage your favorite gyms effortlessly. GymWhiz allows you to curate a list of go-to fitness spots for quick access.
- Gym Reviews and Ratings: Share your experiences by providing reviews and ratings for gyms. GymWhiz calculates an average rating, empowering users to make informed decisions.
- BMI Calculator: Stay informed about your fitness progress with the BMI calculator. Track changes and set goals for a healthier you.
- Newsletter Subscription: Stay connected with the latest fitness trends and GymWhiz updates by subscribing to our newsletter. Receive valuable insights and tips directly to your inbox.
- Interactive Messaging: Engage with GymWhiz through the footer section to send and receive messages. Whether you have inquiries or feedback, GymWhiz ensures a responsive and user-friendly communication channel.
- Workout Tips and Weight Loss Advice: Access a treasure trove of workout tips and weight loss advice. GymWhiz is your virtual fitness guide, offering valuable content to enhance your fitness journey.
- Responsive Design: GymWhiz is optimized for both computers and mobile phones, providing a seamless experience across various devices.
The project follows a structured directory hierarchy, with the main components organized as follows:
client/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ │ ├── Advertisement/
│ │ │ ├── Advertisement.css
│ │ │ └── Advertisement.jsx
│ │ ├── Bmi/
│ │ │ ├── Bmi.css
│ │ │ └── Bmi.jsx
│ │ ├── Favorite/
│ │ │ ├── Favorite.css
│ │ │ └── Favorite.jsx
│ │ ├── Footer/
│ │ │ ├── Footer.css
│ │ │ └── Footer.jsx
│ │ ├── GymCard/
│ │ │ ├── GymCard.css
│ │ │ └── GymCard.jsx
│ │ ├── GymList/
│ │ │ ├── GymList.css
│ │ │ └── GymList.jsx
│ │ ├── GymPageOverview/
│ │ │ ├── FilterSection.css
│ │ │ └── FilterSection.jsx
│ │ │ ├── GymNotFound.css
│ │ │ └── GymNotFound.jsx
│ │ ├── Header/
│ │ │ ├── Header.css
│ │ │ └── Header.jsx
│ │ ├── Loading/
│ │ │ ├── Loading.css
│ │ │ └── Loading.jsx
│ │ ├── Login/
│ │ │ ├── Login.css
│ │ │ └── Login.jsx
│ │ ├── Navbar/
│ │ │ ├── Navbar.css
│ │ │ └── Navbar.jsx
│ │ ├── OurStory/
│ │ │ ├── OurStory.css
│ │ │ └── OurStory.jsx
│ │ ├── Pagination/
│ │ │ ├── Pagination.css
│ │ │ └── Pagination.jsx
│ │ ├── Rating/
│ │ │ ├── Rating.css
│ │ │ └── Rating.jsx
│ │ ├── SearchBar/
│ │ │ ├── SearchBar.css
│ │ │ └── SearchBar.jsx
│ │ ├── Subscribe/
│ │ │ ├── Subscribe.css
│ │ │ └── Subscribe.jsx
│ │ ├── WhyGymWhiz/
│ │ │ ├── WhyGymWhiz.css
│ │ │ └── WhyGymWhiz.jsx
│ ├── context/
│ │ ├── AuthContext.js
│ │ └── GymContext.js
│ ├── hooks/
│ │ ├── fetchBmi.js
│ │ └── fetchEmailjs.js
│ │ └── useFetch.js
│ ├── Pages/
│ │ ├── FavoriteGyms/
│ │ │ ├── FavoriteGyms.css
│ │ │ └── FavoriteGyms.jsx
│ │ ├── Gym/
│ │ │ ├── GymDetails.css
│ │ │ └── GymDetails.jsx
│ │ ├── GymPage/
│ │ │ ├── GymPage.css
│ │ │ └── GymPage.jsx
│ │ ├── Home/
│ │ │ ├── Home.css
│ │ │ └── Home.jsx
│ │ ├── Profile/
│ │ │ ├── Profile.css
│ │ │ └── Profile.jsx
│ │ │ └── UserProfile.jsx
│ │ ├── Tips/
│ │ │ ├── Tips.css
│ │ │ └── Tips.jsx
│ │ ├── User/
│ │ │ ├── CreateUser/
│ │ │ │ ├── CreateUser.css
│ │ │ │ └── CreateUser.jsx
│ │ │ ├── UserList.jsx
│ │ ├── Utils/
│ │ │ ├── inputsValidation.js
│ ├── App.jsx
│ ├── AppWrapper.js
│ ├── index.js
│ ├── .env
│ ├── .eslintrc.cjs
│ ├── .gitignore
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── server/
│ │ ├── src/
│ │ │ ├── controllers/
│ │ │ │ ├── gym.js
│ │ │ │ ├── review.js
│ │ │ │ └── user.js
│ │ ├── db/
│ │ │ ├── connectDB.js
│ │ │ ├── models/
│ │ │ │ ├── Gym.js
│ │ │ │ ├── Review.js
│ │ │ │ └── User.js
│ │ │ ├── routes/
│ │ │ │ ├── gym.js
│ │ │ │ ├── review.js
│ │ │ │ └── user.js
│ │ │ ├── utils/
│ │ │ │ ├── validateAllowedFields.js
│ │ │ │ └──validationErrorMessage.js
│ │ │ ├── app.js
│ │ │ ├── index.js
│ │ ├── .env
│ │ ├── .eslintrc.cjs
│ │ └── package-lock.json
│ │ ├── package.json
│ │ ├── README.md
│ └── package-lock.json
│ ├── package.json
│ ├── README.md
│
- Clone the repository:
git clone https://github.com/PayamAnari/gym-whiz - Navigate to the project folder:
cd gym-whiz - Install dependencies:
npm install - Start the Vite development server:
npm run dev
- React (frontend)
- MongoDB (database)
- Nodejs (Backend JavaScript runtime)
- Express (Web application framework for Node.js)
- Toast notifications (notifications)
- Css (styling)
- Email.js (email services)
Contributions to the Fitness App are highly encouraged! If you'd like to contribute, please follow these steps:
Fork this repository to your GitHub account.
Create a new branch for your feature or bug fix.
Implement your changes or additions.
Commit your changes and push them to your forked repository.
Create a pull request to the original repository, explaining your changes and their significance.
This project is licensed under the MIT License.
Thank you for exploring the Gym Fitness app! If you have any questions, feedback, or just want to say hi, feel free to reach out. Happy fitness journey!