#Structure
Consists of two folder client and server client for frontend and server for backend
- To start the frontend cd into client directory and enter the command `npm run dev
- To start the backend cd into server directory and enter the command `npm run dev`
- Usually you have to configure .env file but here giving it for easy testing
- For the first time you also need to go to client and server folder and run `npm i` to install npm modules
node_modules folder: This contain all the library being used in program and appears after running npm install
public folder: This contains some of the images that are being used in the program
src folder: This contains the major chunk of program with subfolders it is talked about in further reading
.env file: Contains the enviorenment variables
.eslintrc.cjs file: esLint configuration file
.gitignore file
index.html file: The only html file in program required for React
package-lock.json
package.json
vite.config.js: Configuration file for vite
##Details of src folder
components folder:It contains various components used in program the detail for each component is listed with it
conf folder: It contains conf.js and is used to access env variables
pages folder: It is used to finally load each page
main.jsx: It is the head jsx file
###Various Components:
AddComponent:This is used to add the blog
BlogCard:Used to render blogs in discover section
BlogCardLoged:Blog card when user is logged in provides with options like edit,delete etc...
Card:Used to render exercise challenge card at training page
CustomExerciseComponent:Display custom exercises
CustomRoutine:Component to add new custom exercise
DetailBlogContent:USed to render blog details
EditBlog:Used to render edit blog form page
ExerciseCard:Loads the exercise like abs begineer, abs intermediate etc... in training page
ExerciseComponent:Used to display correct exercise when a exercise type is elected
ExerciseEle:Used to load exercise Element
Footer:Used for footer component
Graph:Used for graph component of report page
Header:Used to render header
LoginComponent:Use to render the login component
RegisterComponent:For registration form
StartAndEndExercise:Starts and Ends the timer
Stats:Used to display various stats
###Various Pages
Add
Custom
CustomExercises
DetailBlog
Discover
Edit
Exercise
Login
Register
Report
Training
This code is part of a React application that uses a router to define the application's routes.
It imports several components, each representing a different page in the application.
It uses the createBrowserRouter function to create a router.
Inside the router, it uses the createRoutesFromElements function to create routes from a list of Route components.
Each Route component has a path prop that specifies the URL path for the route, and an element prop that specifies the component to render when the route is matched.
For example, when the URL path is '/absbeginner', the Exercise component is rendered. When the URL path is '/auth/login', the Login component is rendered, and so on.
node_modules: This contain all the library being used in program and appears after running npm install
controller: This contain several js files which contain several functions giving functionality to APIs.More detail in folder itself
db: Have connect.js file which is used to connect db
models: Contains schema of various models
routes: Contain various routes
.env: Contains the environment variables
package-lock.json
package.json
server.js
This JavaScript code sets up an Express.js server and connects it to a MongoDB database.
It imports several modules, including Express, CORS, and routes for exercise lists, login, and blogs.
It creates an Express app and sets the port to 3000.
It uses CORS middleware to enable Cross-Origin Resource Sharing and express.json() middleware to parse JSON request bodies.
It sets up routes for exercise lists, login, and blogs under "/api/v1/exerciselist", "/api/v1/auth", and "/api/v1/blog" respectively.
It defines an asynchronous function start that connects to the MongoDB database using the connection string from the environment variables and starts the server.
It then calls the start function to start the server. If there's an error during the database connection or server startup, it logs the error to the console.
There is a route /auth/login which gives you extra features for discover section like performing crud operations
You can check out all the routes in main.jsx file