GymBro

Installations and Setup

1. Development Environment:

   • Installed VS Code as the code editor.

   • Installed Node.js (v22.12.0) for backend development.

2. VS Code Extensions:

   • Added the ES7+ React/Redux/GraphQL/React-Native snippets extension, which provides boilerplate code snippets for React and related technologies. This will significantly speed up development.

References for Setup:

• VS Code Installation and Overview: https://youtu.be/cu_ykIfBprI?feature=shared

• Node.js Installation Guide: https://youtu.be/06X51c6WHsQ?feature=shared

---

Basic Project Plan

1. Backend:

   • Set up Express.js for server-side development.

   • Structure the backend with folders for routes, controllers, models, and config.

2. Frontend:

   • Create a React app for the user interface.

   • Organize the project with directories like components, pages, and styles.

3. Core Features:

   • User registration and login.

   • Fitness activity tracking.

   • Dashboard with user progress and analytics.

Frontend Folder: gymbro

Created a dedicated folder named gymbro to house the frontend of the GymBro project. The frontend will be developed using React.js, a powerful library for building interactive user interfaces.

Steps Completed:

1. Initialized React Application:

   • Ran the following command in the terminal to set up the React app:

       npx create-next-app@latest
     

   • Verified the installation by running the development server

2. React Features Incorporated:

   • Leveraged ES7+ React/Redux/GraphQL/React-Native snippets for faster boilerplate code generation.

   • Explored React's component-based architecture, which will be key to building reusable UI components for the project.

3. Folder Structure for Frontend:

   • Planned the following structure for better organization:

       graphqlCopyEditgymbro/
       ├── src/
       │   ├── components/     # Reusable UI components
       │   ├── pages/          # Page-level components (e.g., Home, Dashboard)
       │   ├── styles/         # CSS or SCSS files for styling
       │   ├── App.js          # Main React component
       │   └── index.js        # Entry point of the app
     

References for React:

• Official React Documentation: https://react.dev/learn/start-a-new-react-project

---

Next Steps:

• Create a basic homepage with navigation.

• Integrate a layout for user registration and login pages.

• Explore React Router for navigation between pages.

For Backend as gymbro_backend folder

Package.json file is achieved and for now index.js file is created for future use.

local host :

Libraries Installed

The following libraries were added to enhance the frontend functionality and styling:

1. React-Toastify: For displaying elegant toast notifications.

   • Installed with:

       npm install --save react-toastify
     

   • Reference: React-Toastify Documentation

2. Swiper: For implementing interactive sliders and carousels.

   • Installed with:

       npm i swiper
     

   • Reference: Swiper Documentation

3. Material-UI (MUI): For prebuilt, customizable UI components.

   • Installed with:

       npm install @mui/material @emotion/react @emotion/styled
     

   • Reference: Material-UI Documentation

4. Fontsource Roboto: For consistent typography using the Roboto font.

   • Installed with:

       npm install @fontsource/roboto
     

5. React-Icons: For integrating popular icons in the UI.

   • Installed with:

       npm i react-icons
     

---

Project Structure and Component Setup

1. Folder Structure in src/app:

   • components/: Contains reusable UI components.

     • Navbar/:

       • Navbar.tsx: Functional component for the navigation bar.

       • Navbar.css: Styling for the navigation bar.

     • Homebanner1/:

       • Homebanner1.tsx: Component for the first home banner section.

       • Homebanner1.css: Styling for the first home banner.

     • Homebanner2/:

       • Homebanner2.tsx: Component for the second home banner section.

       • Homebanner2.css: Styling for the second home banner.

2. assets/ Folder:

   • Dedicated folder to store media files like images, videos, and icons for easy access and organization.

Navbar:

With Day 1 complete, the GymBro project is well on its way. The development environment has been set up with Node.js for the backend and VS Code as the code editor. Key extensions have been installed to streamline React development. The folder structure is organized, with separate directories for the frontend (gymbro) and backend (gymbro_backend).

On the frontend, essential libraries like React-Toastify, Swiper, and Material-UI have been integrated, and components such as the Navbar and Home banners are set up. The backend has been initialized with Express.js, and the necessary files are in place for future development.

With this foundation in place, the project is ready to move forward, focusing on implementing core features and further development. Stay tuned for more updates! 🚀