Lionfit is more than just a website; it's a passion project meticulously developed to address the unique needs of gym enthusiasts and fitness aficionados. Crafted with unwavering commitment, Lionfit.com stands as a testament to the profound dedication to health and wellness.
more about website
· Report Bug · Request Feature
- About the Project
- Getting Started
- Features and Functionality
- Concept Process
- Development Process
- Final Outcome
- Conclusion
- License
- Contact
- Acknowledgements
Lionfit is the embodiment of a vision to facilitate and elevate the fitness journeys of individuals worldwide. Developed with passion, expertise, and a commitment to excellence, our website is your trusted companion on the path to a healthier, fitter, and more empowered you. Welcome to Lionfit.com, where fitness meets its true potential.
- React
- [Cards]
- [Mongodb]
- [Insomnia]
- [JavaScript]
- [Bootstrap]
The following instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Ensure that you have the latest version of NPM installed on your machine. The GitHub Desktop program will also be required.
Here are a couple of ways to clone this repo:
-
GitHub Desktop
Enter"https://github.com/CSWilder02/lionfit---2023---Term-3.git"into the URL field and press theClonebutton. -
Clone Repository
Run the following in the command-line to clone the project:"https://github.com/CSWilder02/lionfit---2023---Term-3.git"Open
Softwareand selectFile | Open...from the menu. Select cloned directory and pressOpenbutton -
Install Dependencies
Run the following in the command-line to install all the required dependencies in Server:cd lionfitcd ./Servernpm install bcrypt cors dotenv express joi joi-password-complexity jsonwebtoken mongoose nodemon
npm run dev
Run the following in the command-line to install all the required dependencies in User Side:
npm i
cd lionfitnpm start
-
An API key is not required
The CRUD functionality allows the admin to add products to their mongo database by using CRUD - Create, Read, Update & Delete
CREATE:
READ:
UPDATE:
DELETE:
The Admin page is where the admin users can add their product aswell as see the orders of the clients that has purchased their products and also remove products that they has send out, to keep track of all their products sold
The Conceptual Process is the set of actions, activities and research that was done when starting this project.
Through looking at other gym aquipment I have seen that I wanted to make something different. I wanted to go with a 3D card style and dark gym theme.
Using bootstarp aswell as react coding, I created a dark custom UI design that will suit the idea behind a dark gym theme, which allows users to look at the products of the website.
 1.png)
The Development Process is ....
- Setup:
We began by setting up our development environment, installing Node.js, npm, and MongoDB. A project directory was created, and we initialized a new React application using Create React App.
- Frontend Development (React and Bootstrap):
The website's user interface (UI) was designed using Bootstrap for a responsive and visually appealing layout. React components were built for various parts of the website, including product listings, user registration, and product management. Bootstrap components were used for styling, ensuring a consistent and professional look. React Router was implemented for seamless navigation between pages. User registration and login forms were developed for a user-friendly experience. State management was handled using MongoDB.
- Backend Development (Node.js/Express.js):
We established a Node.js server with Express.js to serve as the backend for LionFit. MongoDB was chosen as the database for storing product information and user data. API endpoints were created to manage user registration, login, and CRUD operations for products. Mongoose or a MongoDB driver was used to interact with the database.
- User Authentication (JWT):
The website implemented user authentication using JWT for secure user login and session management. JWT tokens were generated upon successful registration or login and sent to the client. Middleware was used to protect routes requiring authentication, ensuring user data security.
- CRUD Functionality:
API routes and controllers were designed for CRUD operations on products (adding, viewing, editing, deleting). Robust validation and error handling were implemented to enhance user experience and data accuracy.
- Testing:
Comprehensive testing was conducted for both frontend and backend components, utilizing Jest, React Testing Library, and Mocha/Chai for backend testing. Various use cases, including authentication and product management, were thoroughly tested.
- Deployment:
The website was deployed to a chosen hosting platform (e.g., Heroku, AWS, Netlify) to make it accessible to users. Sensitive information like database connection strings and JWT secrets were secured using environment variables. CORS configuration ensured smooth communication between frontend and backend on different domains.
- Utilized React
Charts.JSdependency for Data visualization - Implemented Routing with
React-Router v6.
- Being able to create a visually appealing design
- Getting a 3D card working with a full rotation
- Learning more about how a server side connect to the visuals and not that visuals are everything, but knowing and seeing that if a visaully appealing design works that you have made a successful webpage.
- Getting the front end not to crash with the backend server when changing the visuals
- Allowing that a product is saved and transfferend to other pages of the webpage.
- In future I would like to focus more on implementing a bit more of ui design that is more flowing and also focusing on fixing my backend mistakes.
To see a run through of the application, click below:
- CS Strijdom - [CS Strijdom](https://github.com/CSWilder02/Final-Lionfit.git)
Distributed under the MIT License. See LICENSE for more information.\
- YourName - [email protected]
- Project Link - (https://github.com/CSWilder02/Final-Lionfit.git)