https://github.com/guillevarelabarros/fittrack-dev
A responsive calorie tracking app built with React, TypeScript, and Material UI. Showcases global state management with Context API and useReducer, including theme toggle, localStorage, and dynamic UI components.
https://github.com/guillevarelabarros/fittrack-dev
calorie-tracker context-api fitness-app frontend localstorage material-ui react responsive-design state-management typescript usereducer
Last synced: about 1 year ago
JSON representation
A responsive calorie tracking app built with React, TypeScript, and Material UI. Showcases global state management with Context API and useReducer, including theme toggle, localStorage, and dynamic UI components.
- Host: GitHub
- URL: https://github.com/guillevarelabarros/fittrack-dev
- Owner: guillevarelabarros
- Created: 2025-05-03T22:57:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-03T23:03:56.000Z (about 1 year ago)
- Last Synced: 2025-05-04T00:18:25.876Z (about 1 year ago)
- Topics: calorie-tracker, context-api, fitness-app, frontend, localstorage, material-ui, react, responsive-design, state-management, typescript, usereducer
- Language: TypeScript
- Homepage: https://fittrack-dev.netlify.app/
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🥗 FitTrack - Calorie Manager
**FitTrack** is a responsive calorie tracking web application built with
**React + TypeScript**, styled with **Material UI**, and powered by **Context
API** + `useReducer` for global state management. It allows users to log meals
and exercises to monitor their daily calorie intake, burn, and net balance.
## 🚀 Live Demo
👉 [Live Demo on Netlify](https://fittrack-calories.netlify.app) ← _(Replace
with your actual URL)_
---
## 🧠 Technologies Used
- ⚛️ **React 18** with **TypeScript**
- 🎨 **Material UI (MUI)**
- 🧠 **Context API** + `useReducer`
- 📊 **Recharts** for data visualization
- 🍿 **notistack** for snack notifications
- 🌗 Light and dark mode support
- 💾 LocalStorage persistence
- ⚡ Built with Vite
---
## 📸 Screenshots
| Add Activity | Summary | Meals & Activities |
| -------------------------------- | -------------------------------- | -------------------------------- |
|  |  |  |
---
## 🗂️ Folder Structure
src/ ├── components/ # Main visual components ├── context/ # Global contexts and
providers ├── data/ # Static data (categories) ├── hooks/ # Custom React hooks
├── reducers/ # State management with useReducer ├── types/ # TypeScript type
definitions ├── App.tsx # Root component └── main.tsx # App entry point
---
## ✨ Features
✅ Add meals or exercises
✅ See calories consumed, burned, and net difference
✅ View bar chart summary
✅ Edit and delete existing records
✅ Toggle between light and dark mode
✅ Responsive design
✅ LocalStorage data persistence (no backend required)
---
## 📦 Installation
1. Clone the repository
```bash
git clone https://github.com/guillevarelabarros/fittrack-calorie-manager.git
cd fittrack-calorie-manager
```
---
## ✨ Features
✅ Add meals or exercises
✅ See calories consumed, burned, and net difference
✅ View bar chart summary
✅ Edit and delete existing records
✅ Toggle between light and dark mode
✅ Responsive design
✅ LocalStorage data persistence (no backend required)
---
## 📦 Installation
```bash
1. Clone the repository
git clone https://github.com/guillevarelabarros/fittrack-calorie-manager.git
cd fittrack-calorie-manager
2. Install dependencies
yarn install
3. Run the development server
yarn dev
4. Build for production
yarn build
```
## 🧪 What This Project Demonstrates
This project showcases:
Global state management with React Hooks (without Redux)
Clean modular code architecture
Strong grasp of React + TypeScript + MUI
Real-world UI with responsive and accessible components
Usage of modern libraries and best practices
Clear separation of concerns and reusable components
## 📫 Contact
👨💻 Built by Guillermo Ignacio Varela Barros 📧 Email:
guillevarelabarros@gmail.com
## 📝 License
This project is licensed under the MIT License. Feel free to use, modify, or
adapt it for your own purposes.
"It’s not just about counting calories — it’s about taking control." — Guille 💪