Skip to main content

​
Introduction to PaparcApp

PaparcApp is a full-stack web application designed for comprehensive airport parking management. Developed as a final degree project for the Web Application Development program, it provides an end-to-end solution for handling parking reservations, customer management, and operational workflows.
Live Demo: The application is deployed at https://paparcapp-azby.onrender.com

​
What is PaparcApp?

PaparcApp streamlines the entire parking lifecycle for airport parking facilities:
  • Customer-facing booking system with real-time price calculation
  • Administrative dashboard for managing entries, exits, and reservations
  • Dynamic pricing engine based on duration, vehicle type, and services
  • Automated email notifications for confirmations, check-ins, and invoicing
  • Complete reservation lifecycle from pending to in-progress to completed

​
Key Features

​
For Customers

Multi-Step Booking

Intuitive reservation form with date selection, vehicle details, service choices, and real-time pricing

User Profile

Manage personal data, virtual garage of vehicles, active reservations, and booking history

Dual Authentication

Classic email/password login with bcrypt hashing plus social login via Google and Facebook

Guest Bookings

Walk-in customers can book without registration (NO-REGISTRADO type)

​
For Administrators

Interactive Dashboard

Calendar-based view with daily entries/exits, statistics, and color-coded reservation states

Reservation Management

Complete lifecycle control: start stays, finalize with payment, cancel bookings, and manage photos

Photo Evidence System

Mandatory minimum 5 photos before starting a stay, with gallery viewing and upload capabilities

Advanced Filtering

Search reservations by status, date range, customer name, or license plate with pagination

​
Core Capabilities

FeatureDescription
Dynamic PricingAutomatic calculation based on day ranges × vehicle coefficient + additional services
Three Service TiersECO (economical), TRANSFER (minibus), MEET (premium terminal service)
Vehicle TypesSupport for cars (×1.0), motorcycles (×0.5), vans (×1.25), caravans (×2.0), special (×1.5)
Additional ServicesCatalog of extras: car washes, ITV inspection, EV charging, refueling, maintenance
Subscription PlansQuarterly, semiannual, and annual contracts with discounts
Email AutomationConfirmation, check-in, modification, and invoice emails via n8n webhooks
Responsive DesignMobile and desktop optimized with Bootstrap components

​
Architecture Overview

PaparcApp follows an MVC (Model-View-Controller) pattern with additional service layers: 
┌─────────────────────────────────────────────────────┐
│                    CLIENTE (Browser)                 │
│  EJS Templates · jQuery UI · SweetAlert2 · Firebase │
└───────────────────────┬─────────────────────────────┘
                        │ HTTP / HTTPS
┌───────────────────────▼─────────────────────────────┐
│                   EXPRESS.JS SERVER                  │
│                                                     │
│  ┌─────────┐  ┌────────────┐  ┌──────────────────┐  │
│  │ Routes  │→ │ Middleware │→ │   Controllers    │  │
│  │         │  │ (auth,     │  │ (main, auth,     │  │
│  │ index   │  │  session,  │  │  admin, api)     │  │
│  │ users   │  │  locals)   │  │                  │  │
│  │ admin   │  │            │  │                  │  │
│  │ api     │  │            │  │                  │  │
│  └─────────┘  └────────────┘  └────────┬─────────┘  │
│                                        │             │
│  ┌──────────────────┐  ┌───────────────▼──────────┐  │
│  │    Services      │  │     Models (DAOs)        │  │
│  │ pricingService   │  │ customer-dao             │  │
│  │ notificationSvc  │  │ reservation-dao          │  │
│  │                  │  │ vehicle-dao              │  │
│  │                  │  │ pricing-dao              │  │
│  │                  │  │ service-catalog-dao      │  │
│  └──────────────────┘  └───────────────┬──────────┘  │
└────────────────────────────────────────┼─────────────┘
                                         │ SQL (pg Pool)
┌────────────────────────────────────────▼─────────────┐
│              PostgreSQL (Neon.tech)                   │
│  13 tablas · Constraints · Índices · Datos iniciales │
└──────────────────────────────────────────────────────┘

