Zum Inhalt springen

Beauty-Vorlage

Taper Barbershop Booking App

A barbershop's own app: customers book a barber and a free time, collect stamps toward a free cut, reserve products and join the walk-in line, and barbers run the day in Staff mode. Runs on sample data until you connect Supabase.

  • 30 Screens
  • iOS & Android
  • Beispieldaten
  • Aktualisiert am 28. Okt. 2026
  • Geprüfte Version
  • 1 Kopie erstellt

Gratis kopieren · Voller Quellcode · Keine Kreditkarte

Screens

6 Screens aus der laufenden App.

Was drinsteckt

  1. Book by service, barber and free time in the shop's time zone; a database rule stops two people taking one time
  2. Reschedule or cancel up to 2 hours before, with reminders a day and 2 hours ahead on iOS and Android
  3. A ten-stamp card with a member QR code: staff add the stamp on Done or by scanning, and rewards carry a code
  4. Reserve grooming products to pick up at the next visit; services and products are paid at the shop
  5. A walk-in line with the wait and your place, and staff who call the next person to the chair
  6. Staff mode: the day by barber, Arrived, Done and No-show, walk-ins, member scanning and time off

Über diese Vorlage

Overview

A barbershop front and the Taper app

Taper is the app a neighbourhood barbershop gives its regulars. They see the shop's hours and their next visit, book a barber and a free time in a few taps, collect a stamp at every visit (the tenth cut is free), reserve products to pick up and join the walk-in line from home. The barbers use the same app in Staff mode to run the day.

Out of the box it runs in sample mode: no backend, everything kept on the phone, two sample shops in Brooklyn with six barbers. Connect Supabase and the same screens read and write the shop's own data.

Key features

  • Book: the menu by kind with photos, minutes and prices; a page per service; any barber or a chosen one; a 14-day strip that marks Full, Closed and Off days; free times in the shop's time zone with taken ones struck through

    Book
  • Confirm: extras that still fit before the barber's next client, a note for the barber, products to pick up at the visit, and a price that says it is paid at the shop

    Confirm
  • Visits: reschedule or cancel up to 2 hours before, then the app says to call the shop; Book again; rate a visit

    Visits
  • Barbers: rating, years at the shop, specialty, the next free times as chips that start a booking, recent work and reviews

    Barbers
  • Rewards: a ten-stamp card, the 5th stamp earns a hot towel upgrade and the 10th a free haircut, a member QR code, reward codes with use-by dates and a history

    Rewards
  • Shop: bestsellers, product pages, a bag, pickup with the next visit or at the counter, a pickup code and status

    Shop
  • Walk-in line: the wait, how many are ahead, who is working, your place refreshed every 30 seconds, Leave the line

    Walk-in line
  • Account: sign in with an email code; favourite barber, your usual note, reminders, Delete my data

    Account
  • Staff: today's bookings by barber with Arrived, Done and No-show, Done adds the member's stamp, walk-ins, scanning a member's code, handing over pickups, blocking time off

    Staff

Screens

30 screens in light and dark: Home, shop switch, Book, service, choose a time, confirm, you're booked, barbers, barber, visits, visit, rate, walk-in line, rewards, reward code, shop, product, bag, pickup, news, account, sign in, terms, privacy, about, and the staff screens: today, a visit, scan a member, walk-ins and time off.

Backend

One Supabase migration adds the shops, hours, team, menu, bookings, stamps, rewards, products, pickups, the walk-in line and profiles with row-level security. Booking, moving, cancelling, stamps, rewards, pickups and Delete my data run as server functions, and an exclusion constraint stops a time being booked twice. The migration seeds the sample business, so a new project opens with data. Staff and owners are a role on their profile, set in the table editor.

Money

Nothing is paid in the app. Haircuts and products are paid at the shop, as the App Store expects for services used outside the app, so there is no in-app purchase or card form to set up.

Setup

Connect Supabase under Server › Backend › Supabase and run the migration, replace the sample shop, team, menu and photos with your own, and set your terms and privacy text. Reminders and member scanning work in the iOS and Android builds; the web preview shows the member number field instead of the camera.

barbershopbookingappointmentssalonloyaltystamp cardwalk-in queuelocal businesssupabasereact nativeexpostaff app

Das bekommst du

  • Voller Quellcode — Expo und React Native in TypeScript, als App in deinem Workspace.
  • Live-Vorschau — probiere jede Änderung im Browser oder auf deinem Handy aus.
  • Geprüfte Version — sie kompiliert und jeder Screen öffnet ohne Fehler.
  • KI-Assistent — ändere alles per Chat; jede Änderung kostet Credits.
  • Builds und Store-Upload — iOS- und Android-Builds, aus Veröffentlichen an App Store und Google Play gesendet.
  • Keine Credits fürs Kopieren — die Kopie selbst kostet keine.

Mit einer früheren Version von FluxNative erstellt. Deine Kopie funktioniert so, wie sie ist; bitte den Agenten um ein Update, wenn du App-Sprachen, Währungen und Über-Links möchtest.

Das brauchst du

  • Ein FluxNative-Konto — der Free-Tarif fasst bis zu 2 Apps.
  • Kein Backend zum Start — läuft mit Beispieldaten, bis du deines verbindest.
  • Creator oder höher — für native Builds und Store-Upload.
  • Store-Konten — Apple Developer Program (99 US$ im Jahr) und Google Play (25 US$ einmalig), zum Veröffentlichen.

Was im Quellcode steckt

Screens
30
Dateien in deiner Kopie
455
Codezeilen eigens für diese App
10.035
fertige UI-Komponenten
138

