DEV Community

Cover image for # End-To-End Full-stack Event Management application (using ASP.NET, React, Node.js, and Spring Boot with SQLite Backend)
Saahen Sriyan Mishra
Saahen Sriyan Mishra

Posted on

# End-To-End Full-stack Event Management application (using ASP.NET, React, Node.js, and Spring Boot with SQLite Backend)

#dotnet #node #springboot #docker

This full-stack Event Management application is developed using ASP.NET, React, Node.js, and Spring Boot, codded in C#, JavaScript, and Java.

GitHub: Event Management Sytem

Table Of Content

Key Features

  • Streamlined Event Scheduling: The application automates scheduling, integrating vendor bookings, venue management, and notifications into a cohesive workflow
  • Optimized Attendee Management: It includes features to handle registrations, guest lists, and automated communication for reminders and updates, ensuring efficient attendee handling.
  • Advanced Budget Tracking: The system allows for real-time budget monitoring, expense management, and easy generation of comprehensive financial reports
  • Enhanced Customer Engagement: Through its intuitive interface, customers can effortlessly browse event details, make bookings, and stay updated with personalized notifications

Tech Stack Used

This application consists of three modules, including the module for user login and authentication, the User Module and the Admin Module.

Component Technology
Frontend React, ASP.NET (Razor Pages)
Backend Node.js, ASP.NET, Spring Boot with Maven
Database SQLite
Authentication JWT with BCrypt hashing

Login and SignUp Module (Backend Endpoints, URLs and Application UI)

Module Features Backend Endpoints
User Signup - Users provide an email and password during signup.
- Password is hashed using BCrypt before storage for secure handling.
- Duplicate email entries are checked to ensure uniqueness.
- Users are redirected to the login page upon successful signup.		 POST /api/auth/signup
- Validates request data, ensuring the email and password are provided.
- Checks for existing email in the Users table.
- Hashes the password using BCrypt.
- Inserts new user record into Users table.
- Handles validation and database errors.
User Login - Users log in with registered email and password.
- Password is verified using BCrypt.
- A JWT token is generated and returned.
- Users are redirected to their profile page after login.		 POST /api/auth/login
- Queries Users table for the provided email.
- Verifies password using BCrypt.
- Generates JWT token with user's email.
- Returns token upon success.
- Returns error on invalid credentials.
Admin Login - Admins log in with their credentials.
- Password is verified using BCrypt.
- A JWT token is generated with "Admin" role.
- Redirects to admin functionality page after login.		 POST /api/auth/admin-login
- Queries Admin table using provided email.
- Verifies password using BCrypt.
- Generates JWT token with role "Admin".
- Redirects to admin page.
- Handles login failures and errors.
JWT Authentication - JWT token is generated during login (User/Admin).
- Includes claims: email and role.
- Signed with HMAC-SHA256.
- Token expires after 2 hours.		 Token Generation Function (GenerateJwtToken):
- Embeds claims (email and role).
- Uses SymmetricSecurityKey for signing.
- Adds issuer, audience, and expiration metadata.
- Uses JwtSecurityTokenHandler.
- Supports both User and Admin roles.

Technical Highlights

Category Details
Security Implementation - Passwords are securely hashed using BCrypt, ensuring stored credentials cannot be reversed.
- JWT tokens are signed using HMAC-SHA256 and include embedded claims, ensuring secure and verifiable session handling.
Database Interaction - Efficient queries (SELECT, INSERT) are utilized for user and admin authentication processes.
- Ensures email uniqueness via HasIndex constraints on the Users and Admin tables.
Role-Based Access - Role-specific claims (User/Admin) are embedded in JWT tokens, enabling differentiation in session functionalities.
Frontend Integration - Upon successful login/signup, users are redirected to their respective pages (User Profile or Admin Functionality) seamlessly.

Application URLs

Pages URL
Initial page on opening the application http://localhost:5274/Home
User Signup http://localhost:5274/UserSignup
User Login http://localhost:5274/UserLogin
Admin login http://localhost:5274/Admin

Application UI

Image Description
Image description Initial page on opening the application
Image description User Signup
Image description User Login
Image description Admin login

User Module Features (Backend Endpoints, URLs and Application UI)

Module Features Backend Endpoints
User Welcome & Profile Management - Users are greeted with a personalized message using their stored name.
- "Edit Profile" allows users to dynamically update their name.		 GET /api/username/:email
- Fetches the username from the Users table based on the provided email.
- Returns personalized data for greeting and profile.

