├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── index.html └── manifest.json ├── src ├── views │ ├── burn.jpg │ ├── health.jpg │ ├── MBBlogo.jpg │ ├── healthy.jpg │ ├── homeIcon.jpg │ ├── workout.jpg │ ├── nutrition.jpg │ └── profilepage.jpg ├── context │ └── UserContext.js ├── setupTests.js ├── App.test.js ├── index.css ├── reportWebVitals.js ├── utils │ └── calculator.js ├── index.js ├── App.css ├── styles.css ├── services │ └── caloriesAPI.js ├── pages │ ├── AboutPage.js │ ├── ProfilePage.js │ ├── HomePage.js │ ├── WorkoutsPage.js │ ├── SignupPage.js │ └── NutritionPage.js ├── App.js ├── logo.svg └── components │ └── Nav.js ├── .gitignore ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/views/burn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/burn.jpg -------------------------------------------------------------------------------- /src/views/health.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/health.jpg -------------------------------------------------------------------------------- /src/views/MBBlogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/MBBlogo.jpg -------------------------------------------------------------------------------- /src/views/healthy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/healthy.jpg -------------------------------------------------------------------------------- /src/views/homeIcon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/homeIcon.jpg -------------------------------------------------------------------------------- /src/views/workout.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/workout.jpg -------------------------------------------------------------------------------- /src/views/nutrition.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/nutrition.jpg -------------------------------------------------------------------------------- /src/views/profilepage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jabeensk/fitnessTracker_Frontend/HEAD/src/views/profilepage.jpg -------------------------------------------------------------------------------- /src/context/UserContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const UserContext = createContext(null); 4 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | My Burn Budy 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.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 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/utils/calculator.js: -------------------------------------------------------------------------------- 1 | const activityData = { 2 | walking: 176, 3 | cycling: 422, 4 | running: 704, 5 | swimming: 563 6 | }; 7 | 8 | // Function to calculate calories burned 9 | export function calculateCalories(activity, duration) { 10 | const rate = activityData[activity.toLowerCase()]; 11 | if (!rate) { 12 | return 0; 13 | } 14 | const caloriesBurned = rate * (duration / 60); 15 | return caloriesBurned; 16 | } 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: navy; 3 | color: white; 4 | display: flex; 5 | justify-content: center; 6 | align-items: flex-start; 7 | height: 100vh; 8 | margin: 0; 9 | } 10 | body { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | 16 | margin: 0; 17 | } 18 | 19 | .container { 20 | text-align: center; 21 | max-width: 600px; 22 | } 23 | 24 | .form-container { 25 | margin-top: 20px; 26 | } 27 | 28 | .navbar .logo { 29 | border-radius: 90%; 30 | width: 90px; 31 | height: 90px; 32 | margin-left: 10px; 33 | } 34 | 35 | .custom-button { 36 | background-color: #1e90ff; 37 | color: white; 38 | border: none; 39 | border-radius: 20px; 40 | padding: 10px 20px; 41 | font-size: 16px; 42 | cursor: pointer; 43 | } 44 | 45 | .custom-button:hover { 46 | background-color: #0056b3; 47 | } 48 | 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "1.0.0", 4 | "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "react-scripts start", 8 | "build": "react-scripts build", 9 | "test": "react-scripts test", 10 | "eject": "react-scripts eject" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@testing-library/jest-dom": "^5.17.0", 17 | "@testing-library/react": "^13.4.0", 18 | "@testing-library/user-event": "^13.5.0", 19 | "axios": "^1.6.7", 20 | "bootstrap": "^5.3.2", 21 | "react": "^18.2.0", 22 | "react-bootstrap": "^2.10.1", 23 | "react-dom": "^18.2.0", 24 | "react-router-dom": "^6.22.0", 25 | "react-scripts": "^5.0.1", 26 | "web-vitals": "^2.1.4" 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/services/caloriesAPI.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const BASE_URL = 'https://api.api-ninjas.com/v1'; 4 | const API_KEY = 'IFepALMXysh4nTzEMdeJ6A==sSNMhEgl33NHDJPa'; 5 | // Function to get the full list of activities supported by the API 6 | export const getActivities = async () => { 7 | try { 8 | const response = await axios.get(`${BASE_URL}/caloriesburnedactivities`, { 9 | headers: { 'X-Api-Key': API_KEY } 10 | }); 11 | return response.data; 12 | } catch (error) { 13 | console.error('Error fetching activities:', error); 14 | return null; 15 | } 16 | }; 17 | 18 | // Function to calculate calories burned for given activity, weight, and duration 19 | export const calculateCaloriesBurned = async (activity, weight = 160, duration = 60) => { 20 | try { 21 | const response = await axios.get(`${BASE_URL}/caloriesburned`, { 22 | params: { activity, weight, duration }, 23 | headers: { 'X-Api-Key': API_KEY } 24 | }); 25 | return response.data; 26 | } catch (error) { 27 | console.error('Error calculating calories burned:', error); 28 | return null; 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | t# My Burn Buddy 2 | 3 | My Burn Buddy is a fitness application built using the MERN stack (MongoDB, Express, React, and Node.js) that helps users calculate caloried burned after workouts, manage their nutrition, and achieve their fitness goals. 4 | Goto backend for this project here: https://github.com/Jabeensk/FitnessTracker_Backend2 5 | ## Overview 6 | 7 | My Burn Buddy allows users to track their workouts, monitor their nutrition intake, and maintain a healthy lifestyle. Users can calculate calories burned and analyze their progress over time. The application also provides nutritional information for various food items, allowing users to make informed dietary choices. 8 | 9 | ## Installation 10 | 11 | npm install 12 | 13 | ## Deployment 14 | Backend https://fitnesstracker-backend2.onrender.com 15 | Frontend https://myburnbuddy.netlify.app/ 16 | 17 | ## Usage 18 | 19 | Once the application is running, users can: 20 | 21 | - Log in to their account or sign up for a new account. 22 | - Track their workouts by entering activity details and duration. 23 | - Calculate the calories burned for each workout session. 24 | - Monitor their nutrition intake by searching for food items and viewing nutritional information. 25 | - Save their workout and nutrition data to track progress over time. 26 | 27 | ## Technologies Used 28 | 29 | - MongoDB 30 | - Express 31 | - React 32 | - Node.js 33 | 34 | ## References 35 | Nutrition API: https://api-ninjas.com/api/nutrition 36 | Guide to code my calculator 37 | https://www2.lawrence.edu/fast/GREGGJ/CMSC106/lectures/Chapter4/Exercise/Calculator.html 38 | 39 | ## Future Updates 40 | Working on nutrition log to calculate total calories 41 | Save workouts 42 | blog 43 | 44 | ## License 45 | 46 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/pages/AboutPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../views/MBBlogo.jpg"; 3 | import "../styles.css"; 4 | 5 | function AboutPage() { 6 | return ( 7 |
8 | 16 | 17 |
18 |

