Our company focused on a Gym or Fitness website (single Page category website) using React, Redux, Firebase, react-router, node, express, MongoDB, etc.
-
Website ideas are unique like the Themeforest website theme.
-
The home page has a header (simple navbar), Carousel, Classes, Schedule, About us, Contact, and footer.
-
On the home page, various parts. In training Class section have a relevant name, image, short description If a user clicks on the classes it will take the user to the Details page.
-
The training services or classes page will be a private/protected route. If the user is not logged in, the private route redirects to the login page. After login, the user will be redirected to the page he/she wanted to go to. Also, make sure, after reloading the page of a private route, the user is not redirected to the login page.
-
We will have another page on the top navigation bar (header) mentioning Discover more. Clicking on the link or button will take the user to the all training classes page. On this page, users will see all the classes. That means the user will see all training services. Each item will have a name, description, image, and button. Once a user clicks on this button, it will take the user to the purchase course page.
-
Implement email/ password (login/Register) based login system. The registration form should have the name and once a user is logged in, the user name and the logout button should appear on the user menu in the dropdown which will log out the user once clicked. Displaying images on the header.
-
If a user is logged in, he/she will unlock the private pages and inside that, a normal user without an account system will go to the login page.
-
Use a database to store information. It could be the MongoDB atlas database.
-
Meaningful readme.md file both on client-side and server-side. containing our website name, a little description, link to our live site. And at least five bullet points mentioning the different features and functionality of our website.
-
We Make the website responsive. We Make sure the site looks different on desktop and mobile responsive.
-
Make the website meaningful and consistent in look and feel. Give our website a relevant name Fitness Cloud. Images and all the content of the website have to be relevant.
-
Clean and organized Code. Organize components and add comments when needed
-
Used Redux For storing state and manage state.
-
use the .env file on the server, .env.local file on the client to hide DB user and password, etc. Also, use the .gitignore file
-
We Make the footer a little more realistic Replace the default react favicon and give an icon for our website. Use icons whenever applicable and use fonts (google fonts)
- We can use a local image
- Make carousel we use SwiperJS Package.
- Use MaterialUI. And When needed we used mixed CSS.
- We use react hook form, basic MaterialUI form
- Used Firebase for authentication
- We host our site on Firebase.
- We host a server on Heroku.