Nextjs Ts Consulting Scheduler

A complete interactive scheduling and booking system built with Next.js 16, TypeScript, Supabase, Stripe payment integration, and AI-powered chat support.

🚀 Features

• 📅 Interactive Calendar - Dynamic date and time slot selection with real-time availability
• 💳 Stripe Payment Processing - Real payment integration with Stripe Elements
• 🤖 AI Chat Widget - Floating chat assistant powered by OpenAI GPT-4o-mini with conversation history and semantic memory
• 🌍 Trilingual Support - Full i18n support (English, Portuguese, Spanish)
• 🧠 Contextual Memory - Embedding-based recall of previous conversations stored in Supabase pgvector
• 🔄 Booking Management - Create, view, and cancel appointments with persistent storage
• 🎨 Modern UI/UX - Beautiful, responsive design with Tailwind CSS
• 🔒 Database Persistence - PostgreSQL database via Supabase with Row Level Security
• 📧 Payment Webhooks - Automatic payment confirmation via Stripe webhooks
• 💬 Conversation History - Chat messages stored in Supabase for context-aware responses
• 🌐 Web Scraping Toolkit - Built-in utilities for collecting and analysing external website data
• ⚡ Edge Functions Ready - Supabase Edge Functions prepared for serverless chat processing
• 🔍 Semantic Search - Real-time embeddings and pgvector similarity search powering the chat agent

🛠️ Tech Stack

Frontend

• Next.js 16.0.1 - React framework with App Router
• React 19.2.0 - Latest React version
• TypeScript - Static type checking
• Tailwind CSS - Utility-first CSS framework
• Zustand - Lightweight state management
• Lucide React - Icon library

Backend & Services

• Supabase - Backend as a Service (PostgreSQL database)
  • Edge Functions - Serverless functions (Deno runtime) for chat processing
  • pgvector - Vector similarity search powering semantic memory
• Stripe - Payment processing and webhooks
• OpenAI API - GPT-4o-mini for AI chat responses
• pgvector - Embedding storage for semantic recall

Data & Automation

• Cheerio - HTML parsing for web scraping and data extraction
• Custom Web Scraper - Helper utilities for keyword extraction, metadata parsing, and reading-time analysis

Utilities

• date-fns - Date manipulation library
• clsx - Conditional className utility

📦 Installation

npm install

🔧 Environment Setup

Create .env.local file in the root:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# OpenAI (for chat widget)
OPENAI_API_KEY=sk-...

Database Setup

1. Create a Supabase project at supabase.com
2. Run migrations in SQL Editor:
   • Execute supabase/schema.sql to create booking tables
   • Execute supabase/rls.sql to set up security policies
   • Execute supabase/chat_schema.sql to create chat tables
   • Execute each file in supabase/migrations (or run supabase db push) to apply incremental schema updates, including semantic memory support (chat_memories)

Chat Setup

1. Get your OpenAI API key from platform.openai.com
2. Add OPENAI_API_KEY to your .env.local file
3. The chat widget will automatically appear on the landing page

For detailed setup: See SUPABASE_SETUP.md and STRIPE_SETUP.md

🏃 Running the Application

npm run dev

Open http://localhost:3000 in your browser.

📁 Project Structure

src/
├── app/                    # Next.js App Router (Routes & Pages)
│   ├── api/                # API Routes (Backend)
│   │   ├── slots/         # GET: Available time slots
│   │   ├── appointments/   # CRUD: Booking operations
│   │   ├── payment-intent/ # POST: Create Stripe Payment Intent
│   │   ├── chat/          # POST: Chat API proxy
│   │   └── webhooks/stripe/# POST: Stripe webhook handler
│   ├── schedule/[serviceId]/ # Scheduling page
│   ├── appointments/       # Booking list page
│   ├── confirmation/[id]/ # Confirmation page
│   └── page.tsx            # Landing page (with chat widget)
├── components/             # Reusable UI Components
│   ├── Calendar/          # Calendar components
│   ├── Form/              # Booking & Payment forms
│   ├── ChatWidget.tsx     # AI chat widget component
│   └── LanguageSelector.tsx
├── lib/                    # Core Logic & Services
│   ├── supabase/          # Supabase integration
│   │   ├── client.ts      # Browser client
│   │   ├── server.ts      # Server client
│   │   └── database.ts    # Database operations
│   ├── stripe/            # Stripe integration
│   │   ├── client.ts      # Frontend Stripe.js
│   │   └── server.ts      # Backend Stripe SDK
│   ├── api-service.ts     # HTTP client
│   ├── services.ts        # Service definitions
│   └── time-utils.ts      # Time slot utilities
├── context/               # React Context Providers
│   ├── AppointmentContext.tsx
│   └── LanguageContext.tsx # i18n provider
├── locales/               # Translation Files (en/pt/es)
└── types/                 # TypeScript definitions
supabase/
├── functions/             # Supabase Edge Functions (Deno)
│   └── chat/              # Chat Edge Function (alternative to API route)
│       ├── index.ts       # Edge Function handler
│       └── deno.json      # Deno configuration
├── schema.sql             # Main database schema
├── rls.sql                # Row Level Security policies
└── chat_schema.sql        # Chat tables schema

🔄 Application Flow

1. Landing Page → View services, select service, or chat with AI assistant
2. Schedule Page → Select date and time slot (dynamic availability)
3. Booking Form → Enter customer details → Stripe payment
4. Payment Processing → Stripe processes → Webhook confirms payment
5. Confirmation Page → Success with booking ID and details
6. Appointments Page → View and manage bookings

Chat Flow

1. User clicks chat widget icon (bottom-right corner)
2. Selects a quick question or types custom message
3. Message sent to OpenAI via Next.js API route
4. Response saved to Supabase for conversation history
5. Context-aware responses using short-term history plus pgvector-backed semantic memories
6. Embeddings stored in chat_memories for future recall

🔒 Business Rules

• Available hours: 9h-11h (morning) and 14h-16h (afternoon)
• No appointments after 5 PM
• Maximum 3 consultations per day
• Real-time availability checking from Supabase
• Past bookings cannot be cancelled

🧪 Testing

Stripe Test Cards

• Success: 4242 4242 4242 4242
• Declined: 4000 0000 0000 9995
• 3D Secure: 4000 0025 0000 3155

Use any future expiry date and any 3-digit CVC.

📚 Documentation

• SUPABASE_SETUP.md - Supabase configuration
• STRIPE_SETUP.md - Stripe configuration
• CHAT_SETUP.md - Chat widget setup guide

🚀 Production Checklist

• Switch Stripe keys from test to live
• Configure production webhook in Stripe Dashboard
• Verify Supabase RLS policies
• Test payment flow end-to-end
• Configure environment variables in hosting platform
• Set up OpenAI API key with usage limits
• Test chat widget functionality
• Verify chat tables exist in Supabase
• Apply latest migrations (supabase/migrations) to provision chat_memories (semantic memory)

📝 Additional Notes

• Chat widget works in offline mode if Supabase tables are not configured
• Semantic recall gracefully falls back to conversation history if embeddings or vector table are unavailable
• Dynamic time slots support 30/60/90 minute durations
• Calendar is fully responsive with horizontal scroll on tablets
• All UI components support trilingual display
• Edge Functions: Supabase Edge Functions are prepared but currently using Next.js API routes for easier deployment
• Web Scraping Utilities: src/lib/web-scraper.ts provides helpers for collecting and analysing external content
• Semantic Memory: src/lib/ai/memory.ts manages embeddings, semantic search, and Supabase persistence

---

Built with Next.js 16, TypeScript, Supabase, Stripe, and OpenAI