Event Management Dashboard

A modern, full-stack event management application built with Spring Boot 4.0, React 19 (Vite), and MongoDB.

This application demonstrates a comprehensive dashboard featuring category filtering with two distinct modes: Client-side filtering (instant, in-memory) and Server-side filtering (fetching dynamically from database REST API endpoints).

Demo video:https://www.loom.com/share/5cf2c4f98785433288f6499b910fd11e

Technical Stack

• Backend: Spring Boot 4.0 (Java 17/22), Spring Data MongoDB, Lombok
• Frontend: React 19, Vite, Axios, Vanilla CSS
• Database: MongoDB (Local or Atlas)

---

Directory Structure

event_management_system/
├── src/                          # Spring Boot Backend Source Code
│   ├── main/
│   │   ├── java/com/eventmanager/
│   │   │   ├── config/CorsConfig.java
│   │   │   ├── controller/EventController.java
│   │   │   ├── model/Event.java
│   │   │   ├── repository/EventRepository.java
│   │   │   ├── seeder/DataSeeder.java
│   │   │   └── EventManagerApplication.java
│   │   └── resources/application.properties
│   └── test/java/com/eventmanager/EventManagerApplicationTests.java
├── event-frontend/               # React + Vite Frontend
│   ├── src/
│   │   ├── api/eventApi.js
│   │   ├── components/
│   │   │   ├── EventCard.jsx
│   │   │   ├── EventList.jsx
│   │   │   └── FilterBar.jsx
│   │   ├── App.css
│   │   ├── App.jsx
│   │   ├── index.css
│   │   └── main.jsx
│   ├── package.json
│   └── vite.config.js
├── pom.xml                       # Maven Dependency Descriptor
└── README.md                     # Documentation

---

Getting Started

Prerequisites

• Java Development Kit (JDK): Version 17 or higher
• Node.js & npm: Node 18+ and npm 9+
• MongoDB: A running MongoDB instance ( MongoDB Atlas connection string)

---

Step 1: Run the Backend (Spring Boot)

1. Ensure MongoDB is running on mongodb://localhost:27017/eventdb. If you are using a custom MongoDB connection or MongoDB Atlas, open src/main/resources/application.properties and replace:

   spring.data.mongodb.uri=your-connection-string

2. Navigate to the root directory of the project in your terminal.
3. Start the Spring Boot application using the Maven wrapper:
   • Windows:

     .\mvnw.cmd spring-boot:run

   • Linux / macOS:

     ./mvnw spring-boot:run

4. The server will start on port 8080.
5. On startup, the application will detect if your events collection is empty. If empty, the DataSeeder will automatically seed the database with 15 mock events.

---

Step 2: Run the Frontend (React + Vite)

1. Navigate to the event-frontend directory in your terminal:

   cd event-frontend

2. Install the node dependencies:

   npm install

3. Start the Vite local development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173.

---

Design and Filtering Architecture

The dashboard implements two filtering modes which can be toggled in real time:

1. Client-Side Filtering (🔵 Blue Label)

• How it works: When the dashboard mounts, the entire list of 15 events is loaded into the React state (allEvents). When you select a category (e.g., Workshop), the filter logic runs instantly in the browser using JavaScript's .filter() array method.
• Benefits: Instant rendering with zero additional network requests.

2. Server-Side Filtering (🟢 Green Label)

• How it works: When a category button is clicked, the React application sends a new HTTP GET request to the Spring Boot REST endpoint (/api/events/filter?category={category}). The server queries MongoDB using EventRepository.findByCategory(category) and returns the matching document list.
• Benefits: Optimal for large-scale databases where loading all data at once into browser memory is inefficient.

---

REST API Endpoints

The Spring Boot backend exposes the following CORS-enabled endpoints:

Method	Endpoint	Query Param	Description
GET	/api/events	None	Retrieve all events from database
GET	/api/events/filter	category	Retrieve events matching the specified category