Skip to content

SabineU/booking-flow-platform-fullstack

BranchesTags

Repository files navigation

🚀 Booking Flow Platform – Full Stack

A full‑stack skip hire booking application built with the PERN stack (PostgreSQL, Express, React, Node.js), TypeScript, and comprehensive QA test automation.

CI

🎯 Overview

This project is a fully‑functional skip booking flow that demonstrates end‑to‑end software delivery:

  • Frontend – Responsive React application with Vite and TypeScript.
  • Backend – Node.js/Express REST API with TypeScript and Zod validation.
  • Database – PostgreSQL with relational schema and seed data.
  • Testing – Vitest (unit), Supertest (integration), Playwright (E2E) with Allure reports.
  • CI/CD – GitHub Actions + CircleCI pipelines for testing and deployment.
  • Deployment – Frontend on Vercel, backend on Render, database on Render.
  • Containerization – Full Docker Compose setup for one‑command local development.

📁 Project Structure

booking-flow-platform-fullstack/
├── .github/workflows/                       # GitHub Actions CI
├── .circleci/                               # CircleCI config
├── backend/ # Express API + PostgreSQL
│ ├── src/
│ │ ├── db/ # Migrations, seeds, connection pool
│ │ ├── middleware/ # Error handling, validation, CORS
│ │ ├── routes/ # API endpoints
│ │ ├── services/ # Business logic
│ │ ├── utils/ # AppError, asyncHandler
│ │ ├── validation/ # Zod schemas
│ │ └── server.ts # Entry point
│ └── Dockerfile
├── frontend/ # React + Vite
│ ├── e2e/ # Playwright E2E tests (POM)
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── hooks/ # Custom hooks for API calls
│ │ ├── utils/ # Validation, price calculation
│ │ └── App.tsx # Main application
│ └── Dockerfile
├── docker-compose.yml # Full‑stack Docker orchestration
└── README.md

🛠️ Tech Stack

Layer Technology
Frontend React 19, TypeScript, Vite, React Router
Backend Node.js, Express, TypeScript, Zod
Database PostgreSQL 17
Testing Vitest, React Testing Library, Supertest, Playwright, Allure
CI/CD GitHub Actions, CircleCI
Deployment Vercel (frontend), Render (backend + database)
Containerization Docker, Docker Compose

⚙️ Setup & Local Development

Prerequisites

  • Node.js ≥ 20
  • PostgreSQL 18 (local installation or Docker)

1. Clone & Install

git clone https://github.com/SabineU/booking-flow-platform-fullstack.git
cd booking-flow-platform-fullstack
npm install          # installs root + workspace dependencies

2. Database Setup

# Create the database and user (locally)
createdb booking_flow_db
psql -c "CREATE USER booking_app_user WITH PASSWORD 'your_password';"
psql -c "GRANT ALL PRIVILEGES ON DATABASE booking_flow_db TO booking_app_user"
psql -d booking_flow_db -c "GRANT ALL ON SCHEMA public TO booking_app_user;"

3. Configure Environment Variables

Copy the example file:

cp backend/.env.example backend/.env

Edit backend/.env:

DB_HOST=localhost
DB_PORT=5432
DB_NAME=booking_flow_db
DB_USER=booking_app_user
DB_PASSWORD=your_password

4. Run Migrations & Seeds

cd backend
npm run db:migrate

5. Start Both Servers

# Terminal 1 – backend
cd backend
npm run dev

# Terminal 2 – frontend
cd frontend
npm run dev

