Project Summary: Fitness Pro Gym

Fitness Pro Gym is a comprehensive web application that showcases the developer's proficiency in various aspects of web development. Designed for the local fitness community in Sofia, Bulgaria, the project seamlessly integrates frontend, backend, design, and database technologies to offer a feature-rich experience.

Key Features

1. Gym Overview: Users can explore the facilities and offerings of Fitness Pro Gym, gaining insights into the services provided.

2. E-commerce Functionality: The platform enables users to make purchases, including supplements, fitness machines, merchandise, and memberships, enhancing user convenience.

3. User Highlights: Similar to social media posts, users can create and share highlights, fostering a sense of community within the fitness space.

4. User Profiles: Each user has a dedicated profile page where they can track their orders, check the validity of their membership card, and review their posted highlights.

Technology Stack

The project is built using the MERN stack—MongoDB for the Database, Express for the Backend, React for the Frontend, and Node.js for Server-side scripting. This modern and robust technology stack ensures a scalable and efficient web application.

Target Audience

The primary audience includes members of the SoftUni community, potential future employers, and individuals interested in Fitness Pro Gym. By catering to these diverse user groups, the project aims to showcase not only the technical skills of the developer but also the practical application of these skills in a real-world context.

Challenges

Throughout development, challenges were met and overcome, reflecting the developer's ability to navigate complexities in both frontend and backend domains. The result is a cohesive and functional platform that successfully integrates various features to meet the needs of its users.

Fitness Pro Gym stands as a testament to the developer's dedication to mastering the full spectrum of web development, offering a comprehensive solution for the local fitness community while impressing potential stakeholders and employers.

Pro Gym Documentation

Application Flow

When the user opens the app he is redirected to the home page.

Home View

Guest Header with the Greeting Section in the Home view.

Gym Premises Header with the first room in the Home view.

Reviews from Customers Section in the Home view.

Footer

Login View

Login header with two input fields - email and password, login button and link to the Register Page.

One of the possible error messages - incorrect password.

Register View

Register header with four input fields - email, username, password and repeat password, register button and link to the Login Page.

Logged in User

Updated header after successful Login/Register with default Profile Picture and non-Administrator Dropdown Menu.

Logout Popup

Logout Popup, asking to confirm if you really want to Logout.

Post Highlight View

A page, accessible to all Logged in Users, allowing them to make a post similar to other Social Networks.

Highlights View

Highlights Gallery, similar to other Social medias Feeds, accessible by all users - logged in or not.

Highlight Description View

Highlight Details page, accessible by everyone. The creator and the administrator have access to the edit and delete options, and the others logged in users can Like the selected Highlight.

Edit Highlight View

Highlight Edit view loaded with the current state of the data, waiting to be updated.

Delete Highlight Popup

A popup asking the Creator or the Administrator if they really want to proceed with the Deletion Process.

Post Product View

Create Product view, accessible only by the Administrator.

Products View

Products view, accessible by anyone, all products selected by default. Logged in users can add products to their carts.

Products View Filtered

Products view, filtered only the Fitness Machines products by the Filter container.

Product Description View

Product Details View, showing all of the Product's info, allowing logged in users to add the product to the cart and the administrator to edit and delete it.

Edit Product View

Product Edit view loaded with the current state of the data, waiting to be updated.

Delete Product Popup

A popup asking the Administrator if he really wants to proceed with the Deletion Process.

Memberships View

Memberships view, accessible by anyone. Logged in users can add a certain membership to their cart.

Post Trainer View

Create Trainer view, accessible only by the Administrator.

Trainers View

Trainers Gallery View, accessible by every user - logged in or not.

Checkout View

Checkout view, showing all of the selected Products, allowing the user to decide the quantity and after filling out the shipping details to finish the order.

Successful Order View

Successful order view, showing the User that his order has been finished and confirmed.

Successful Order Email

Successful order Email, sent to the User and to the Administrator with the Order details, Address details and Products details.

My Profile View

My Profile view with the Profile picture of the user, that on click can be changed with another, generated QR code that on scan and on hover shows whether the Gym membership is valid or not.

My Profile Orders

A history of the User's orders.

My Profile my highlights

The highlights of the current User.

Order Details View

Order Details view showing the spefiics of the selected order.

Error View

Error view, in case of some error in invalid URL path the user is forwarded to this Page.