PUT /api/username/:email
- Updates the Username field for the specified email.
- Validates non-empty input.
- Returns success or error based on affected rows.
Event Browsing & Venue Viewing - Users can browse a full list of events with key details: name, theme, description, date, time, capacity, price, and venue.
- "View Location" uses Google Maps integration to show the venue.		 GET /api/events
- SELECT query joins Events and Location tables using event ID.
- Returns event metadata along with latitude and longitude for Google Maps embedding.
- Handles DB errors and returns fallback messages if needed.
Event Booking & Confirmation - Users can book events via a confirmation window.
- Event is added to the user's profile in real time.
- Multiple ticket booking is supported, with data reflected instantly after booking or refreshing.		 POST /api/book-event
- Validates event capacity (max vs current) from Events table.
- Retrieves user ID from Users table using email.
- Checks existing bookings in Booked table:
  - If exists: Updates tickets_booked count.
  - Else: Inserts new booking record.
- Updates event's current capacity.
- Includes checks for errors and prevents overbooking.
Event Availability & Restrictions - Events with full capacity or undefined venue details are displayed as unavailable.
- Such events remain visible for awareness but are restricted from booking.		 POST /api/book-event (shared logic)
- Validates that event has available capacity and defined venue location (latitude/longitude).
- Returns an error if event is fully booked or venue is unassigned.
- Prevents proceeding to booking step for restricted events.
Tracking Booked Events - Users can view a complete list of their booked events.
- Includes event name, date, time, venue, theme, and number of tickets.
- Booking data persists and is retrieved after login.		 GET /api/booked-events/:email
- Complex JOIN query on Booked, Events, Location, and Users tables.
- Filters on user email.
- Returns a detailed JSON of all booked events for rendering in user profile.
- Ensures that data integrity is maintained across login sessions.

Technical Highlight

Category Details
Input Validation - Each endpoint includes input validation for user-provided data.
- Example: Checking if username is empty in PUT /api/username/:email or ensuring valid eventId in POST /api/book-event.
Error Handling - Robust error handling ensures that database errors, invalid inputs, or unforeseen issues are gracefully managed.
- Meaningful HTTP response codes are used (e.g., 404 Not Found, 400 Bad Request, 500 Internal Server Error).
Dynamic Updates - Real-time updates for event capacities.
- User bookings enhancing the seamlessness of the application workflow.

Technical Framework Summary

Category Details
Frontend - React ensures an interactive and responsive user interface.
- Features include personalized greetings, event browsing, filtering, and booking.
Backend - Express facilitates robust API endpoints.
- Connects the frontend with the SQLite database for real-time data fetching and updates.
Database Operations - SQLite handles efficient storage and retrieval of user, event, and booking data.
- Operations include SELECT (retrieving data), INSERT (new records), and UPDATE (modifying existing records) for synchronized functionality.

Application URLs

Pages URL
* User Profile
(Different for different users)		 http://localhost:5173/[email protected]

User profile is separate for each user like

http://localhost:5173/email?user=Email

Email is the user email given during the time of signup.

Application UI

Image Description
Image description Page a new user sees.
Image description Page after editing profile, changing names, and booking events.
Image description Images showing edit user profile functionality.
Image description Images showing a list of all available events.
Image description Images showing a dialogue box for payment confirmation for event booking.
Image description Images showing search by event feature.
Image description Images showing filter by theme feature.

Admin Module Features (Backend Endpoints, URLs and Application UI)

Module Features Backend Endpoint(s)
Create New Event - Admin creates events by entering name, description, theme, date, time, capacity, and ticket price via a form.
- Created events are shown in both admin and user dashboards.		 POST /api/events
• Validates required fields (e.g., name, max_capacity, ticket_price, event_datetime).
• Inserts data into Events table.
• Returns new event ID with error handling.
Edit Event Details - Admin can modify existing event info via "Edit" button.
- Changes reflect dynamically across all dashboards.		 PUT /api/events/:id
• Updates fields in Events table (e.g., name, theme, datetime, etc.).
• Simultaneously updates related venue info in Location table.
• Includes relational checks and error handling.
Venue Management - Admin assigns venues to events.
- Venue details include name and coordinates for map integration.
- Edits are reflected system-wide.		 PUT /api/venues/:id
• Updates venue_name, latitude, and longitude in Location table.
• Validates input and ensures event-venue linkage.
• Handles input errors and relational integrity.
Dashboard Metrics - Admin sees metrics: total/average income, capacity % per event.
- Events filterable by theme or search bar.
- Admin views attendee details and sends reminders.		 GET /getevents
• Fetches event data for metric calculations.
GET /getbooked
• Retrieves attendee details by event_id.
• Reminder emails triggered through confirmation modal.

Frontend Functionalities

