Themba.
2026
Juju the Barber Banner

✦ Website with Booking Platform & AI Virtual Assistant

Juju the Barber

Check it out

A busy local barber studio needed an automated, client-friendly appointment system to handle inquiries and bookings without paying monthly SaaS fees, missing customer questions outside shop hours, or double-booking slots.

React 18JavaScriptAIgemini-3.5-flashPrompt Injection & GuiderailsGemini APIViteTailwind CSSFramer MotionEmailJSReact Hot ToastVercel
RolesFull-Stack Developer, AI Engineer, UI/UX Designer
ClientJuju Barber Studio, Clayville & Tswelopele
Problem Solved & Architecture
Challenge:

A busy local barber studio needed an automated, client-friendly appointment system to handle inquiries and bookings without paying monthly SaaS fees, missing customer questions outside shop hours, or double-booking slots.

Solution:

Integrated an intelligent AI Customer Support Agent powered by Gemini to answer service inquiries, explain pricing, and streamline the appointment booking workflow. Engineered a responsive single-page booking application with step-by-step service selection, barber choice, and interactive time slot pickers using Framer Motion. Configured client-side transactional emails using EmailJS with custom dark-themed HTML templates for instant booking confirmations. Built dual calendar synchronization tools generating dynamic Google Calendar links and downloadable ICS files for Apple and Outlook users. Deployed on Vercel with serverless API integration for secure Gemini key handling, client-side route caching, and zero-downtime performance.

Hero & Brand Showcase

hero-section.png
Hero & Brand Showcase

Atmospheric dark-themed landing page showcasing studio branding, social proof testimonials, and direct CTA triggers.

• React 18• Tailwind CSS• Framer Motion

Gemini-Powered AI Assistant

ai-support-agent.png
Gemini-Powered AI Assistant

Virtual assistant built with Gemini to answer shop FAQs, detail treatment options, and guide users directly through the booking process.

• Gemini-3.5 Flash• Gemini API• System Prompt• AI Guide rails• AI Knowledge Base

Know About Us & Meet the Team

about.png
Know About Us & Meet the Team

Virtual assistant built with Gemini to answer shop FAQs, detail treatment options, and guide users directly through the booking process.

• Team• Gallery• Framer Moation• Tailwind CSS

Interactive Service Menu

service-selection.png
Interactive Service Menu

Custom haircut, dye, and beard treatment menu with expand/collapse filtering and dynamic price calculation.

• React 18• Tailwind CSS

Service Selector

choose-a-service.png
Service Selector

Interactive scheduling step allowing clients to select preferred service in the Booking Process.

• Framer Motion• JavaScript Date Engine

Barber Selector

barber.png
Barber Selector

Interactive scheduling step allowing clients to select preferred barbers in the Booking Process.

• Framer Motion• JavaScript Date Engine

Time Slot Selector

barber-and-date.png
Time Slot Selector

Interactive scheduling step allowing clients to select preferred Date & Time and available appointment slots.

• Framer Motion• JavaScript Date Engine

Client Details & Validation

client-details-form.png
Client Details & Validation

Validated customer contact form feeding data directly into transactional email templates.

• React Hot Toast• Form Validation

Instant Confirmation & Calendar Sync

booking-confirmation.png
Instant Confirmation & Calendar Sync

Confirmation screen with EmailJS triggers and one-click Google Calendar & Apple/Outlook (.ics) sync.

• EmailJS API• ICS Generator• Google Calendar API