EV Seminar Registration System

Advanced Information Systems Development

SEHS4701

Lee Cheuk Him / 24076812S
Chan Suet Ying / 24064653S
Sin Cheuk Wai / 24063411S
Lee Men Ngai / 24064468S
Ng Ho Yin / 24042206S
HO Hoi Kit / 24060170S

Project Overview

Objective

Design comprehensive web-based EV seminar registration platform

Scope

User registration, vehicle browsing, seminar discovery, admin dashboard

Impact

Streamline event management and improve user engagement

✓ User Authentication ✓ Real-time Registration ✓ Email Notifications ✓ Admin Dashboard

Problem Statement & Motivation

Current Challenges

  • Manual seminar registration process
  • No digital tracking of attendees
  • Lack of real-time availability updates
  • Paper-based or spreadsheet management

Our Solution

  • Automated registration system
  • Real-time capacity tracking
  • Instant email confirmations
  • Comprehensive admin controls
📊

Better Analytics: Data-driven insights

⚡

Efficiency: Reduced manual workload

😊

Experience: Seamless user journey

System Architecture Overview

Frontend Layer

Next.js 16 • React 19 • TypeScript

Tailwind CSS • Responsive Design

RESTful API / JSON

Backend Layer

Spring Boot 3.4 • Java 21 • MySQL

RESTful API • Security • Async Tasks

Database: MySQL 8.0+ with 5 core entities

Customer • Vehicle • Seminar • Registration • Verification Code

Technology Stack - Frontend

Framework

Next.js 16

React-based with SSR & SSG capabilities

R

UI Library

React 19

Modern hooks & functional components

Styling

Tailwind CSS v4

Utility-first responsive design

Language

TypeScript 5

Type safety & better developer experience

HTTP Client

Axios 1.15

API communication & data fetching

Context API

Auth, Language, Theme

Client-side state management

Pages Implemented:

Landing Register Login Vehicles Seminars My Registrations Profile Admin Dashboard

Technology Stack - Backend

Framework

Spring Boot 3.4

Enterprise Java framework

J

Language

Java 21

Latest LTS version

Database

MySQL 8.0+

Relational database

Security

Spring Security

Authentication & authorization

ORM

Spring Data JPA

Database abstraction layer

Email Service

Spring Mail + Gmail SMTP

Transactional emails

API Features:

20+ Endpoints CORS Support Async Processing Global Exception Handler Data Validation

Database Design - Entity Relationship Diagram

Entity Relationship Diagram

Complete database schema showing all entities and relationships

User Interface - Desktop Views

Home Page - Desktop

Home Page

Login - Desktop

Login Page

Register - Desktop

Registration

EV Models List - Desktop

EV Models List

Seminars - Desktop

Seminars

Profile - Desktop

User Profile

Admin Dashboard - Management Interface

Seminar Management - Desktop

Seminar List

Add Seminar - Desktop

Add Seminar

Vehicle Management - Desktop

Vehicles List

Add Vehicle - Desktop

Add Vehicle

Registrations - Desktop

Registrations

Registration Success - Desktop

Confirmation

Key Features - User Perspective

1. User Registration

  • Personal or company account
  • Email verification required
  • Password security
  • 3-step registration flow

2. Browse EV Vehicles

  • Vehicle grid with specs
  • Search and filtering
  • Detailed vehicle pages
  • Model comparisons

3. Discover Seminars

  • Seminar listings with filters
  • Real-time capacity tracking
  • Date & location info
  • Detailed descriptions

4. Register for Seminars

  • One-click registration
  • Confirmation emails
  • Ticket generation
  • Cancellation support

5. User Dashboard

  • View all registrations
  • Access e-tickets
  • Update profile
  • Download confirmations

6. Preferences

  • Language switching
  • Theme preferences
  • Notification settings
  • Account security

Key Features - Admin Perspective

Admin Panel

Secure login & role-based access

Vehicle Management

Create/Edit/Update vehicle listings

Seminar Management

Create events, set capacity, archive

Registration Analytics

View all registrations & statistics

Waitlist Management

Handle capacity overflow & promotion

Email Campaigns

Send confirmations & reminders

Administrator Capabilities:

✓ Full CRUD operations on vehicles ✓ Full CRUD operations on seminars ✓ Export attendee lists ✓ View registration analytics ✓ Manage user accounts ✓ System-wide reports

API Endpoints Summary

Authentication Endpoints

POST /api/auth/register
POST /api/auth/login
POST /api/auth/verify-email

Vehicle Endpoints

GET /api/vehicles
GET /api/vehicles/{id}