Feature Details
Create Event - Admins use a form to enter event details such as name, theme, description, date, and capacity.
- React handles form submission and sends data via POST requests to the backend.
Edit Event and Venue - Event and venue details are editable using "Edit" buttons, dynamically updating fields based on admin input.
- Frontend sends PUT requests to backend endpoints to persist changes.
Revenue and Metrics Dashboard - The admin dashboard calculates metrics like total revenue, average income, and availability percentage using React state variables and backend API responses.
- Filtering is implemented with search bars and checkboxes.
Attendee Tracking and Reminder - Admins input event IDs to view attendee lists and booking details.
- Clicking "Send Reminder" triggers a modal confirmation window, where reminders are sent to attendees via email using backend logic.

Application URLs

Pages URL
Admin’s Event and Venue management page http://localhost:5174/admindashboard
Admin’s vendor and Attendee Management page http://localhost:5174/vendor-att

Application UI

Image Description
Image description Create Event Form.
Image description Event list table.
Image description Event form loaded with event data to be edited.
Image description Venue list table.
Image description Venue list table with edit venue form.
Image description Vendor Dashboard.
Image description Vendor Dashboard’s search event by name functionality.
Image description Vendor Dashboard’s filter by theme functionality.
Image description Attendee management Tracker list.
Image description Attendee management Tracker list’s email reminder dialogue box.

SQLite Integration with Spring Boot

SQLite integration with Spring Boot necessitated the implementation of custom dialects and entity mappings due to SQLite's limited compatibility with Spring's JPA. To handle this, the following steps were taken:

Feature Details
Custom Dialects - A custom SQLite dialect was created to enable seamless communication between the Spring Boot application and the SQLite database.
- Overcomes limitations in handling constraints and field types.
Service Layers - Services such as EventService and BookedService fetch, process, and transform entity data into DTOs (Data Transfer Objects).
- Facilitates efficient frontend communication via APIs.
Entity and Repository Management - Entities were explicitly mapped to database tables using @EntityScan annotations.
- Repositories (EventRepository, BookedRepository) encapsulate database operations like findAll, save, and update.
Frontend-Backend Communication - React fetches parsed values from the Spring Boot backend running on <http://localhost:8080>.
- API responses dynamically render metrics, attendee data, and venue details on the admin page.

ER Diagram

An Entity Relationship Diagram for visual representation of the data structure and relationships within the database.

Database Schema

Table Name Attribute Properties
Admin Id Integer, primary key, auto-incremented. Unique identifier for each admin.
Email Text, unique, not null. Stores the admin's email address.
Password Text, not null. Stores the admin's password.
Users Id Integer, primary key, auto-incremented. Unique identifier for each user.
Email Text, not null. Stores the user's email address.
Password Text, not null. Stores the user's password.
Username Text, default value ___. Stores the user's display name.
Events eventid Integer, primary key, auto-incremented. Unique identifier for each event.
name Text, not null. Stores the name of the event.
theme Text. Stores the theme of the event.
description Text. Stores details about the event.
max_capacity Integer, not null. Maximum attendees the event can accommodate.
current_capacity Integer, default value 0. Tracks the current number of attendees.
ticket_price Integer, not null. Stores the ticket price for the event.
event_datetime Datetime, not null. Records the scheduled date and time for the event.
Booked id Integer, primary key, auto-incremented. Unique identifier for each booking.
useremail_id Integer, foreign key referencing Users.Id, on delete cascade. Links the booking to the user who made it.
event_booked Integer, foreign key referencing Events.eventid, on delete cascade. Links the booking to a specific event.
tickets_booked Integer, not null, default value 1. Records the number of tickets booked.
Email Text. Stores the email address associated with the booking.
Location venueid Integer, primary key, auto-incremented. Unique identifier for each venue.
event_name Varchar(255). Stores the name of the event hosted at the venue.
event_theme Varchar(255). Stores the theme of the event hosted at the venue.
venue_name Varchar(255), default value 'unassigned'. Stores the venue name.
event_datetime Datetime. Records the date and time of the event at the venue.
longitude Real, default value 0.000000. Geographical longitude of the venue.
latitude Real, default value 0.000000. Geographical latitude of the venue.
eventid Integer, foreign key referencing Events.eventid. Links the venue to the event.

Image description

Relationship, Logic and Usage

