Project Goal
To create a reliable and user-friendly platform where clients can view services, browse before/after galleries, and book appointments online. The site emphasizes a smooth booking experience with admin tools to manage schedule, slots, blocks, and notifications. It supports Latvian and Russian and works seamlessly on desktop and mobile devices.
My Role
I handled the entire development process: planning the site’s structure, building the frontend, integrating backend services, implementing multilingual support, optimizing SEO and performance, and developing the booking system and admin panel. I focused on maintainable, testable TypeScript code and clean architecture.
Key Features
- Robust online booking system with calendar, time slots, capacity handling, and availability computation
- Administrative panel for managing schedule, slots, breaks, blocks, bookings history, and sending reminders
- Gallery and detailed project pages to showcase work (before/after)
- Fast server-side rendering (SSR) for quick loading and better SEO
- Responsive design built with Tailwind CSS
- Smooth page transitions and custom animations using Framer Motion
- Cookie consent banner, legal notice, privacy policy, and social links on every page
- Integration with Supabase for data storage and media delivery
- SEO best practices: meta tags, sitemap, robots.txt, and JSON-LD structured data
- PWA-friendly patterns (service worker ready) and optimized asset delivery
- Language switcher and automatic locale detection (Latvian default, Russian secondary)
Tech Stack
- Next.js (App Router), React, TypeScript
- Tailwind CSS, Framer Motion
- Supabase (Postgres + Storage)
- Twilio (SMS) & Resend (email)
- Vercel for deployment and cron tasks
Architecture
Server-side rendering for SEO and fast initial loads, with client-side interactive components for the booking UI and admin tools. Centralized language context and modular components following DRY/KISS principles. Caching strategies are applied for calendar/slot queries.
Integrations & APIs
- Supabase: stores bookings, slots, blocks, procedures, images and serves as backend
- Twilio: sends SMS confirmations and reminders
- Resend (email): transactional emails (confirmations, cancellations)
- Vercel Cron: scheduled daily reminders and background tasks
- Structured Data: JSON-LD for booking and service pages
Booking System Details
- Calendar UI shows available, fully booked, and blocked dates
- Monthly aggregation of slots and booking counts to compute availability
- Admin endpoints to create slots, blocks, and manage capacity
- 24-hour cancellation window enforcement with localized messages
- Multilingual booking forms and notifications based on user locale
- Admin bookings history with filters, sorting, and pagination
Optimizations
- Lazy loading and blur-up placeholders for images (WebP preferred)
- Code-splitting and minimized CSS/JS for faster loads
- Unique titles/descriptions, canonical links, hreflang, Open Graph tags
- Accessibility improvements: ARIA attributes, keyboard navigation focus styles
- Font optimization with Google Fonts and variable font usage
- Calendar caching with TTL to avoid frequent heavy queries
Challenges & Solutions
- Implemented robust availability calculation combining admin slots, blocks, and current bookings
- Achieved multilingual SSR with language-aware routing and metadata
- Balanced fluid animations with performance by throttling and conditional client rendering
- Ensured GDPR-compliant consent flow and unobtrusive cookie banner
- Reduced duplication via reusable components and centralized utilities
Outcome
The project is production-ready and deployed (Vercel in project setup). The site provides a smooth booking experience, a comprehensive admin panel for schedule control, and strong SEO foundations. Its architecture allows easy extension (additional languages, new services, analytics) while keeping performance and maintainability in focus.