🗺 EventMappr

EventMappr is a lightweight, open-source community event mapping web app. Users can discover, add, and explore local events pinned on an interactive map. Interactive, frontend‑only web app for discovering and cataloging community events on a map.

Live demo: https://eventmappr.vercel.app/

---

🚀 Features

• 🗺️ Add events to map – Click anywhere to drop a pin and add title, category, date/time, and organizer info
• 🧭 Find Nearby – Centers the map on your current location using the Geolocation API
• 🎛️ Filter events – Narrow down events by category (🎵 Music, 💻 Tech, 🤝 Volunteering, 🛍️ Market, 🎨 Art)
• 💾 Persistent storage – Uses localStorage so your events remain across browser sessions
• 📱 Interactive UI – Responsive layout with popups, animations, and dynamic filtering
• 📄 Detailed event pages – Click a marker to view full event info, a mini-map, and organizer/contact details

---

🛠️ Tech Stack

• HTML5 & CSS3 – semantic markup and responsive design
• Vanilla JavaScript – app logic, map interactivity, and data handling
• Leaflet.js – open-source mapping library
• OpenStreetMap – free map tile provider
• localStorage – lightweight, in-browser persistence

---

🧩 Getting Started

🚀 Getting Started

1. Clone the repository

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

2. Run locally

You can open the app directly in your browser:

open index.html

Or use a live server extension (e.g. in VS Code) for live reloading.

Or use npm:

npm install
npm start

---

📁 Project Structure Overview

Copy
Edit
├── index.html           # Main UI + map + add-event form  
├── event-details.html   # Dedicated event details page  
├── script.js            # Map setup, event logic, storage handlers  
├── event-details.js     # Loads data & renders detail view  
├── style.css            # Global and responsive CSS  
├── package.json         # (Optional) npm meta + scripts  
├── LICENSE.md           # MIT License  
├── CONTRIBUTING.md      # Guidelines for contributing  
└── CODE_OF_CONDUCT.md / SECURITY.md

---

📌 Usage Guide

1. View events — Load the app to see all events pinned on the map

2. Add event — Click on map, fill in the form (title, category, datetime, contact), and hit Save

3. Filter — Select categories via checkboxes to hide/show specific events

4. Find nearby — Click “📍 Find Nearby” to center map at your current position

5. View details — Click any marker → opens event-details.html with full info and mini-map

---

🧑‍💻 Contributing

We welcome contributions to improve EventMappr!

📌 How to Contribute

1. Fork this repository
2. Clone your forked repo:

   git clone https://github.com/your-username/EventMappr.git

3. Create a new branch:

   git checkout -b feature/your-feature-name

4. Make your changes and commit:

   git commit -m "Add your message here"

5. Push to your fork and submit a Pull Request:

   git push origin feature/your-feature-name

📋 Contribution Guidelines

• Keep PRs focused and concise
• Use consistent code formatting
• Test features before submitting
• Be respectful and collaborative in reviews

---

💡 Feature Ideas & Roadmap

• ✅ Local persistent storage
• ✅ Event detail pages
• ✅ Event time/date input
• 🔜 Map marker clustering
• 🔜 Dark mode toggle
• 🔜 Search bar for event titles/descriptions
• 🔜 Shareable event links
• 🔜 User authentication (e.g., via Firebase)
• 🔜 Category tags and filtering UX improvements

---

🙌 Acknowledgements

• Leaflet.js – for the interactive mapping library
• OpenStreetMap – for free and open map tiles
• Community inspiration from local engagement and open-source mapping initiatives

---

🌟 Awesome Contributors

---

📄 License

Released under the MIT License.

---

Built with ❤️ by Bhavya1352 and the open-source community.