This application was created for the purposes of ESN.
The Event Registration System (ERS) simplifies event management for organizations. Designed to streamline workflows for admins and users alike, the system includes features such as:
- Event Creation and Management: Admins can create events, manage participants, and handle registrations.
- User Registration and Participation: Users can register for events, view details, and join activities effortlessly.
- Automated PDF Invoices: Generate invoices with QR codes for payment.
- Payment Tracking: Users can upload payment confirmations, ensuring easier financial management.
- Organization Management: Assign users to specific organizations and manage their access in applications accordingly.
The Main Focus based on needs of ESN organisation and its alignment with need for Event Registration System. This includes:
- High-Level Description of the Business Problem: Current Event Registration System that is in use is deprecated and hard to use. This old system is built on top of Drupal CMS that is kept without updates.
- The Big Picture: "The Big Picture" or the main goal is to create ERS platform in modern, easily accessible technologies, so this project can be kept and updated.
- Use Case Design: Use Case for this project is to create platform for management with easy control regarding creation and event management, but also easy use for members that will participate on these events.
The database layer is powered by PostgreSQL, relational database management system. The structure includes:
- Database migrations for version control and schema updates.
- Support for advanced features like indexing, triggers, and JSON data types for flexibility and scalability.
The Document API utilizes Redis as a fast and in-memory data structure store, is integrated to help with document generation.
The backend is developed using Nest.js, a progressive Node.js framework designed for building efficient, reliable, and scalable server-side applications. Its modular architecture supports maintainability and scalability, enabling the seamless integration of features such as:
- RESTful APIs
- Document generation
- A structured library system for shared configurations, utilities, and core modules.
Next.js is a React framework for building full-stack web applications. React Components are used to build user interfaces, and Next.js for additional features and optimizations.
Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, etc...
The project is organized into distinct directories to maintain clarity and ensure modular development. Below is a detailed breakdown of the structure:
.
├── backend
│ ├── apps
│ │ ├── api
│ │ └── documents
│ ├── database
│ │ └── migrations
│ ├── libs
│ │ ├── config
│ │ ├── modules
│ │ └── utilities
│ └── storage
├── database
├── frontend
│ ├── public
│ │ ├── icons
│ │ └── screenshots
│ └── src
│ ├── app
│ │ ├── (authorized)
│ │ │ ├── account
│ │ │ ├── event
│ │ │ │ ├── [id]
│ │ │ │ └── manage
│ │ │ │ └── [id]
│ │ │ ├── manage-events
│ │ │ ├── manage-organizations
│ │ │ ├── organization
│ │ │ │ └── [id]
│ │ │ │ └── members
│ │ │ └── sent-applications
│ │ ├── (unauthorized)
│ │ │ ├── login
│ │ │ └── registration
│ │ ├── privacy-policy
│ │ └── terms-and-conditions
│ ├── components
│ └── utils
├── nginx
│ └── conf.d
└── readme
The backend is built using Nest.js, structured into two primary services:
- API Service: This service handles all user requests, serving as the main interface for interacting with the system.
- Document Service: Dedicated to managing document generation, including invoice creation.
For file management, the system utilizes the application’s local storage to securely save user-uploaded files, such as event photos and payment confirmations.
The frontend utilizes Next.js, a React-based framework that provides server-side rendering (SSR) and static site generation (SSG) for enhanced performance and SEO optimization. Key features include:
- A modular design with authorized and unauthorized routes.
- Dynamic and static pages, such as event details, account management, and registration.
- Reusable components to streamline development and ensure consistency across the application.
- A modern and responsive user interface built with React and Mantine.
The project employs NGINX as a reverse proxy. It manages incoming traffic, ensuring security and optimized
performance.
For easier configuration NGINX is included inside docker-compose.nginx.yml, which automatically creates configuration
for the whole application based on .env variables.
In combination with Certbot which adds benefits of HTTPS certificate and utilizes automatic certificate renewals.
This section guides you through setting up the project for local development, including configuring the backend, database, and frontend.
docker run --name postgres-db -e POSTGRES_USER=user -e POSTGRES_PASSWORD=password -e POSTGRES_DB=database -p 5432:5432 -d postgres:15docker run --name redis -p 6379:6379 -d redis:7For this step its required to have running Postgres database and Redis.
Create a .env file in the backend directory with the following content to set up the local environment:
# .env - inside /backend folder
DB_HOST=127.0.0.1
DB_PORT=5432
DB_NAME=database
DB_USER=user
DB_PASS=password
PORT_API=4000
JWT_SECRET=secret
BASE_URL=http://localhost:4000
WEB_DOMAIN=localhost
NODE_ENV=development
REDIS_HOST=127.0.0.1
REDIS_PORT=6379# Inside /backend folder
# Install dependencies
pnpm start:dev
# Database migrations
pnpm migration:run
# Start local development
pnpm installFor this step its required to have running Postgres database and Redis.
# .env - inside /frontend folder
NEXT_PUBLIC_API_DOMAIN=http://localhost:4000
PORT_FE=3000# Inside /frontend folder
# Install dependencies
yarn install
# Start local development
yarn dev# .env - next to docker-compose.local.yml
### General
NODE_ENV=production
PORT_FRONTEND=3000
PORT_BACKEND=4000
WEB_DOMAIN="http://localhost:${PORT_FRONTEND}"
API_DOMAIN="http://localhost:${PORT_BACKEND}"
### APP 1
BASE_URL="${API_DOMAIN}"
PORT_API="${PORT_BACKEND}"
JWT_SECRET=secret
### FRONTEND
NEXT_PUBLIC_API_DOMAIN="${API_DOMAIN}"
PORT_FE="${PORT_FRONTEND}"
### DATABASE
DB_HOST=database
DB_PORT=5432
DB_NAME=database
DB_USER=user
DB_PASS=password
### Redis
REDIS_HOST=redis
REDIS_PORT=6379For production deployment the .env file can be shared used for both WITH or WITHOUT NGINX configuration.
# .env - next to docker-compose.yml
### General
NODE_ENV=production
WEB_DOMAIN=example.com
API_DOMAIN=api.example.com
### APP 1
BASE_URL="${API_DOMAIN}"
PORT_API=4000
JWT_SECRET=secret
### FRONTEND
NEXT_PUBLIC_API_DOMAIN="${API_DOMAIN}"
PORT_FE=3000
### DATABASE
# DB_HOST - linked to docker container with name "database"
DB_HOST=database
DB_PORT=5432
DB_NAME=database
DB_USER=user
DB_PASS=password
### Redis
REDIS_HOST=redis
REDIS_PORT=6379# Build images
docker compose -f docker-compose.yml build
# Start images in detached mode
docker compose -f docker-compose.yml up -d| Šimon Slabý | Petr Vavřínek | Petr Mlejnek | Ondřej Kmínek |
|---|---|---|---|
 |
 |
 |
|
  |
|
|
|
The roadmap includes future enhancements such as:
- Create statistics for events.
- Events and Users exports into table sheets.