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
- Book by service, barber and free time in the shop's time zone; a database rule stops two people taking one time
- Reschedule or cancel up to 2 hours before, with reminders a day and 2 hours ahead on iOS and Android
- A ten-stamp card with a member QR code: staff add the stamp on Done or by scanning, and rewards carry a code
- Reserve grooming products to pick up at the next visit; services and products are paid at the shop
- A walk-in line with the wait and your place, and staff who call the next person to the chair
- Staff mode: the day by barber, Arrived, Done and No-show, walk-ins, member scanning and time off
Über diese Vorlage
Overview
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
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
Visits: reschedule or cancel up to 2 hours before, then the app says to call the shop; Book again; rate a visit
Barbers: rating, years at the shop, specialty, the next free times as chips that start a booking, recent work and reviews
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
Shop: bestsellers, product pages, a bag, pickup with the next visit or at the counter, a pickup code and status
Walk-in line: the wait, how many are ahead, who is working, your place refreshed every 30 seconds, Leave the line
Account: sign in with an email code; favourite barber, your usual note, reminders, Delete my data
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
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.
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.
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 KIMy 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.
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 KIReplace 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.
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 KITurn 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.
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 KICheck that booking reminders and the staff member scanner work in a phone build, and fix anything that does not.
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 KIGet 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
- Nutze die Vorlage, um eine bearbeitbare Kopie samt Quellcode in deinem Workspace zu erhalten (Vorlagen).
- Bitte den KI-Assistenten in eigenen Worten um die gewünschten Änderungen (Mit dem Assistenten arbeiten).
- Probiere jede Änderung in der Live-Vorschau oder auf deinem Handy aus (Vorschau).
- 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-RichtlinieFragen
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.