BuildHub

Introduction

BuildHub is a revolutionary online platform designed to inspire and guide you on your fitness journey. Much like Cult Fit, we believe that fitness is not just a destination, but a way of life. Whether you're a seasoned gym enthusiast or just starting out, BuildHub is here to empower you to achieve your fitness goals from the comfort of your own home.

Project Type

The project is mainly a front-end project with added dynamic capabilities using a mock API created by json-server. It has primarily been built using HTML, CSS, JavaScript and React as a framework.

Deployed App

Both the front-end and the mock server have been deployed using render.com. The deployed links can be accessed below.

*Frontend: [https://rctapp-dien.vercel.app/] *Backend: [https://backend-3-yhcs.onrender.com/]

Objective

This project was created to put into practice the coding and problem-solving skills learned at Masai School and to collaborate to create a fully functioning website. The project was created during Construct Week here at Masai, completed in just 5 days, and served as a collaborative tool to explore, learn, and grow.

Drectory Structure

BuildHub/ ├── public/ ├── src/ │ ├── components | ├── Css | ├── Fitnes-images | ├── Pages

Video Walkthrough of the Project

• A YouTube video explaining the entire project and showcasing the features and functionalities can be accessed here: [https://www.youtube.com/watch?v=-A6flR29CE8]

  Video Walkthrough of the CodeBase

• A walkthrough of the codebase and the folder structure can be accessed here on YouTube: [https://www.youtube.com/watch?v=fXjw17Br27w]

  Installation and Getting Started

• After downloading the project, follow these steps to get the project up and running :

  • ude cd BuildHub to re directed to the project folder
  • ude npm install to instal node-modules to run the project server.
  • use npm run dev to start thye server and open in web browser.

• Admin Dashboard and related functionalities can only be accessed using the admin credentials. Currently, there is no way to access these elements without using the login credentials provided.

Features

● Video tutorials on various subjects ● Interactive exercises for practice ● User progress tracking ● Search functionality for finding specific Test ● Responsive design for seamless user experience across devices

Usage

• Regular Functionalities:
  1. Get started on the landing page where you can see the Navbar with logo and login.

2. When Scroll Down on Care and Mind Page there are some Cards Which are dynamically visible from the Backend.

   care page:

Mind Page:

3.For Each and every page the footer is present:

4.By clicking on the Login icon it will redirected to Login page

5. Fitnes page contain the data about the fitne dite and information, about gym information and planes as well

6. we can find the information of healty food for our fitnes in transform page

7. In Admin DashBoard you can find the products on sidebar clicking on that it will take you to the Data From where the Admin can add and edit the Data and Delete the Data , Page Contain the Pagination as well

Technology Stack

• HTML
• CSS
• JavaScript
• React Library