A modern web application to keep a daily log of calories consumed and burned.
Calorie Counter is a responsive web application that allows users to track their caloric intake and energy expenditure through exercise. The application automatically calculates the net calorie balance, providing a clear overview of daily progress.
The application's state is managed efficiently and robustly using React's useReducer
and useContext
hooks, ensuring a predictable and scalable data flow. Additionally, data is saved to the browser's localStorage
to persist the user's session, enhancing the user experience.
- Activity Logging: Add meals and exercises with their respective calories.
- Real-Time Calculation: Instantly view consumed calories, burned calories, and the net balance.
- Edit and Delete: Modify or remove any entry with a single click.
- Data Persistence: Information is saved in
localStorage
so you don't lose your progress when closing the browser. - Easy Reset: Option to clear all data and start fresh.
- Responsive Design: Fully adaptive interface for mobile and desktop devices, built with Tailwind CSS.
- Framework: React with Vite
- Language: TypeScript
- Styling: Tailwind CSS
- State Management: React Hooks (
useReducer
,useContext
) - Icons: Heroicons
- Unique IDs:
uuid
Follow these steps to run the project in your local environment:
-
Clone the repository:
git clone https://github.com/firedevelop/calorieCounterAPI.git
-
Navigate to the project directory:
cd calorieCounterAPI
-
Install the dependencies:
npm install
-
Run the development server:
npm run dev
The application will be available at
http://localhost:5173
(or the port indicated by Vite).
- Made with ❤️ by fireDevelop.
- Background images by Sven Mieke, Anna Pelzer, and Edgar Chaparro on Unsplash.
- Logo by freepik.
- Powered by Nutritionix.
id0000569