Welcome to My Burn Buddy!

19 |

20 | My Burn Buddy is a fitness application designed to help you achieve your health and fitness goals. Whether you're looking to lose weight, build muscle, or improve your overall fitness level, My Burn Buddy provides the tools and resources you need to succeed. 21 |

22 |

Key Features

23 |
    24 |
  • Calculate Calories burned after workout
    • 25 |
  • Access nutrition information for various foods
    • 26 |
  • Record your nutrition and water intake with a food diary
    • 27 |
  • View your information on your profile page!
    • 28 |
29 |

How to Use

30 |

31 | Getting started with My Burn Buddy is easy! Simply sign up for an account, log in, and start using the various features to track your fitness journey. Whether you're a beginner or an experienced fitness enthusiast, My Burn Buddy is here to support you every step of the way. 32 |

33 |

Get Started Today!

34 |

35 | Ready to take control of your health and fitness? Sign up for My Burn Buddy today and start working towards your goals! 36 |

37 |
38 |
39 | ); 40 | } 41 | 42 | export default AboutPage; 43 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import HomePage from "./pages/HomePage"; 4 | import SignupPage from "./pages/SignupPage"; 5 | import Nav from "./components/Nav"; 6 | import WorkoutsPage from "./pages/WorkoutsPage"; 7 | import ProfilePage from "./pages/ProfilePage"; 8 | import NutritionPage from "./pages/NutritionPage"; 9 | import AboutPage from "./pages/AboutPage"; 10 | 11 | import "./styles.css"; 12 | 13 | function App() { 14 | const [user, setUser] = useState(null); 15 | const [userId, setUserId] = useState(null); 16 | 17 | const handleLogout = () => { 18 | 19 | setUser(null); // For example, set the user state to null 20 | }; 21 | 22 | const handleLogin = (userId) => { 23 | setUserId(userId); 24 | }; 25 | 26 | return ( 27 | 28 |
29 | 30 |

31 | Live, Laugh, Run....Start tracking! 32 |

33 | {user ? ( 34 | <> 35 |
55 | 56 | ); 57 | } 58 | 59 | export default App; 60 | -------------------------------------------------------------------------------- /src/pages/ProfilePage.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | import axios from "axios"; 4 | import logo from "../views/MBBlogo.jpg"; 5 | import "../styles.css"; 6 | import NutritionPage from "./NutritionPage"; 7 | 8 | const ProfilePage = ({user}) => { 9 | const [userInfo, setUserInfo] = useState(null); 10 | const [foodDiary, setFoodDiary] = useState([]); 11 | const [workouts, setWorkouts] = useState([]); 12 | 13 | 14 | useEffect(() => { 15 | // Fetch user data 16 | const fetchUserData = async () => { 17 | try { 18 | const userDataResponse = await axios.get(`http://localhost:4000/api/food-diary/${user._id}`); 19 | setUserInfo(userDataResponse.data); 20 | console.log(userDataResponse); 21 | } catch (error) { 22 | console.error("Error fetching user data:", error); 23 | } 24 | }; 25 | 26 | // Fetch food diary data 27 | const fetchFoodDiary = async () => { 28 | try { 29 | const foodDiaryResponse = await axios.get(`https://fitnesstracker-backend2.onrender.com/api/food-diary/${user._id}`); 30 | console.log(foodDiaryResponse.data); 31 | setFoodDiary(foodDiaryResponse.data); 32 | } catch (error) { 33 | console.error("Error fetching food diary:", error); 34 | } 35 | }; 36 | console.log(foodDiary); 37 | console.log(userInfo); 38 | 39 | fetchUserData(); 40 | fetchFoodDiary(); 41 | }, []); 42 | 43 | return ( 44 |
45 |

Profile

46 | {user && ( 47 |
48 |

First Name: {user.firstName}

49 |

Last Name: {user.lastName}

50 |

Email: {user.email}

51 |

Date of Birth: {user.dateOfBirth}

52 |
53 | )} 54 | 55 |

Food Diary

56 | 67 | 68 | 69 | 70 |
71 | ); 72 | }; 73 | 74 | export default ProfilePage; 75 | -------------------------------------------------------------------------------- /src/pages/HomePage.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import logo from "../views/MBBlogo.jpg"; 4 | import "../styles.css"; 5 | 6 | import axios from "axios"; 7 | import Nav from "../components/Nav"; 8 | 9 | function HomePage({ setUser }) { 10 | const [email, setEmail] = useState(""); 11 | const [password, setPassword] = useState(""); 12 | 13 | const handleLogin = async (e) => { 14 | e.preventDefault(); 15 | try { 16 | const res = await axios.post("https://fitnesstracker-backend2.onrender.com/api/users/signin", { 17 | email, 18 | password, 19 | }); 20 | console.log(res.data); 21 | setUser(res.data); 22 | } catch (error) { 23 | console.log(error.message); 24 | } 25 | }; 26 | 27 | return ( 28 |
29 | 37 | 38 |
39 |

Welcome!

40 |

41 | My Burn Buddy helps you track your workouts, calories burned and nutrition to achieve your fitness goals. 42 |

43 | 44 | 45 |
46 | 47 | 48 |

Login

49 |
50 | 51 | setEmail(e.target.value)} 57 | /> 58 | 59 | setPassword(e.target.value)} 65 | /> 66 | 69 |
70 |

71 | Don't have an account? Create Account 72 |

73 |
74 | ); 75 | } 76 | 77 | export default HomePage; 78 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | http -------------------------------------------------------------------------------- /src/pages/WorkoutsPage.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { calculateCalories } from "../utils/calculator"; 3 | import axios from "axios"; 4 | import logo from "../views/MBBlogo.jpg"; 5 | 6 | function WorkoutsPage() { 7 | const [activity, setActivity] = useState(""); 8 | const [duration, setDuration] = useState(""); 9 | const [caloriesBurned, setCaloriesBurned] = useState(0); 10 | 11 | const handleCalculate = () => { 12 | const calories = calculateCalories(activity, duration); 13 | setCaloriesBurned(calories); 14 | }; 15 | 16 | const handleSaveWorkout = async () => { 17 | try { 18 | // Make a POST request to backend to save the workout 19 | const response = await axios.post("/api/workouts", { 20 | activity, 21 | duration, 22 | caloriesBurned, 23 | }); 24 | 25 | console.log(response.data); 26 | 27 | 28 | setActivity(""); 29 | setDuration(""); 30 | setCaloriesBurned(0); 31 | 32 | alert("Workout saved successfully!"); 33 | } catch (error) { 34 | console.error("Error saving workout:", error); 35 | alert("Failed to save workout. Please try again."); 36 | } 37 | }; 38 | 39 | const activityOptions = [ 40 | "Running", 41 | "Walking", 42 | "Cycling", 43 | "Swimming", 44 | 45 | ]; 46 | 47 | 48 | return ( 49 |
50 |

Workouts

51 |
52 | 53 | 64 |
65 |
66 | 67 | setDuration(e.target.value)} 71 | /> 72 |
73 | 76 | 77 |
78 |

79 | Calories Burned: {caloriesBurned} 80 |

81 |
82 | 83 | 84 | 85 | {/* */} 88 |
89 | ); 90 | } 91 | 92 | export default WorkoutsPage; 93 | -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import logo from "../views/MBBlogo.jpg"; 4 | import homeIcon from "../views/burn.jpg"; 5 | import exerciseIcon from "../views/workout.jpg"; 6 | import profileIcon from "../views/profilepage.jpg"; 7 | import nutritionIcon from "../views/nutrition.jpg"; 8 | import healthIcon from "../views/health.jpg"; 9 | 10 | function Nav({ handleLogout }) { 11 | const logout = () => { 12 | handleLogout(); 13 | }; 14 | 15 | return ( 16 | 100 | ); 101 | } 102 | 103 | export default Nav; 104 | -------------------------------------------------------------------------------- /src/pages/SignupPage.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import axios from "axios"; 3 | import logo from '../views/MBBlogo.jpg'; 4 | import '../styles.css'; 5 | 6 | const SignupPage = ({ setUser }) => { 7 | const [firstName, setFirstName] = useState(""); 8 | const [lastName, setLastName] = useState(""); 9 | const [email, setEmail] = useState(""); 10 | const [username, setUsername] = useState(""); 11 | const [dateOfBirth, setDateOfBirth] = useState(""); 12 | const [password, setPassword] = useState(""); 13 | 14 | const handleSignup = async (e) => { 15 | e.preventDefault(); 16 | try { 17 | const res = await axios.post("https://fitnesstracker-backend2.onrender.com/api/users", { 18 | firstName, 19 | lastName, 20 | email, 21 | dateOfBirth, 22 | password, 23 | }); 24 | console.log(res.data); 25 | setUser(res.data); 26 | } catch (error) {} 27 | 28 | console.log("Signup button clicked"); 29 | }; 30 | 31 | return ( 32 |
33 | 40 |

Create Account

41 |
42 |
43 | 44 | setFirstName(e.target.value)} 49 | /> 50 |
51 |
52 | 53 | setLastName(e.target.value)} 58 | /> 59 |
60 |
61 | 62 | setEmail(e.target.value)} 67 | /> 68 |
69 |
70 | {" "} 71 | 72 | setUsername(e.target.value)} 77 | /> 78 |
79 |
80 | 81 | setDateOfBirth(e.target.value)} 86 | /> 87 |
88 |
89 | {" "} 90 | 91 | setPassword(e.target.value)} 96 | /> 97 |
98 | 99 |
100 |
101 | ); 102 | }; 103 | 104 | export default SignupPage; 105 | -------------------------------------------------------------------------------- /src/pages/NutritionPage.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import logo from "../views/MBBlogo.jpg"; 4 | import "../styles.css"; 5 | 6 | const NutritionPage = ({user}) => { 7 | const [query, setQuery] = useState(""); 8 | const [nutritionData, setNutritionData] = useState([]); 9 | const [waterIntake, setWaterIntake] = useState(0); 10 | const [meals, setMeals] = useState({ 11 | breakfast: "", 12 | lunch: "", 13 | dinner: "", 14 | snacks: "", 15 | }); 16 | 17 | useEffect(() => { 18 | const fetchNutritionData = async () => { 19 | try { 20 | const response = await axios.get( 21 | `https://api.api-ninjas.com/v1/nutrition?query=${query}`, 22 | { 23 | headers: { 24 | "X-Api-Key": "IFepALMXysh4nTzEMdeJ6A==sSNMhEgl33NHDJPa", 25 | }, 26 | } 27 | ); 28 | setNutritionData(response.data); 29 | } catch (error) { 30 | console.error("Error fetching nutrition data:", error); 31 | } 32 | }; 33 | 34 | if (query) { 35 | fetchNutritionData(); 36 | } 37 | }, [query]); 38 | 39 | const handleQueryChange = (event) => { 40 | setQuery(event.target.value); 41 | }; 42 | 43 | const handleSave = () => { 44 | 45 | localStorage.setItem("waterIntake", waterIntake); 46 | localStorage.setItem("meals", JSON.stringify(meals)); 47 | alert("Data saved successfully!"); 48 | }; 49 | const handleSubmit=async(e)=> { 50 | e.preventDefault(); 51 | const res=await axios.post('https://fitnesstracker-backend2.onrender.com/api/food-diary', { 52 | userId: user._id, 53 | ...meals 54 | }) 55 | console.log(res.data); 56 | 57 | } 58 | return ( 59 |
60 |

Nutrition

61 |
62 | 63 | 69 |
70 |
71 |

Nutrition Information

72 |
73 | 74 | {nutritionData.map((item, index) => ( 75 |
76 | {item.name} 77 |
    78 |
  • Calories: {item.calories}
    • 79 |
  • Fat: {item.fat_total_g}g
    • 80 |
  • Protein: {item.protein_g}g
    • 81 |
  • Carbohydrates: {item.carbohydrates_total_g}g
    • 82 |
83 |
84 | ))} 85 |
86 |
87 |
88 |

Food Diary

89 |
90 | 91 | setWaterIntake(e.target.value)} 95 | /> 96 |
97 |
98 | 99 | setMeals({ ...meals, breakfast: e.target.value })} 103 | /> 104 |
105 |
106 | 107 | setMeals({ ...meals, lunch: e.target.value })} 111 | /> 112 |
113 |
114 | 115 | setMeals({ ...meals, dinner: e.target.value })} 119 | /> 120 |
121 |
122 | 123 | setMeals({ ...meals, snacks: e.target.value })} 127 | /> 128 |
129 | 132 |
133 |
134 | ); 135 | }; 136 | 137 | export default NutritionPage; 138 | --------------------------------------------------------------------------------