https://github.com/touhidtamim/keepfresh-client-side
Keep Fresh – A full-stack food expiry tracker app with countdowns, JWT auth, and smart alerts to reduce food waste. Built with React, Express, and MongoDB.
https://github.com/touhidtamim/keepfresh-client-side
daisyui express express-middleware firebase-auth food-tracker jwt jwt-token mongodb mongodb-atlas mongodb-database react tailwindcss
Last synced: 3 months ago
JSON representation
Keep Fresh – A full-stack food expiry tracker app with countdowns, JWT auth, and smart alerts to reduce food waste. Built with React, Express, and MongoDB.
- Host: GitHub
- URL: https://github.com/touhidtamim/keepfresh-client-side
- Owner: touhidtamim
- Created: 2025-06-25T05:35:45.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-09T17:16:10.000Z (11 months ago)
- Last Synced: 2025-08-09T19:12:56.497Z (11 months ago)
- Topics: daisyui, express, express-middleware, firebase-auth, food-tracker, jwt, jwt-token, mongodb, mongodb-atlas, mongodb-database, react, tailwindcss
- Language: JavaScript
- Homepage: https://test-keepfresh.netlify.app/
- Size: 378 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🥗 Keep Fresh – Food Expiry Tracker Web App
**Live Site:** [https://test-keepfresh.netlify.app/](https://test-keepfresh.netlify.app/)
---
## 📦 Project Purpose
**Keep Fresh** is a full-stack web application designed to help users track and manage their food items efficiently. Whether it's groceries, meal prep, or leftovers, users can store expiry dates, receive alerts, and reduce food waste—all in a responsive and user-friendly interface.
---
## 🎯 Target Audience
- Health-conscious individuals and families
- Meal planners and home cooks
- Grocery-conscious consumers aiming to reduce waste
- Students and working professionals managing food storage
---
## 🚀 Key Features
- 🔐 **Secure Authentication:** Email-password and Google login with Firebase Authentication
- 🗂️ **Food Inventory Management:** Add, update, and delete food items with detailed info like title, category, added date, and expiry date
- ⏳ **Expiry Countdown Timer:** Live countdown showing days left before food expires
- 🔍 **Smart Search & Filter:** Search by title/category and filter items by food category
- 📊 **Statistics Section:** Shows total items, expired items, and nearly-expired items with animated count-up effect
- ✏️ **Personal Notes:** Logged-in users can add custom notes per food item
- 🔒 **JWT-Protected Routes:** Backend routes protected by secure JWT tokens stored in cookies
- 📱 **Responsive Design:** Smooth user experience on mobile, tablet, and desktop
- 🧠 **User Guidance:** Modal pop-ups suggest what to do based on expiry status
- ⚠️ **Form Validation & Alerts:** Real-time form validation with toast notifications and confirmation modals
---
## 📸 UI & UX Highlights
- ✅ Clean, card-based food item display with rich detail
- 💡 Hover effects, animations, and intuitive dashboard for a modern experience
- 🎨 Consistent styling across pages using TailwindCSS and DaisyUI
- 📆 Expiry countdown and visual indicators for critical food items
---
## 🧠 Unique Value Proposition
**Keep Fresh** is more than a tracking tool—it’s a habit-forming assistant for better food management. It simplifies decision-making, helps reduce waste, and saves money by keeping food freshness top of mind.
---
## 📈 Future Improvements
- 📤 Image Upload for food items
- 📅 Custom reminders & notification scheduling
- 🧾 Weekly food report download/export
- 🧑🤝🧑 Shared Fridge: Allow multiple users to manage one inventory
- 🌐 Multi-language support
---
## 🛠️ NPM Packages Used
- `firebase` – Firebase Auth integration
- `axios` – API requests to backend
- `framer-motion` – Smooth animations
- `react-countup` – Animated stats counters
- `react-icons` & `lucide-react` – Rich icon sets
- `react-router-dom` – Frontend routing
- `react-hot-toast` & `react-toastify` – Toast notifications
- `sweetalert2` & `sweetalert2-react-content` – Confirmation/alert modals
- `swiper` – Carousel and slider features
- `react-intersection-observer` – Lazy loading and animation triggers
- `react-spinners` – Loaders/spinners for UX
- `tailwindcss` – Utility-first CSS styling
- `daisyui` – Tailwind CSS component library
---
## 🖥️ Tech Stack
- **Frontend:** React JS, TailwindCSS, DaisyUI
- **Backend:** Express JS, MongoDB, JWT (cookie-based auth)
- **Authentication:** Firebase Authentication
- **Hosting:** Frontend deployed on Netlify
---
## 💻 Running Locally & Contribution Guide
This project’s **backend (server) code** is maintained in a separate GitHub repository with the same name.
If you want to run the project locally or contribute:
- Clone both the frontend and backend repositories.
- Follow the instructions in each repository to install dependencies and set up environment variables.
- Run the backend server first, then start the frontend development server.
If you encounter any issues, want to suggest improvements, or contribute code, please feel free to contact me via my GitHub profile. I welcome contributions and am happy to assist you!
---
### 🔗 Repository Links
- **Backend (Server) Repository:**
[https://github.com/touhidtamim/Keepfresh-Server-Side](https://github.com/touhidtamim/Keepfresh-Server-Side)
- **Frontend (Client) Repository:**
[https://github.com/touhidtamim/Keepfresh-Client-Side](https://github.com/touhidtamim/Keepfresh-Client-Side)
---
## 👤 Developed By
**Touhid Tamim**
WEB11-3318 | Programming Hero Web Development Course (Batch 11)
---
## 📝 License
This project is for educational purposes only.