Code Monkey home page Code Monkey logo

gymkhana's Introduction

#Structure Consists of two folder client and server client for frontend and server for backend

How to start

  • 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

Fronted(Client)

It consists of:

  • 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
  • main.jsx

    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.

    Backend(Server)

    It consists of

  • 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
  • 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.

    Seceret route

    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

    gymkhana's People

    Contributors

    whiteknight16 avatar

    Watchers

     avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.