Web Systems Programming Project

A comprehensive web systems programming project demonstrating modern web application architecture, consisting of three main components: a NestJS REST API with hexagonal architecture, a Django SSR application with Celery task scheduling, and a React SPA frontend.

Project Structure

web-systems-programming/
├── backend/
│   ├── web-api/          # NestJS REST API with hexagonal architecture
│   └── ssr-app/          # Django SSR application with Celery
└── frontend/
    └── spa/              # React SPA with TypeScript and Vite

Technologies Used

Backend - Web API (NestJS)

• Framework: NestJS 11 (Node.js)
• Architecture: Hexagonal Architecture (Ports & Adapters)
• Database: PostgreSQL
• ORM: TypeORM 0.3
• Validation: class-validator, class-transformer
• Documentation: Swagger/OpenAPI (Swagger UI Express)
• Testing: Jest
• Language: TypeScript 5.7

Backend - SSR App (Django)

• Framework: Django 5.2.7
• Database: PostgreSQL
• Task Queue: Celery with Redis
• Task Scheduling: django-celery-beat
• HTTP Client: Requests
• Server: Gunicorn
• Web Server: Nginx

Frontend - SPA (React)

• Framework: React 19
• Language: TypeScript 5.9
• Build Tool: Vite 7
• Styling: Tailwind CSS 4
• UI Components: Radix UI
• State Management: React Hooks
• Routing: React Router DOM 7
• Table Management: TanStack React Table 8

Project Components

1. Web API (backend/web-api)

A RESTful API implementing CRUD operations for Products, Warehouses, Discounts, and Clients. The API follows hexagonal architecture principles, ensuring separation between domain logic, application services, and infrastructure adapters.

Key Features:

• Hexagonal architecture with clear separation of concerns
• Domain-driven design with rich domain models
• Ports and adapters pattern for dependency inversion
• DTOs for data validation and transfer
• Swagger/OpenAPI documentation with interactive UI
• PostgreSQL database with TypeORM
• CORS enabled for frontend integration
• Seeder module for database population
• Support for relations between entities (products with warehouses, clients, discounts)
• Comprehensive test coverage

2. SSR App (backend/ssr-app)

A Django application providing server-side rendering for discount management. It synchronizes data with the Web API using Celery tasks scheduled with django-celery-beat.

Key Features:

• Server-side rendering with Django templates
• Celery task queue for asynchronous operations
• Scheduled tasks for discount synchronization and cleanup (django-celery-beat)
• Redis as message broker and result backend
• PostgreSQL database
• Management commands for manual task execution
• API endpoints for React integration (JSON preview, CSS serving)
• CORS support for cross-origin requests
• Active discount filtering and display

3. SPA Frontend (frontend/spa)

A modern single-page application built with React and TypeScript, providing an interactive user interface for managing products, warehouses, discounts, and clients.

Key Features:

• Modern React with TypeScript
• Responsive design with Tailwind CSS
• Component-based architecture with Radix UI
• Data tables with TanStack React Table
• API integration with custom hooks
• Modular structure for maintainability

Getting Started

Prerequisites

• Node.js 18+ (for web-api and spa)
• Python 3.10+ (for ssr-app)
• PostgreSQL 12+
• Redis (for Celery)

Quick Start

1. Clone the repository

git clone <repository-url>
cd web-systems-programming

2. Set up Web API

cd backend/web-api
npm install
# Create .env file with database credentials (see backend/web-api/README.md)
# Example .env:
# POSTGRES_HOST=localhost
# POSTGRES_PORT=5432
# POSTGRES_USER=postgres
# POSTGRES_PASSWORD=your_password
# POSTGRES_DB=web_systems_db
# NODE_ENV=development
# PORT=3000
npm run start:dev

3. Set up SSR App

cd backend/ssr-app
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt
# Create .env file with your configuration (see backend/ssr-app/README.md)
# Example .env:
# DJANGO_SECRET_KEY=your-secret-key-here
# DEBUG=True
# POSTGRES_HOST=localhost
# POSTGRES_PORT=5432
# POSTGRES_USER=postgres
# POSTGRES_PASSWORD=your_password
# POSTGRES_DB=web_systems_db
# EXTERNAL_API_BASE_URL=http://localhost:3000/api
# EXTERNAL_API_TIMEOUT=30
# CELERY_BROKER_URL=redis://localhost:6379/0
# CELERY_RESULT_BACKEND=redis://localhost:6379/0
python manage.py migrate
python manage.py runserver

4. Set up Frontend SPA

cd frontend/spa
npm install
# Create .env file with API URLs (see frontend/spa/README.md)
# Example .env:
# VITE_API_BASE_URL=http://localhost:3000/api
# VITE_SSR_API_BASE_URL=http://localhost:8000
npm run dev

5. Start Celery Worker (for SSR app)

cd backend/ssr-app
celery -A config.celery_app worker --loglevel=info

6. Start Celery Beat (for scheduled tasks)

cd backend/ssr-app
celery -A config.celery_app beat --loglevel=info

Documentation

For detailed documentation of each component, see:

• Web API README
• SSR App README
• SPA Frontend README

Architecture Highlights

Hexagonal Architecture in Web API

The Web API follows hexagonal architecture (ports and adapters pattern), which provides:

• Separation of concerns: Domain, Application, and Infrastructure layers are clearly separated
• Framework independence: Core business logic is decoupled from NestJS framework details
• Testability: Each layer can be tested independently with mocks
• Flexibility: Easy to swap adapters (e.g., database, external services) without affecting business logic

Each module (Products, Warehouses, Discounts, Clients) is structured as:

module/
├── domain/           # Business logic and domain models
├── application/      # Application services
└── adapters/
    ├── api/          # REST controllers and DTOs
    └── persistence/  # TypeORM repositories

License

This project is licensed under the MIT License.