├── .env ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── assets ├── icons │ ├── body-part.png │ ├── equipment.png │ ├── gym.png │ ├── left-arrow.png │ ├── right-arrow.png │ └── target.png └── images │ ├── Logo-1.png │ ├── Logo.png │ └── banner.png ├── components ├── BodyPart.js ├── Detail.js ├── ExerciseCard.js ├── ExerciseVideos.js ├── Exercises.js ├── Footer.js ├── HeroBanner.js ├── HorizontalScrollbar.js ├── Loader.js ├── Navbar.js ├── SearchExercises.js └── SimilarExercises.js ├── index.js ├── pages ├── ExerciseDetail.js └── Home.js └── utils └── fetchData.js /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_RAPID_API_KEY=ccfcae50dcmsh5a50faecda0a98ep1de6ccjsn8465450cdbc7 2 | ESLINT_NO_DEV_ERRORS=true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | 17 | # local env files 18 | .env 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | React Exercise Application -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gym_exercises", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@emotion/react": "^11.9.0", 7 | "@emotion/styled": "^11.8.1", 8 | "@mui/icons-material": "^5.6.1", 9 | "@mui/material": "^5.6.1", 10 | "react": "^18.0.0", 11 | "react-dom": "^18.0.0", 12 | "react-horizontal-scrolling-menu": "^2.7.1", 13 | "react-loader-spinner": "^6.0.0-0", 14 | "react-router-dom": "^6.3.0", 15 | "react-scripts": "5.0.1" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emredkyc/exercise_app/655858d4065378417777e37d780b42809d0cdfa3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emredkyc/exercise_app/655858d4065378417777e37d780b42809d0cdfa3/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emredkyc/exercise_app/655858d4065378417777e37d780b42809d0cdfa3/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Josefin Sans'; 3 | background-color: #FFFAFB; 4 | } 5 | 6 | * { 7 | padding: 0px; 8 | margin: 0px; 9 | box-sizing: border-box; 10 | 11 | } 12 | 13 | ::-webkit-scrollbar { 14 | width: 0px; 15 | } 16 | 17 | .right-arrow, 18 | .left-arrow { 19 | cursor: pointer; 20 | background: transparent; 21 | outline: none; 22 | border: none; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | color: #FF2625; 27 | font-size: 25px; 28 | border-radius: 4px; 29 | position: absolute; 30 | bottom: -20px; 31 | right: 80px; 32 | transform: scale(1, 1); 33 | transition: 0.3s all ease-in-out; 34 | } 35 | 36 | .right-arrow { 37 | right: 140px; 38 | } 39 | 40 | .right-arrow:hover, 41 | .left-arrow:hover { 42 | transform: scale(1.3, 1.3); 43 | } 44 | 45 | .react-horizontal-scrolling-menu--wrapper { 46 | width: 100%; 47 | display: flex; 48 | flex-wrap: wrap; 49 | } 50 | 51 | .detail-image { 52 | width: 729px; 53 | height: 742px; 54 | } 55 | 56 | .hero-banner-img { 57 | position: absolute; 58 | right: 40px; 59 | top: 0px; 60 | width: 700px; 61 | height: 900px; 62 | margin-top: -330px; 63 | 64 | } 65 | 66 | .exercise-card { 67 | width: 400px; 68 | height: 445px; 69 | background: #fff; 70 | border-top: 4px solid #FF2625; 71 | border-bottom-left-radius: 20px; 72 | text-decoration: none; 73 | display: flex; 74 | justify-content: space-between; 75 | flex-direction: column; 76 | padding-bottom: 10px; 77 | transform: scale(1, 1); 78 | transition: 0.3s all ease-in-out; 79 | } 80 | 81 | .exercise-card img { 82 | height: 326px; 83 | } 84 | 85 | .bodyPart-card { 86 | transform: scale(1, 1); 87 | transition: 0.3s all ease-in-out; 88 | } 89 | 90 | .exercise-card:hover, 91 | .bodyPart-card:hover { 92 | transform: scale(1.1, 1.1); 93 | } 94 | 95 | .search-btn:hover { 96 | color: #FF2625 !important; 97 | border: 1px solid #FF2625 !important; 98 | } 99 | 100 | .exercise-video { 101 | display: flex; 102 | flex-direction: column; 103 | gap: 24px; 104 | width: 387px; 105 | height: 381px; 106 | text-decoration: none; 107 | } 108 | 109 | @media screen and (max-width:1200px) { 110 | .detail-image { 111 | width: 300px; 112 | height: 300px; 113 | } 114 | 115 | 116 | .react-horizontal-scrolling-menu--scroll-container { 117 | width: 500px; 118 | } 119 | 120 | .left-arrow, 121 | .right-arrow { 122 | position: static !important; 123 | } 124 | 125 | .hero-banner-img { 126 | display: none; 127 | } 128 | 129 | .exercise-card { 130 | width: 320px; 131 | } 132 | 133 | .exercise-video { 134 | width: 320px; 135 | height: 300px; 136 | } 137 | 138 | } 139 | 140 | @media screen and (max-width:400px) { 141 | .exercise-card { 142 | width: 280px; 143 | } 144 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Routes } from 'react-router-dom'; 3 | import { Box } from '@mui/material'; 4 | 5 | import './App.css'; 6 | import ExerciseDetail from './pages/ExerciseDetail'; 7 | import Home from './pages/Home'; 8 | import Navbar from './components/Navbar'; 9 | import Footer from './components/Footer'; 10 | 11 | const App = () => ( 12 | 13 | 14 | 15 | } /> 16 | } /> 17 | 18 |