Single-Page Beauty Services Application with Appointment Scheduling and Stripe Integration

The single-page website OlenaBeauty.co.uk offers eyebrow treatment services and enables clients to book appointments online with prepayment via Stripe.

The website also includes a portfolio section featuring a photo and video gallery, as well as "About" and "Location" sections.

Client Side

The client-side application is built with Blazor WebAssembly, using the Bootstrap framework and the MudBlazor UI component library for the frontend. It is deployed as an Azure Static Web App.

The client interface is designed as a single-page application (SPA). It includes a "My Bookings" section, implemented as a modal window, where all user interactions occur. Visitors can:

• Browse services,
• Select a day and time slot for appointments,
• Choose multiple services for a single appointment.

Image: appointment booking
Image: appointment confirmation

Server Side

The server side is built using .NET Web API and deployed as an Azure App Service running on a Windows server. It uses SQLite as the relational database, managed through Entity Framework, and stores media assets (photos and videos) in Azure Blob Storage.

The database includes tables for:

• Authentication information,
• Categories and services,
• Links to media files,
• Working schedules,
• Appointments.

Image: working days management
Image: appointments view

Booking System

The booking system allows the creation of customised working schedules for each day. Its functionality provides:

• Customers: The ability to select multiple services for one appointment and view available time slots for each working day.
• Managers: Tools to set individual working hours for each day.

Payments are integrated with the Stripe API. Upon successful payment, customers receive appointment details on the website and an email confirmation. A partial payment feature is also implemented, enabling visitors to pay a deposit when booking an appointment.

Image: schedule view

Admin & Manager Functionality

Users registered as "Admin" or "Manager" have access to advanced management features, including:

• Editing service data (title, description, duration, cost, and prepayment amount),
• Managing the working schedule (adding or updating working days and hours),
• Viewing appointment schedules and statuses,
• Uploading media files from their computer to Azure Blob Storage,
• Organising and updating the media gallery.

For details about same applications, refer to the links below: