Run frontend:

cd frontend
npm run dev

Run server:

node server.js

Ideal UX Flow:

---

Updated Project Phases and Tasks

Phase	Step	Task	Description	Dependencies	Estimated Time	Done
Phase 1: Setup & Data	1	Development Environment Setup	Install Node.js, npm (or yarn), and a code editor (e.g., VS Code). Ensure MapLibre dependencies are installed.	None	1-2 Days	☐
	2	Explore Data Source	Use the Events Calendar REST API endpoint here to retrieve event data. Use parameters page=1, per_page=10, and start_date=2025-04-21. Backup sources include Offenesdatenportal.de and the official city website.	Step 1	1-2 Days	☐
	3	Data Modeling	Design the MongoDB schema for event data. Include fields for geolocation, event categories, and user interactions.	Step 2	1 Day	☐
	4	Basic Backend Setup	Establish an Express.js server to handle API requests. Implement CORS handling for frontend-backend communication.	Step 1	1-2 Days	☐
	5	Data Fetching (Initial)	Implement backend logic to retrieve event data using the Events Calendar REST API. Handle API errors and design a caching mechanism to reduce API calls. Ensure data is structured dynamically for multiple date ranges.	Steps 3, 4	2-3 Days	☐
Phase 2: Frontend & Map	6	Wireframing	Create low-fidelity wireframes for Event List and Map View screens. Additionally, outline designs for filters and modals.	None	1-2 Days	☐
	7	React Project Setup	Set up the basic React project structure using Vite (already implemented). Refactor the structure to separate concerns (e.g., Map components, filters, and modals).	Step 1	1 Day	☐
	8	Map View Component	Ensure MapLibre integration is complete. Add features like clustering markers, zoom controls, and dynamic user location updates.	Step 7	2-3 Days	☐
	9	Event List Component	Enhance the EventList component to include filters (e.g., category, date, price) and sorting options. Add pagination for large event sets.	Step 7	2-3 Days	☐
	10	Connect Frontend to Backend	Fetch and display event data from the /api/events endpoint in both MapView and EventList components. Ensure real-time updates for new events.	Steps 5, 8, 9	2-3 Days	☐
Phase 3: Refinement & Testing	11	Advanced Filtering	Implement advanced filtering in the backend and frontend (e.g., distance-based filtering, free events, and popularity). Add a "reset filters" option.	Steps 5, 9	2-3 Days	☐
	12	Event Detail Modals	Display detailed information about events in a modal when a user selects a marker or list item. Include RSVP buttons and social sharing options.	Steps 8, 9, 10	1-2 Days	☐
	13	User Interactions	Enable user interactions, such as selecting an event on the map to highlight it in the list and vice versa.	Steps 8, 9, 10	1-2 Days	☐
	14	Offline Mode	Cache event data and map tiles locally for offline access. Inform users when they are in offline mode.	Steps 5, 8	3-4 Days	☐
	15	Testing & Debugging	Conduct thorough testing across all components. Write unit tests for critical functions (e.g., data fetching, filtering, and user interactions). Ensure the application meets MVP requirements.	Steps 1-14	3-4 Days	☐
	16	Deployment	Deploy the application to production. Use Netlify for the frontend and a cloud service (e.g., AWS or Heroku) for the backend. Set up CI/CD pipelines for automated deployments.	Steps 1-15	2-3 Days	☐
Phase 4: Ambitious Features	17	User Accounts	Add a user authentication system to allow users to save events, set preferences, and view past interactions.	Steps 5, 9, 10	5-6 Days	☐
	18	Push Notifications	Implement push notifications to inform users of new events, updates, or cancellations.	Step 17	2-3 Days	☐
	19	Analytics Dashboard	Build an analytics dashboard for administrators to view user activity, popular events, and other metrics.	Steps 5, 16	4-5 Days	☐

---