Skip to content
ConnectPH
All work

Case study · Web platform

Caféture

One platform for a café, a studio and a coffee cart: guest website, online booking and payments, e-signed contracts, and the desks that run the business.

Visit cafeture.com(opens in a new tab)
Caféture website home page in a browser

Overview

Caféture needed more than a menu site. The platform handles everything a guest touches (ordering, studio booking, coffee cart contracts, photo galleries) and everything the team runs behind the counter (schedules, time clock, payroll, cash drawers, inventory, purchase orders). It's mobile-first, so the staff desks work like an app on the counter phone.

  • One codebase covers the public site, payments, e-signed contracts, HR and payroll, inventory and POS reconciliation
  • Built for real daily use by a working café and studio team
  • Mobile-first throughout, from guest booking to the staff time clock

01

Guest website

  • Café menu with a cart for pickup or delivery; confirming opens Messenger with the order already typed out
  • Google reviews on the home page, FAQ and local SEO
  • Guest feedback by QR code
  • Light and dark mode that follows the device
Caféture home page and online menu

02

Studio booking

  • Live availability up to 90 days ahead, with a reset buffer between sessions
  • Four packages plus add-ons (extra people, backdrops, pets)
  • Online payment by e-wallet or card, 50% down or paid in full
  • Guests reschedule or cancel within the policy window
Caféture studio booking flow

03

Coffee cart events

  • Four packages from 50 to 200 guests, with an inquiry form
  • Tracking page from inquiry to event day
  • E-signed contract in the browser, with a PDF for both sides
  • Three scheduled payments, each with an emailed receipt and Acknowledgement Receipt
Caféture coffee cart events page

04

Studio desk

  • Day schedule with walk-ins, overlap warnings and a smaller-package offer
  • “Send to cashier” turns a session into a bill
  • Finish uploads the photos and sends the guest a private 3-day gallery
  • Refunds, cancellations and studio stats
Studio desk schedule and guest gallery upload

05

Café operations

  • Cash drawers (change fund and sales drawer), cashier-confirmed cash in, daily close
  • Inventory check that compares POS sales (CSV import) against stock used
  • Purchase orders filled from low stock, sent by email (PDF) or Messenger
  • Commissary transfers, stock in/out, and restock shopper lists with share links
  • Sales overview, waste trends and expense log
  • Menu photo framer: crop, light fix and edge cleanup in bulk
Café inventory check and cash drawer summary

06

Team and payroll

  • Time clock with selfie and location check; keeps working offline
  • Schedules (straight duty, late openings, custom times), leave with a covering teammate, shift swaps
  • Hourly payroll with government deductions, approved overtime and cash advances
  • Staff confirm their payslips before pay goes out
  • Attendance reports, performance reviews, notices and polls
Staff time clock and payslip

07

Owner tools

  • “Needs you” inbox: overtime, early time-ins, leave and inquiries approved from one row
  • Alerts bell and web push notifications
  • Activity log, handover notes, and search across every desk
  • Guest list and site-visit analytics
Owner approvals inbox with a web push notification

Tech stack

  • Next.js + TypeScript

    App Router, server routes, desks behind secret addresses

  • Tailwind CSS + Motion

    One token-based theme with light and dark mode

  • Supabase (PostgreSQL)

    Bookings, team, pay and inventory records

  • Cloudflare R2

    Gallery photos and signed contract files

  • PayMongo

    E-wallet and card payments

  • Resend

    Booking, contract, receipt and gallery emails

  • Web Push

    Owner alerts on phones and desktops

  • Vercel

    Production deploys

Guest website and booking images are screenshots of the live site. Desk images recreate the private staff screens with sample data.