🗺 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 web app for discovering and cataloging community events on a map.

🚀 Live Demo 🔝 Back to Top

---

📑 Table of Contents

• 🚀 Features
• 📱 How to Use
• 🛠️ Tech Stack
• 🚀 Getting Started
  • Prerequisites
  • Installation
  • Development
  • Building for Production
• 📜 Available Scripts
• 📁 Project Structure Overview
• 📌 Usage Guide
• 🧑‍💻 Contributing
  • 📌 How to Contribute
  • 📋 Contribution Guidelines
• 💡 Feature Ideas & Roadmap
• 🙌 Acknowledgements
• 🌟 Awesome Contributors
• 📄 License

🔝 Back to Top

---

🚀 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
• 📄 NEW: Detailed event pages - Click on any marker to view comprehensive event information
• 💾 NEW: Persistent storage - Events are saved locally and persist across sessions
• 🗺️ NEW: Mini maps - Each event page includes a map showing the exact location
• ☁️ NEW: Weather Planner - Users can check 5-day weather forecasts for any city to help plan suitable dates for events
• 📸 NEW: Event Gallery - A dedicated page displaying user-shared images from past events, fostering community engagement
• 🔄 NEW: Modular Routing - Enhanced navigation with react-router-dom for better user experience
• 🔝 Back to Top

---

📱 How to Use

1. View Events: Open the app to see events marked on the map
2. Click Markers: Click on any event marker to view detailed information
3. Add Events: Fill out the form and click on the map to add new events
4. Find Nearby: Use the "Find Nearby" button to locate events close to you
5. View Details: Each event has a dedicated page with:
6. Event description and details
7. Location information with coordinates
8. Mini map showing exact location
9. Organizer and contact information
10. Date and time details
11. 🔝 Back to Top

---

🛠️ Tech Stack

• Next.js - React framework for production-grade applications
• React - Modern UI library for component-based architecture
• React Router DOM - Declarative routing for React applications
• React Leaflet - React components for Leaflet maps
• HTML5 & CSS3 – Semantic markup and responsive design
• Leaflet.js – Open-source mapping library
• OpenStreetMap – Free map tile provider
• localStorage – Lightweight, in-browser persistence
• 🔝 Back to Top

---

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm (v6 or higher)

Installation

1. Clone the repository

git clone https://github.com/yourusername/eventmappr.git
cd eventmappr

1. Install dependencies

npm install

Development

To start the development server:

npm run dev

The application will open in your default browser at http://localhost:3000.

Building for Production

To create a production build:

npm run build

To start the production server:

npm start

🔝 Back to Top

📜 Available Scripts

• npm run dev - Starts the development server on port 3000
• npm run build - Creates a production build
• npm start - Starts the production server
• npm run lint - Runs ESLint to check code quality
• npm run clean - Cleans build artifacts 🔝 Back to Top

---

📁 Project Structure Overview

├── components/          # React components
│   ├── layout/          # Layout components (Navbar, etc.)
│   ├── sections/        # Page section components
│   └── ui/              # Reusable UI components
├── pages/               # Next.js pages
│   ├── _app.js          # Custom App component
│   ├── _document.js     # Custom Document component
│   ├── index.js         # Home page
│   ├── explore.js       # Explore page
│   └── auth.js          # Authentication page
├── public/              # Static assets
│   └── images/          # Image assets
├── styles/              # CSS files
├── utils/               # Utility functions
│   └── router.js        # React Router DOM integration utilities
├── next.config.js       # Next.js configuration
└── package.json         # Project dependencies and scripts

🔝 Back to Top

📌 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 to view full event information 🔝 Back to Top

---

🧑‍💻 Contributing

We welcome contributions to improve EventMappr!

📌 How to Contribute

1. Fork this repository
2. Clone your forked repo: bash git clone https://github.com/your-username/EventMappr.git
3. Create a new branch: bash git checkout -b feature/your-feature-name
4. Make your changes and commit: bash git commit -m "Add your message here"
5. Push to your fork and submit a Pull Request: bash 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 🔝 Back to Top

---

💡 Feature Ideas & Roadmap

• ✅ Local persistent storage
• ✅ Event detail pages
• ✅ Event time/date input
• ✅ React component architecture
• ✅ Next.js migration
• ✅ React Router integration
• 🔜 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 🔝 Back to Top

---

🙌 Acknowledgements

• Next.js - for the React framework
• React Router DOM - for declarative routing
• React Leaflet - for React components for Leaflet maps
• Leaflet.js – for the interactive mapping library
• OpenStreetMap – for free and open map tiles
• React - for the UI component library
• Community inspiration from local engagement and open-source mapping initiatives
• 🔝 Back to Top

---

🌟 Awesome Contributors

---

📄 License

Released under the MIT License.

---

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

🔝 Back to Top

---