CleanCity+: An Interactive Waste Management Tracker

Live Demo: cleancity-plus.vercel.app

---

📖 Project Brief

CleanCity+ is a Next.js (React) web app that educates users on waste categories and helps them log, track, and visualize their recycling efforts.
It emphasizes React fundamentals (components, props, state, hooks) and JavaScript interactivity (CRUD operations, search, charts, and persistence with localStorage).

---

🎯 Core Features

1. Homepage

   • Navbar with links to Home, Waste Categories, Recycling Tracker, Pledge
   • Hero section with call-to-action
   • Random “Did You Know?” fact generator

2. Waste Categories

   • Accordion (React-Bootstrap) for Plastic, Organic, E-waste, Paper, Glass
   • Each section contains tips and disposal info

3. Recycling Tracker

   • TrackerForm to add items (category + quantity)
   • TrackerTable to view, edit, and delete logs
   • Persist data with localStorage
   • Search & sort functionality
   • Chart (Recharts) showing totals per category
   • Achievement badges when milestones are hit

4. Pledge Page

   • Users submit a pledge
   • Pledges stored in localStorage
   • Live pledge counter

5. Responsive Design

   • Built with React-Bootstrap grids, Tailwind utilities, and responsive tables

---

🛠️ Tech Stack

• Next.js 15+ (App Router)
• Tailwind CSS
• React-Bootstrap
• Recharts
• localStorage API

---

📸 Preview

Here are some screenshots of CleanCity+ in action:

Homepage

Waste Categories

Recycling Tracker

Pledge Page

📦 Installation

1. Clone the repository

git clone https://github.com/your-username/cleancity-plus.git
cd cleancity-plus

2. Install dependencies

npm install
npm install react-bootstrap boostrap recharts react-icons recharts

3. Run the development server

npm run dev

4. Build for production

npm run build
npm start

💬 Feedback

I’d love to hear your thoughts and suggestions!

• Found a bug? → Open an issue
• Have an idea or suggestion? → Start a discussion
• Want to contribute? → Fork the repo and submit a Pull Request

Your feedback helps me improve these tasks 🚀