Avante Cosmetic Website & Appointments Application

A beauty business website with online appointment system, user authentication, and admin portal built with Next.js and React.

Company: Freelance

nextjsreacttypescriptfullstackcontentfulvercel
Summary
A full-stack appointment booking system for a Denver beauty business, featuring user authentication, sophisticated notifications, and admin management—migrated from Rails API to a single Next.js app.

A comprehensive website and appointment booking system for Avante Cosmetic, a beauty business in Denver, Colorado. The system enables clients to book appointments online while providing business owners with powerful management tools.

What I built

  • Full-stack appointment system with Next.js and React Server Components
  • User authentication and client management system
  • Sophisticated notification system using Twilio (SMS) and Postmark (email)
  • Admin portal for appointment and client management
  • Content management integration with Contentful
  • Migration from microservices to single full-stack application

Key Features

Client Experience

  • Online appointment scheduling with real-time availability
  • User authentication and profile management
  • Appointment confirmations and reminders
  • Mobile-responsive booking interface

Admin Experience

  • Comprehensive appointment management dashboard
  • Client database with booking history
  • Automated notification workflows
  • Content management through Contentful

Technical Implementation

  • Next.js with React Server Components for optimal performance
  • TRPC integration for type-safe full-stack development
  • Daily cron tasks for notification scheduling
  • Vercel deployment for simplified DevOps

Migration & Modernization

Challenge: Version 1.0 consisted of separate Rails API and Next.js frontend with complex Ansible deployments that were finicky and problematic.

Solution: Migrated to a unified Next.js application using TRPC, eliminating microservices complexity while maintaining all functionality.

Results:

  • Simplified development workflow
  • Reliable deployments on Vercel
  • Faster feature development
  • Reduced operational overhead

Notifications Architecture

The most complex component is the multi-channel notification system:

  • Appointment lifecycle notifications: submission, confirmation, reminders
  • Multi-channel delivery: SMS via Twilio, email via Postmark
  • Scheduled processing: Daily cron tasks instead of job schedulers
  • Automated workflows: Reduces manual communication overhead

Tech Stack

  • Frontend: Next.js, React, TypeScript
  • Backend: Next.js API routes, TRPC
  • Database: PostgreSQL
  • CMS: Contentful
  • Notifications: Twilio (SMS), Postmark (email)
  • Deployment: Vercel

Business Impact

  • Streamlined booking process reducing phone calls and manual scheduling
  • Automated notifications improving client communication
  • Admin efficiency through centralized management tools
  • Scalable architecture supporting business growth