https://github.com/ummamali/tracaloriewp
Converted webpack version of tracalorie app. Tracalorie is a web application that helps users keep track of their daily calorie intake and expenditure. Users can set a calorie goal for the day, add calories consumed from food, and subtract calories burned through workouts. The app provides a clean and simple interface to monitor and manage them.
https://github.com/ummamali/tracaloriewp
css3 html5 javascript object-oriented-programming package-manager single-page-applications tailwindcss vanilla-javascript webpack
Last synced: 3 months ago
JSON representation
Converted webpack version of tracalorie app. Tracalorie is a web application that helps users keep track of their daily calorie intake and expenditure. Users can set a calorie goal for the day, add calories consumed from food, and subtract calories burned through workouts. The app provides a clean and simple interface to monitor and manage them.
- Host: GitHub
- URL: https://github.com/ummamali/tracaloriewp
- Owner: Ummamali
- Created: 2024-11-05T08:50:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-17T07:15:20.000Z (over 1 year ago)
- Last Synced: 2025-03-02T13:19:25.516Z (over 1 year ago)
- Topics: css3, html5, javascript, object-oriented-programming, package-manager, single-page-applications, tailwindcss, vanilla-javascript, webpack
- Language: JavaScript
- Homepage: https://tracaloriewp.vercel.app
- Size: 208 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔥 Tracalorie (Webpack Version)
**Tracalorie** is a web application that helps users keep track of their daily calorie intake and expenditure. Users can set a calorie goal for the day, add calories consumed from food, and subtract calories burned through workouts. The app provides a clean and simple interface to monitor and manage daily calorie balance effectively.
The application is deployed at [Tracalorie](https://tracaloriewp.vercel.app)
---
## 📌 Project Overview
### **Type of Project**
A calorie-tracking web application designed to manage food intake and workouts for maintaining a healthy lifestyle.
### **Methodology**
This project is developed using **Object-Oriented Programming (OOP)** principles in JavaScript to ensure modularity, reusability, and scalability.
---
### 📌 Repository
You can find the simple version of the project here:
[Tracalorie Javascript Version](https://github.com/ummamali/tracalorie)
### 🚀 Key Differences in the Webpack Version
1. **Module Bundling with Webpack**
- Combines JavaScript, CSS, and other assets into optimized bundles.
- Reduces file size and ensures better performance.
2. **Modern JavaScript Support**
- Includes **Babel** for compiling ES6+ JavaScript into browser-compatible code.
3. **Development Server**
- A built-in dev server with live reloading for a smoother development experience.
4. **Production-Ready Build**
- Generates minified and optimized assets for deployment.
---
## 🔧 Technologies Used
- **HTML**: Provides the structure for the web application.
- **TailwindCSS**: Utility-first CSS framework for responsive and modern styling.
- **Vanilla CSS**: Custom styles for enhanced UI/UX design.
- **JavaScript**: Implements dynamic functionalities and OOP methodology.
- **Local Storage**: Saves data persistently in the browser for easy retrieval across sessions.
---
## 🚀 Features
- **Set Daily Calorie Goal**: Define a target calorie limit for the day.
- **Add Calories**: Log calories consumed from food items.
- **Subtract Calories**: Track calories burned through workouts.
- **Calorie Balance**: Display remaining calories for the day based on consumption and expenditure.
- **Local Storage Integration**: Save calorie data persistently to resume tracking without data loss.
---
## 🛠️ Running the Project
1. **Clone the Repository**
```bash
git clone https://github.com/ummamali/tracalorie
cd tracalorie