​
Technology Stack

​
Backend

  • Node.js 18+ - JavaScript runtime environment
  • Express 4.x - Web framework for routing and middleware
  • EJS - Server-side template rendering
  • PostgreSQL 16 - Relational database with 13 tables
  • bcrypt - Password hashing (10 salt rounds)
  • express-session - Secure session management
  • pg (node-postgres) - PostgreSQL driver with connection pooling

​
Frontend

  • HTML5/CSS3 - Custom styling and structure
  • JavaScript ES6+ - Client-side logic
  • jQuery UI - Datepicker for admin calendar
  • SweetAlert2 - Interactive alerts and modals
  • Firebase SDK - Social authentication (Google/Facebook)
  • Bootstrap Icons - Iconography

​
Infrastructure

  • Render - Node.js server hosting and deployment
  • Neon.tech - Serverless PostgreSQL cloud hosting
  • n8n - Email automation workflow engine

​
Database Architecture

The system uses 13 interconnected tables organized in three layers:
  • customer - System users (ADMIN, REGISTRADO, NO-REGISTRADO)
  • vehicle - Registered vehicles with unique license plates
  • vehicle_coefficient - Vehicle type multipliers (TURISMO, MOTO, FURGONETA, CARAVANA, ESPECIAL)
  • main_service - Primary services (ECO, TRANSFER, MEET)
  • additional_service - Extra services catalog
  • service_rate - Pricing tiers by day ranges
  • contract_plan - Subscription plans
  • reservation - Bookings with complete lifecycle
  • contract - Active customer subscriptions
  • photo_evidence - Vehicle condition photos (minimum 5 required)
  • notification - Email communication log
  • customer_vehicle - N:M relationship (virtual garage)
  • reservation_additional_service - N:M relationship (extras per booking)

​
Who Should Use PaparcApp?

Airport Parking Operators

Manage daily operations with an integrated booking and check-in/check-out system

Parking Facility Managers

Track revenue, monitor occupancy, and analyze customer patterns

Developers & Students

Learn from a complete full-stack application with modern architecture patterns

​
Reservation Lifecycle

Reservations follow a strict state machine with validation at each transition:
1

PENDIENTE (Pending)

Reservation created by customer or admin. Can be edited or canceled.
2

EN CURSO (In Progress)

Customer arrived, minimum 5 photos uploaded, parking spot assigned. Entry date locked.
3

FINALIZADA (Completed)

Stay ended, payment method recorded, invoice email sent. Reservation archived.
State transitions enforce business rules via CHECK constraints: parking spot required for IN PROGRESS/COMPLETED, payment mandatory before finalization, exit date must be after entry date.

​
Pricing Formula

The dynamic pricing engine uses an in-memory cached Singleton pattern: 
Total Price = (daily_rate × days × vehicle_coefficient) + Σ additional_services
Courtesy Period: First 2 hours past a full day are not charged as an extra day.

​
Example Calculation

// 7 days with ECO service (4-10 day tier = €8/day)
// Vehicle: TURISMO (×1.0)
// No additional services

Price = 8.00 × 7 × 1.0 + 0 = €56.00

​
Security Features

  • Password Hashing: bcrypt with 10 salt rounds
  • Secure Sessions: HTTP-only cookies with 1-hour expiration
  • SQL Injection Prevention: All queries use parameterized statements (1,1, 2…)
  • Server-Side Validation: Price recalculation on backend to prevent client manipulation
  • Role-Based Access: Middleware guards for user/admin routes
  • HTTPS in Production: Trust proxy enabled for Render deployment

​
Next Steps

Quick Start

Get PaparcApp running locally in 5 minutes

Installation Guide

Detailed setup with prerequisites and database configuration
Development Team: Javier Cabrera Miranda, Rafael Medina Quelle, Hamza SatoriLicense: Open source for educational/research purposes. Commercial use reserved to authors.

Build docs developers (and LLMs) love

Get started for freeTalk to us