App-Texte auf Englisch und Vietnamesisch

Tech-Stack

Expo SDK
57.0.22
React Native
0.86.3
React
19.2.8
TypeScript
6.0.3
Expo Router
57.0.21
Supabase JS
2.112.3

Aus der package.json dieser Version.

Designsystem

Überschriften
Systemschrift
Fließtext
Systemschrift
  • Heller und dunkler Modus
  • Liquid Glass
  • Kapsel-Buttons
  • Erhöhte Karten

Einrichtung nach dem Fork

Deine Kopie öffnet sich mit dem KI-Assistenten, der sie gebaut hat. Geh die Schritte der Reihe nach durch: Verbinde unter Server, was ein Schritt verlangt, und sende dann jeden Prompt.

  1. Connect Supabase

    Create a Supabase project, save its URL and anon key under Server › Backend › Supabase, and run supabase/migrations/20261020120000_taper.sql in its SQL editor: it adds the tables, the rules and the sample shop.

    Prompt für die KI

    My Supabase project is connected under Server › Backend › Supabase. Write its URL and anon key into .env, make sure supabase/migrations/20261020120000_taper.sql has been run on it, and check that Home, Book, Rewards and Staff load from it.

  2. Add your shop, team and menu

    Replace the sample shops, hours, barbers, services and products with yours in Supabase's table editor (the README lists each table), add your photos, and give your barbers the staff role in profiles.

    Prompt für die KI

    Replace Taper's sample business with mine: the shop name, address, phone and hours, my barbers with their specialties, my services with minutes and prices, and my products. Update the seed in the migration and the sample data so they match.

  3. Rename it for your business

    src/config/business.ts holds every business word (barber, cut, shop), the cancel window and the stamps a reward needs. Change the window and the stamp goal in the migration too.

    Prompt für die KI

    Turn Taper into an app for my business. Change the words in src/config/business.ts, and the cancel window and stamp goal in both business.ts and the migration.

  4. Check reminders and scanning on a phone

    Reminders and scanning a member's code use the phone's notifications and camera, so try them in an iOS or Android build. The web preview shows the member number field instead.

    Prompt für die KI

    Check that booking reminders and the staff member scanner work in a phone build, and fix anything that does not.

  5. Publish from your own account

    App Store rule 4.2.6: an app made from a template is published by the business it is for, from its own developer account. Replace the sample photos, terms and privacy text first.

    Prompt für die KI

    Get the app ready to publish under my business: my name, icon and photos, and my own terms of use and privacy text in place of the sample text.

So nutzt du diese Vorlage

  1. Nutze die Vorlage, um eine bearbeitbare Kopie samt Quellcode in deinem Workspace zu erhalten (Vorlagen).
  2. Bitte den KI-Assistenten in eigenen Worten um die gewünschten Änderungen (Mit dem Assistenten arbeiten).
  3. Probiere jede Änderung in der Live-Vorschau oder auf deinem Handy aus (Vorschau).
  4. Ab Creator baust du sie für iOS und Android und reichst sie in den Stores ein (Veröffentlichen im Überblick).

Lizenz und Support

Lizenz

Die für dich erstellte App gehört dir; der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).

Hilfe

  • Anleitungen zu Vorlagen, Assistent und Veröffentlichung.
  • Support kontaktieren über Hilfe; Antwort meist in 1–2 Werktagen.
  • Frag in deiner Kopie den KI-Assistenten zu jedem Screen oder jeder Datei.

Von FluxNative

Support-Richtlinie

Fragen

Ist es kostenlos?

Eine kostenlose Vorlage zu kopieren kostet nichts, auch keine Credits; eine Premium-Vorlage ist ein Einmalkauf pro Website. Chat-Änderungen und Builds kosten Credits.

Was gehört mir?

Die für dich erstellte App gehört dir. Der Code der Vorlage bleibt bei InspireUI und ist für die Nutzung in deinen Apps lizenziert (Bedingungen › Unser geistiges Eigentum).

Muss ich programmieren können?

Nein. Bitte den Assistenten in einfachen Worten um Änderungen; den vollen Quellcode siehst du, wenn du willst.

Kommt sie mit Backend?

Nein. Eine vollständige App nennt das nötige Backend und du verbindest deines unter Server; ein Design läuft mit Beispieldaten.

Kann ich das Design ändern?

Ja. Im Tab Design stellst du Markenfarbe, Farben, Schriften und Ecken ohne Credits ein; den Rest ändert der Assistent.

Welchen Tarif brauche ich zum Veröffentlichen?

Ab Creator baust du und lädst in die Stores hoch, mit deinen eigenen Apple- und Google-Konten. Die App einer Premium-Vorlage baut mit jedem Tarif, sobald ihre Website verbunden ist.

Kann ich den Quellcode herunterladen?

Ja, mit Quellcode herunterladen oder Push zu GitHub, sobald dein Workspace einen Tarif, Credits oder eine bezahlte Vorlage gekauft hat. Die App einer Premium-Vorlage braucht zusätzlich ihre verbundene Website.

Was, wenn sie mit einem früheren FluxNative erstellt wurde?

Deine Kopie funktioniert wie sie ist. Lass sie vom Assistenten auf neuere Funktionen wie App-Sprachen und Währungen aktualisieren; das ist der letzte Einrichtungsschritt.

Bereit, daraus deine App zu machen?

Starte mit Taper Barbershop Booking App und ändere alles per Chat. Deine Kopie enthält den vollständigen Quellcode.

Kostenlos kopieren. Keine Kreditkarte nötig.

Taking a little longer than usual…

Loading FluxNative