Eco Event is a community-driven social development platform that empowers individuals to create, join, and track social service events in their local area.
From tree plantation 🌳 to road cleaning 🧹, this platform connects volunteers and organizers to bring positive environmental and social change to their community.
- 🪴 Create & Manage Events: Logged-in users can create events, update, and manage their own created ones.
- 🤝 Join Events: Users can view event details and join with a single click.
- 🔍 Filter & Search: Find events by name or type (Cleanup, Plantation, Donation, etc.) using MongoDB queries.
- 🌓 Light / Dark Theme Toggle: Switch between light and dark modes for a personalized look.
- 🔐 Firebase Authentication: Secure login/register system with Google login support.
- 🗓️ Date Validation: Only future dates allowed using
react-datepicker. - 🎨 Modern & Responsive Design: Fully responsive UI with elegant animations using Framer Motion.
- 🔔 Interactive Notifications: Toasts and SweetAlerts for feedback (no default browser alerts).
| Page | Type | Description |
|---|---|---|
/ |
Public | Home page with banner, features, gallery, and newsletter |
/login |
Public | Login with email/password or Google account |
/register |
Public | Register with password validation |
/events |
Public | View all upcoming events (past ones hidden automatically) |
/event/:id |
Public | Event details page with "Join Event" option |
/create-event |
Private | Create new event (only for logged-in users) |
/joined-events |
Private | View events joined by the logged-in user |
/manage-events |
Private | Manage or update your own created events |
✅ Email/Password Authentication
✅ Google Login Integration
✅ Private Route Protection
✅ Create / Update / Join Event System
✅ Search & Filter (MongoDB)
✅ Toast/SweetAlert2 Notification
✅ Date Validation with react-datepicker
✅ Framer Motion Animations
✅ Spinner for Data Loading
✅ Light & Dark Theme Toggle
- Password must include:
- One Uppercase Letter
- One Lowercase Letter
- At least 6 characters
- Errors shown via SweetAlert2 or React Hot Toast
- Success toast after login/register
- All input fields required (title, type, image URL, location, description)
- Event date must be a future date
- On success: success toast + redirect to Upcoming Events
✔️ Event Filter & Search (MongoDB)
✔️ Theme Customization (Dark/Light)
✔️ Framer Motion Animations
✔️ Loading Spinner
✔️ JWT Authorization with Firebase Admin SDK
react-router-dom→ Routingfirebase→ Authentication & Firestorereact-datepicker→ Event date selectionsweetalert2→ Alert notificationsreact-hot-toast→ Toast notificationsframer-motion→ Animationsaxios→ HTTP requests
- Clone the repositories
git clone https://github.com/Sahidulislam05/Eco-Event-Client
git clone https://github.com/Sahidulislam05/Eco-Event-Server
cd Eco-Event-Client
npm install
cd ../Eco-Event-Server
npm install
Fully optimized and responsive for:
- 💻 Desktop
- 📊 Tablet
- 📱 Mobile
Design inspiration and assets taken from:
Special care taken for:
- Consistent headings & font sizes
- Equal card sizes
- Uniform spacing and alignment
- Modern grid layouts
👤 Developed by: Sahidul Islam
🎓 Diploma in Computer Science & Technology
🏫 Tangail Polytechnic Institute (TPI)
💻 President, TPI Computer Club
🚀 Passionate about MERN Stack & AI Integration
| Platform | Purpose | URL |
|---|---|---|
| Netlify | Client Hosting | https://eco-event-social-development.netlify.app/ |
| Vercel | Server Hosting | https://social-eco-event-server.vercel.app/ |
- Client Side: 15+ meaningful commits
- Server Side: 8+ meaningful commits
- Each commit message is feature-specific and well-documented
Eco Event is a complete full-stack MERN web application that encourages people to engage in social and environmental development activities.
It demonstrates a modern approach to event management with real-world CRUD operations, authentication, data validation, and responsive UI design.
⭐ If you like this project, please give it a star on GitHub! ⭐