1.project setup

 create react project:

insdie gym folder ,do:

>> npx create-react-app gym

install all dependencies to be used:

To install all the dependencies used in this project ,run:

> > npm i react-horizontal-scrolling-menu react-loader-spinner react-router-dom @mui/icons-material @mui/material @emotion/react @emotion/styled

or you can download my package.json and run:

> > npm install

But if run in any trouble,use:

> > npm install --legacy-peer-depps

This would install all dependencies of exact same version as in my package.json

now download and put assets folder(icons and images) to src folder.

add css to app.css folder .It has basic classes to be used in project's elements.

Comments

Post a Comment

Popular posts from this blog

6 .Fetch Data

 .To fetch data for rapid api, we will use api provided by exercisedb of rapid api. so search exercisedb in rapid api, click on test endpoints , login , subscribe freee version(500 request per month allowed), then click subscribe. Then you will see something like this:(instruction to use it): const axios = require ( "axios" ) ; const options = { method : 'GET' , url : 'https://exercisedb.p.rapidapi.com/exercises/bodyPartList' , headers : { 'X-RapidAPI-Key' : 'API_KEY' , 'X-RapidAPI-Host' : 'exercisedb.p.rapidapi.com' } } ; axios . request ( options ) . then ( function ( response ) { console . log ( response . data ) ; } ) . catch ( function ( error ) { console . error ( error ) ; } ) ; Here i removed my api key for security reason.USe your api key instead of API_KEY. (Dont forget to restart react app if u used .env file to store the api key) Now we will use fetch() to fetch the dat...
Read more

5. Create SearchExercise Section

 ....Here is how you make UI.Later we will fetch data for this section. import React , { useState , useEffect } from "react" ; import { Box , Typography , Stack , TextField , Button } from "@mui/material" ; const SearchExercises = () => {   return (     < Stack justifyContent = "center" alignItems = "center" mt = "37px" p = "20px" >       < Typography         fontWeight = { 700 }         sx = { { fontSize : { lg : "44px" , xs : "30px" } } }         mb = "50px"         textAlign = "center"       >         Awesome Exercises You < br />         Should Know       </ Typography >       < Box position = "relative" mb = "72px" >         < TextField           sx = { {         ...
Read more

8.bodypart card / category

. import React from "react" ; import { Stack , Typography } from "@mui/material" ; import Icon from "../../assets/icons/gym.png" ; const BodyPart = ({ item , bodyPart , setBodyPart }) => {   return (     < Stack       type = "button"       alignItems = "center"       justifyContent = "center"       spacing = { 4.7 }       className = "bodyPart-card"       sx = { {         borderTop : bodyPart === item ? "4px solid #ff2625" : "" ,         backgroundColor : "#fff" ,         borderBottomLeftRadius : "20px" ,         width : "270px" ,         height : "280px" ,         cursor : "pointer" ,         boxShadow : "0 0 25px rgba(0,0,0,0.2)" ,       } }       onClick = { () => {     ...
Read more