Building a Studio Booking App

Created on July 10, 2025

2025   ·   formatting   charts   ·   angular-posts

🎥 Building a Studio Booking App with Angular: A Complete Tutorial

Introduction

Have you ever wanted to build a front end of a fully functional booking application? In this tutorial, we’ll walk through how we built Studio Booker, an Angular-powered stand alone single-page app for managing photography studio bookings — from browsing studios to booking a time slot, managing a cart, and completing checkout with a polished confirmation and PDF receipt. It also includes basic front end user login/signup forms and button for a subsection of this tutuorial.

🔧 Features Overview

  • Studio listing with details and prices
  • Calendar view with FullCalendar.js
  • Reactive booking form
  • Cart system with persistent storage
  • Checkout with billing info and promo code
  • Confirmation page with printable PDF
  • Sign in - user management
  • Sign up – user management
  • Hosted as a subdomain (e.g., booker.crystalhansenartographic.com)

🧱 Tech Stack

  • Angular 17+
  • Bootstrap 5
  • FullCalendar.js
  • Reactive Forms
  • LocalStorage for persistence
  • html2pdf.js for client-side PDF generation

🔄 App Flow

1. Studio Listing

The user browses available studios with name, description, accessories, and pricing. Clicking “Book Now” sends studio data to the calendar component.

```ts
```this.router.navigate(['/calendar', id], );
  1. Calendar View Uses FullCalendar.js

Clicking a day opens a booking form with that date pre-filled

Clicking an event populates the form with existing booking info

  1. Booking Form Reactive form with:

Title

Date (readonly if selected from calendar)

Time slot (button selector)

Price (from studio)

Emits the completed booking object to be added to the cart.

  1. Cart System Displays list of bookings

Allows item removal

Calculates total

Uses LocalStorage for persistence

Cart is cleared on successful booking confirmation

  1. Checkout Includes:

First/Last Name, Email, Address

Promo code validation (EXAMPLECODE)

Card info and payment method

Validates form on submission

Sends booking + user info to the confirmation page.

  1. Confirmation Displays cart summary and confirmation ID

Downloadable/printable PDF using html2pdf.js

Clears cart on load

🧠 Key Concepts Angular routing (with route/query parameters)

Component communication via @Input() and @Output()

FullCalendar integration

Reactive Forms & validation

LocalStorage-based cart service

Hosting Angular on a subdomain with .htaccess

PDF generation with html2pdf.js

Deployment Notes Subdomain configured via shared hosting (e.g., HostPapa)

Built using: ng build –configuration production

Deployed to /public_html/studio-booker/

.htaccess routes all paths to index.html `` apache Always show details

RewriteEngine On RewriteBase / RewriteCond % !-f RewriteCond % !-d RewriteRule . /index.html [L]

```

Potential Improvements

Backend database (e.g., Firebase, Node.js, Laravel)

Authentication & user accounts

Admin panel for booking management

Online payments with Stripe or PayPal

Email confirmations

Conclusion This project demonstrates how to build a modern Angular application with real-world booking workflows. It’s scalable, stylish, and packed with useful patterns for building your own booking system.

Want to build it yourself or extend it? Fork it, deploy it, and make it your own!

Happy Booking! 🚀 “””

References