# 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

### 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

### 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

Complete database schema showing all entities and relationships

## User Interface - Desktop Views

Home Page

Login Page

Registration

EV Models List

Seminars

User Profile

## Admin Dashboard - Management Interface

Seminar List

Add Seminar

Vehicles List

Add Vehicle

Registrations

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

#### Email Notifications:

✉ Confirmation

Immediate registration confirmation

⏰ Reminder

Day before seminar

❌ Cancellation

When unregistering

🎯 Promotion

Waitlist to confirmed

## 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+ 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