Software Design
High-Level Architecture Diagram
Description:
The system uses a client server architecture. The Next.js frontend handles page rendering and user interaction. Requests are sent to an Express.js REST API where business logic and validation are performed. Prisma is used to interact with a PostgreSQL database. Authentication and third party services are handled at the API level, and the application is deployed using Docker behind Nginx.
Technologies
Frontend
Next.js is used for server side rendering and routing. TypeScript improves code safety. Tailwind CSS is used for responsive styling, and Axios handles API requests.
Backend
Express.js provides REST APIs. TypeScript is used for type safety, Zod validates request data, and Prisma manages database access.
Database
PostgreSQL stores all persistent application data.
DevOps & Deployment
Docker and Docker Compose are used for containerization. Nginx acts as a reverse proxy, and GitHub Actions handles CI/CD.
Package Management
npm is used to manage dependencies.
UML Diagram
Sequence Diagrams
User Access & Navigation (US 1.01, 1.02, 1.03)
Description:
Shows how users access the site, switch languages, and navigate to external pages.
Ticket Purchase & Delivery (US 2.01, 2.02, 2.03)
Description:
Shows ticket selection, payment processing, and ticket delivery by email.
Author Directory Browse & Filter (US 3.01, 3.02, 3.03, 3.04)
Description:
Shows browsing, filtering authors, and viewing author profiles.
Events Discovery & Details (US 4.01, 4.02, 4.03, 4.04)
Description:
Shows how users find events, view details, and access event pages.
Admin & Content Management + Restricted Resources (US 7.01–7.11, US 8.01)
Description:
Shows admin login, content management, and educator access to restricted resources.
Low-Fidelity Wireframes
Description:
Basic layouts showing structure, navigation, and user flow.
You may open the image in a new tab.