Aller au contenu

Template Beauté

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 écrans
  • iOS et Android
  • Données d’exemple
  • Mis à jour le 28 oct. 2026
  • Version vérifiée
  • 1 copie créée

Copie gratuite · Code source complet · Sans carte bancaire

Écrans

6 écrans de l’app fonctionnelle.

Contenu

  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

À propos de ce modèle

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

Ce que vous obtenez

  • Code source complet — Expo et React Native en TypeScript, en app dans votre espace de travail.
  • Aperçu en direct — testez chaque changement dans votre navigateur ou sur votre téléphone.
  • Version vérifiée — elle compile et chaque écran s’ouvre sans erreur.
  • Assistant IA — modifiez tout par chat ; chaque changement consomme des crédits.
  • Builds et envoi aux stores — builds iOS et Android, envoyés à l’App Store et à Google Play depuis Publier.
  • Aucun crédit pour copier — la copie elle-même est gratuite.

Conçu avec une version antérieure de FluxNative. Votre copie fonctionne telle quelle ; demandez à l’agent de la mettre à jour quand vous voulez les langues et devises de l’app ou les liens À propos.

Ce qu’il vous faut

  • Un compte FluxNative — le forfait Free accepte jusqu’à 2 apps.
  • Aucun backend au départ — elle tourne sur des données d’exemple jusqu’à ce que vous connectiez le vôtre.
  • Creator ou plus — pour les builds natifs et l’envoi aux stores.
  • Comptes de store — Apple Developer Program (99 US$ par an) et Google Play (25 US$ une fois), pour publier.

Ce que contient le code

écrans
30
fichiers dans votre copie
455
lignes écrites pour cette app
10 k
composants d’interface prêts à l’emploi
138

Textes de l’app en anglais et vietnamien

Stack technique

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

Tiré du package.json de cette version.

Système de design

Titres
Police du système
Texte
Police du système
  • Modes clair et sombre
  • Liquid Glass
  • Boutons en pilule
  • Cartes en relief

Configuration après le fork

Votre copie s’ouvre avec l’assistant IA qui l’a créée. Suivez les étapes dans l’ordre : connectez sous Serveur ce qu’une étape demande, puis envoyez chaque 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 pour l’IA

    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 pour l’IA

    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 pour l’IA

    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 pour l’IA

    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 pour l’IA

    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.

Comment utiliser ce modèle

  1. Utilisez le modèle pour obtenir une copie modifiable, avec son code source, dans votre espace de travail (Modèles).
  2. Demandez à l’assistant IA les changements voulus, avec vos propres mots (Travailler avec l’assistant).
  3. Essayez chaque changement dans l’aperçu en direct ou sur votre téléphone (Aperçu).
  4. Avec Creator ou plus, compilez-le pour iOS et Android et envoyez-le aux stores (Vue d’ensemble de la publication).

Licence et support

Licence

L’app créée pour vous vous appartient ; le code du modèle reste à InspireUI et vous est concédé sous licence pour vos apps (Conditions › Notre propriété intellectuelle).

Aide

  • Guides sur les templates, l’assistant et la publication.
  • Contacter le support depuis Aide ; réponse en général sous 1 à 2 jours ouvrés.
  • Dans votre copie, interrogez l’assistant IA sur n’importe quel écran ou fichier.

Créé par FluxNative

Politique de support

Questions

Est-ce gratuit ?

Copier un template gratuit ne coûte rien, pas même des crédits ; un template Premium est un achat unique par site web. Les changements par chat et les builds consomment des crédits.

Qu’est-ce qui m’appartient ?

L’app créée pour vous vous appartient. Le code du template reste à InspireUI et vous est concédé sous licence pour vos apps (Conditions › Notre propriété intellectuelle).

Faut-il savoir coder ?

Non. Demandez des changements à l’assistant en mots simples ; le code source complet est là si vous le voulez.

Y a-t-il un backend inclus ?

Non. Une app complète nomme le backend requis et vous connectez le vôtre sous Server ; un design tourne sur des données d’exemple.

Puis-je changer le design ?

Oui. L’onglet Design règle la couleur de marque, les couleurs, les polices et les angles sans coût en crédits ; l’assistant change le reste.

Quel forfait pour publier ?

Creator ou plus compile et envoie aux stores, avec vos propres comptes Apple et Google. L’app d’un template Premium se compile avec tout forfait dès que son site web est connecté.

Puis-je télécharger le code source ?

Oui, avec Télécharger le code source ou Push vers GitHub, dès que votre espace de travail a acheté un forfait, des crédits ou un template payant. L’app d’un template Premium exige aussi son site web connecté.

Et si elle a été créée avec une version antérieure de FluxNative ?

Votre copie fonctionne telle quelle. Demandez à l’assistant de la mettre à jour pour les nouveautés comme les langues et devises de l’app ; c’est la dernière étape de configuration.

Prêt à en faire votre app ?

Partez de Taper Barbershop Booking App et changez tout par chat. Votre copie inclut tout le code source.

Copie gratuite. Sans carte bancaire.

Taking a little longer than usual…

Loading FluxNative