Seminar Endpoints

GET /api/seminars
GET /api/seminars/{id}

Registration Endpoints

POST /api/registrations
GET /api/registrations
PUT /api/registrations/{id}/cancel

Admin Endpoints

GET /api/admin/vehicles
POST /api/admin/vehicles
PUT /api/admin/seminars/{id}
GET /api/admin/registrations

User Endpoints

GET /api/customers/profile
20+ Endpoints
6 Resource Types
JSON Format

User Registration Flow

1

Step 1: Account Info

Email, password, phone

Name, customer type

2

Step 2: Preferences

Vehicle interests

Communication prefs

3

Step 3: Verification

Verify email address

Enter 6-digit code

Account Created!

Dashboard accessible

Security Features
  • Bcrypt password hashing
  • Email verification required
  • 6-digit code expiry
  • Input validation
Customer Types
  • Personal (Individual)
  • Company (Organization)
  • Different access levels
  • Bulk registration ready

Seminar Registration Workflow

1

Browse

View available seminars

2

Select

Click Register button

3

Confirm

Review registration

4

Receive

Confirmation email

5

Manage

View in dashboard

6

Cancel

Option to unregister

Security & Best Practices

Authentication

JWT tokens & Spring Security

Password Security

Bcrypt hashing algorithm

Email Verification

6-digit codes with expiry

CORS Configuration

Frontend-backend origin control

Role-Based Access

USER and ADMIN roles

Data Validation

Backend validation for all inputs

Global Error Handler

Meaningful error messages

Secure Credentials

Gmail app-specific passwords

Deployment & Setup

Frontend Setup

Requirements:

  • Node.js 18.18+
  • npm 9+

Installation:

npm install

Run:

npm run dev

Access:

http://localhost:3000

Backend Setup

Requirements:

  • Java 21
  • Maven 3.9+
  • MySQL 8.0+

Database Port:

localhost:3306

Run:

mvn spring-boot:run

Access:

http://localhost:8080

Environment Configuration

Frontend .env.local:

NEXT_PUBLIC_API_URL=http://localhost:8080/api

Backend application.properties:

Gmail SMTP configuration, Database credentials

Database Setup

Pre-seeded with:

✓ 5 EV Vehicles ✓ 5 Seminars ✓ Test Credentials ✓ Admin Account

Challenges & Solutions

Email Delivery

Challenge: Ensuring reliable email delivery

Solution: Gmail SMTP with app-specific passwords & async processing

Capacity Management

Challenge: Handling seminar capacity limits

Solution: Real-time availability tracking & waitlist support

User Experience

Challenge: Intuitive interface design

Solution: Responsive design with Tailwind CSS & multi-language support

System Security

Challenge: Protecting user data

Solution: Multi-layer authentication, encryption, input validation

Scalability

Challenge: Handling growth

Solution: Async email processing, database indexing, stateless API

Cross-origin Requests

Challenge: Frontend-Backend communication

Solution: CORS configuration in Spring Security

Project Achievements & Metrics

Full-Stack Development

Complete application built from scratch

8 Core Pages

Fully functional user interface

20+

20+ API Endpoints

Comprehensive RESTful backend

5+ Database Tables

Relational schema design

Dual User Roles

Customer & Admin functionality

Email System

Automated transactional emails

Code Quality

TypeScript & Java with type safety

Documentation

Setup guides & API docs

Future Enhancements

Payment Integration

Stripe or PayPal for paid seminars

Feedback System

Ratings for completed seminars

Mobile App

React Native for iOS/Android

Advanced Analytics

Comprehensive dashboards & reports

SMS Reminders

Twilio integration for notifications

Multi-Language

Expand i18n support

Social Sharing

Share seminars on social media

Calendar Integration

Sync with Google/Outlook calendars

Conclusion & Project Team

Project Summary

  • ✓ Successfully delivered full-stack EV seminar management system
  • ✓ Modern tech stack with industry best practices
  • ✓ Production-ready architecture
  • ✓ Comprehensive security & scalability measures
  • ✓ User-centric design with admin capabilities

Project Team

👤

Lee Cheuk Him

24076812S

👤

Chan Suet Ying

24064653S

👤

Sin Cheuk Wai

24063411S

👤

Lee Men Ngai

24064468S

👤

Ng Ho Yin

24042206S

👤

HO Hoi Kit

24060170S

Key Outcomes

  • Streamlined event management process
  • Improved user engagement & satisfaction
  • Scalable foundation for future growth
  • Secure, reliable system architecture

Questions?

Thank you for your attention!

1 / 20