Relationship Logic Usage
Users → Booked (One-to-Many) - A user can book multiple events.
- Relationship established via useremail_id foreign key in Booked, referencing Users.Id.		 - When a user books an event, a new entry is created in Booked, linking useremail_id and event_booked.
- Stores the number of tickets (tickets_booked) and associated email.
Events → Booked (One-to-Many) - An event can have multiple bookings.
- Relationship established via event_booked foreign key in Booked, referencing Events.eventid.		 - When an event is booked, current_capacity in Events is updated.
- A new row is created in Booked linking the event's ID.
Events → Location (One-to-One) - Each event is assigned a specific venue.
- Relationship established via eventid foreign key in Location, referencing Events.eventid.		 - The app associates each event with a venue.
- Venue details (name, coordinates, datetime) are stored in the Location table.

Flow Documentation

Flow Documentation for User and Admin.

1. User Interaction Flow

Feature Action Outcome Endpoint
User Signup User visits the signup page and enters email and password.
Confirms password for accuracy.		 Backend validates input and checks for duplicate emails.
Password is hashed using BCrypt.
User is redirected to the login page.		 POST /api/auth/signup
User Login User enters email and password and submits login form. Backend verifies credentials.
On success, a JWT token is generated and stored.
User is redirected to dashboard.		 POST /api/auth/login
Browsing Events User browses events on main dashboard.
Can filter events by name or theme.		 Events displayed with details: name, theme, description, datetime, venue, price, and availability. GET /api/events
Booking an Event User clicks "Book Event" and confirms booking. Event added to user's "Confirmed Events".
Multiple tickets can be booked.		 POST /api/book-event
Viewing Booked Events User navigates to profile page. List of booked events with name, theme, date, venue, and number of tickets. GET /api/booked-events/:email

2. Admin Interaction Flow

Feature Action Outcome Endpoint
Admin Login Admin enters credentials on login page. JWT token generated upon successful login.
Redirected to dashboard.		 POST /api/auth/admin-login
Creating New Events Admin fills form with event details. Event saved and visible to users and admins. POST /api/events
Editing Events Admin clicks "Edit" and modifies details. Database updated and UI reflects changes. PUT /api/events/:id
Venue Management Admin assigns or edits venue details. Venue updates reflected in linked Location table. PUT /api/venues/:id
Vendor & Attendee Dashboard Admin views revenue, ticket stats, and attendee details.
Can send email reminders.		 Metrics and attendee info dynamically shown.
Email reminder logic triggered.		 Fetch metrics: GET /getevents
Fetch attendee list: GET /getbooked

Dockerization

Service Purpose Features
ASP.NET Core (asp) Hosts ASP.NET backend. - Uses mcr.microsoft.com/dotnet/sdk for build.
- Publishes to a lightweight runtime image.
- Exposes port 5274.
React User Interface (react) Hosts the frontend user interface. - Installs Node.js dependencies, copies source, sets environment.
- Exposes ports 5173 (frontend) and 3001 (backend).
React Admin Interface (react-admin) Admin-facing frontend. - Exposes ports 5174 (frontend) and 3002 (backend).
Spring Boot Backend (spring) Hosts admin functionality. - Uses Maven with SQLite integration.
- Exposes port 8080.

Visual Overview

Image Description
Image description Docker Compose build process.
Image description Docker images after build (Docker UI).
Image description Docker images after build (Terminal).
Image description Running containers with port mappings.

Application Deployment & Usage Guide

Usage Option 1: Dockerized Deployment

  • Navigate to the project root: 
docker-compose up --build
Enter fullscreen mode Exit fullscreen mode

  • Builds and starts:

    • ASP.NET backend
    • Node.js backend
    • Spring Boot backend
    • React UIs

Usage Option 2: Manual Deployment

Terminal 1: ASP.NET

cd asp
dotnet run
Enter fullscreen mode Exit fullscreen mode

Ensure you update appsettings.json connection string to:

"DefaultConnection": "Data Source=../Backend/EventManagement.db"
Enter fullscreen mode Exit fullscreen mode

Terminal 2: React Frontend

cd react
npm run dev
Enter fullscreen mode Exit fullscreen mode

Terminal 3: React Backend

cd react
node server.js
Enter fullscreen mode Exit fullscreen mode

Terminal 4: React Admin Frontend

cd reactadmin
npm run dev
Enter fullscreen mode Exit fullscreen mode

Terminal 5: React Admin Backend

cd reactadmin
node server.js
Enter fullscreen mode Exit fullscreen mode

Terminal 6: Spring Boot Backend

cd spring
mvn spring-boot:run
Enter fullscreen mode Exit fullscreen mode

Usage Option 3: Hybrid Deployment

  • Build selected images (React, Admin, ASP): 
docker-compose up react-app react-admin asp-app --build
Enter fullscreen mode Exit fullscreen mode
  • Run Spring Boot manually: 
cd spring
mvn spring-boot:run
Enter fullscreen mode Exit fullscreen mode

Top comments (0)