Open: [http://localhost:5173] (frontend) and [http://localhost:5000/api/]health (backend).

🐳 Docker Quick Start (Full Stack)

No local PostgreSQL or Node.js installation required!

docker compose up --build

The app will be available at [http://localhost:3000]. Backend API at [http://localhost:5000/api/health].

Note: The Docker environment uses an internal database, so no local PostgreSQL setup is needed.

🧪 Testing

Unit Tests (Frontend & Backend)

# Run all workspace unit tests
npm test

# Or individually
cd frontend && npm test
cd backend && npm test

API Integration Tests (Backend)

cd backend
npm run test:coverage

Requires a running PostgreSQL database. The test suite automatically seeds and resets data.

End‑to‑End Tests (Playwright)

cd frontend
npm run test:e2e

E2E Tests (Playwright)

Command Description
npm run test:e2e Run all E2E suites (booking, accessibility, visual, lighthouse)
npm run test:e2e:booking Run main booking flow tests only (uses Page Object Model)
npm run test:e2e:accessibility Run axe‑core accessibility audit
npm run test:e2e:visual Capture UI screenshots (mobile/desktop, error states, price breakdown)
npm run test:e2e:lighthouse Run Lighthouse and generate HTML report (threshold: perf ≥0.5, a11y ≥0.95)
npm run test:e2e:ui Open Playwright UI mode for debugging

Starts the frontend dev server, connects to the backend, and executes full‑flow tests.

Allure Reporting

cd frontend
npm run test:e2e:allure    # runs E2E tests + generates Allure report
npm run allure:open         # opens the report

📸 UI/UX Evidence

📦 CI/CD

The project includes GitHub Actions and CircleCI pipelines that run:

  1. Lint & Format (ESLint, Prettier)
  2. Backend Tests (unit + integration with PostgreSQL service container)
  3. Frontend Unit Tests
  4. End‑to‑End Tests (Playwright with real database)
  5. Deploy (frontend to Vercel on push to main/develop)

Allure and Playwright HTML reports are uploaded as CI artifacts.

🛂 Quality Gates

Every change to the codebase must pass these automated quality checks before it can be merged or deployed.

Gate Tools What It Checks When It Runs
Linting ESLint (flat config), TypeScript‑ESLint Code quality rules, unused variables, type safety Pre‑commit (Husky + lint‑staged), CI
Formatting Prettier Consistent code style (indentation, quotes, semicolons) Pre‑commit (Husky + lint‑staged), CI
Required Files Custom script (check‑req) Key project files (README.md, eslint.config.js, package.json) exist CI (lint‑and‑format job)
Unit Tests Vitest + React Testing Library Individual components, hooks, and utility functions CI (unit‑tests / backend‑tests jobs)
API Contract Tests Vitest + MSW (node) API endpoints match the required contract and deterministic fixtures CI (api‑tests job)
Integration Tests Supertest + PostgreSQL Backend routes and services work correctly with a real database CI (backend‑tests job)
End‑to‑End Tests Playwright (POM) Complete user journeys (General, Heavy, Plasterboard, Manual, Error/Retry) CI (e2e‑tests job)
Code Coverage Vitest (v8 provider) Minimum coverage thresholds (70% statements, 50% branches, 70% functions, 70% lines) CI (backend‑tests job)
Accessibility Audit axe‑core (Playwright integration) 0 accessibility violations E2E suite (manual trigger)
Performance Audit Lighthouse (programmatic) Performance and accessibility scores meet minimum thresholds Manual (npm run test:e2e:lighthouse)
Code Review GitHub Pull Requests At least one approving review before merging Manual (PR protection rules)

Note: All quality gates except code review run automatically in the CI pipeline (both GitHub Actions and CircleCI).

🌐 Deployment

Component Platform URL
Frontend Vercel https://booking-flow-platform-fullstack-fro.vercel.app/
Backend Render https://booking-flow-api.onrender.com/
Database Render Managed PostgreSQL instance
  • Frontend auto‑deploys with Vercel Git integration.
  • Backend auto‑deploys with Render Git integration.
  • Environment variables are configured in each platform's dashboard.

📚 Documentation

👤 Author

Sabine U. – GitHub | LinkedIn

📝 License

This project is open source and available under the MIT License.

About

Full Stack Multi-step Booking Flow web app with full QA test automation (PERN stack, Lint, Unit tests, API tests, E2E tests, and CI/CD).

booking-flow-platform-fullstack-fro.vercel.app

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages