Pular para o conteúdo

Template de Beleza

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 telas
  • iOS e Android
  • Dados de exemplo
  • Atualizado em 28 de out. de 2026
  • Versão verificada
  • 1 cópia criada

Cópia grátis · Código completo · Sem cartão

Telas

6 telas do app em funcionamento.

O que vem incluído

  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

Sobre este modelo

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

O que você recebe

  • Código completo: Expo e React Native em TypeScript, como um app no seu espaço de trabalho.
  • Prévia ao vivo: teste cada mudança no navegador ou no celular.
  • Versão verificada: compila e todas as telas abrem sem erros.
  • Assistente de IA: mude o que quiser pelo chat; cada mudança usa créditos.
  • Builds e envio às lojas: builds de iOS e Android, enviados à App Store e ao Google Play pelo Publish.
  • Copiar não gasta créditos: a cópia em si não custa nada.

Feito com uma versão anterior do FluxNative. Sua cópia funciona como está; peça ao agente para atualizá-la quando quiser idiomas e moedas no app ou links Sobre.

O que você precisa

  • Uma conta FluxNative: o plano Free comporta até 2 apps.
  • Sem backend para começar: usa dados de exemplo até você conectar o seu.
  • Creator ou superior: para builds nativos e envio às lojas.
  • Contas das lojas: Apple Developer Program (US$ 99 por ano) e Google Play (US$ 25 uma vez), para publicar.

O que vem no código

telas
30
arquivos na sua cópia
455
linhas escritas para este app
10 mil
componentes de UI prontos
138

Textos do app em inglês e vietnamita

Stack técnica

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

Do package.json desta versão.

Design system

Títulos
Fonte do sistema
Texto
Fonte do sistema
  • Modos claro e escuro
  • Liquid Glass
  • Botões em pílula
  • Cards elevados

Configuração depois do fork

Sua cópia abre com o assistente de IA que a criou. Siga os passos em ordem: conecte em Server o que um passo pedir e depois envie cada 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 para a 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 para a 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 para a 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 para a 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 para a 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.

Como usar este template

  1. Use o template para ter uma cópia editável, com o código-fonte, no seu espaço de trabalho (Templates).
  2. Peça ao assistente de IA as mudanças que quiser, com suas próprias palavras (Trabalhar com o assistente).
  3. Teste cada mudança na prévia ao vivo ou no seu celular (Prévia).
  4. No Creator ou superior, gere o app para iOS e Android e envie às lojas (Visão geral da publicação).

Licença e suporte

Licença

O app criado para você é seu; o código do modelo continua da InspireUI e é licenciado para uso nos seus apps (Termos › Nossa propriedade intelectual).

Ajuda

  • Guias sobre templates, o assistente e a publicação.
  • Falar com o suporte em Ajuda; respondemos em geral em 1–2 dias úteis.
  • Na sua cópia, pergunte ao assistente de IA sobre qualquer tela ou arquivo.

Feito pelo FluxNative

Política de suporte

Perguntas

É grátis?

Copiar um template grátis não custa nada, nem créditos; um Premium é uma compra única por site. Mudanças pelo chat e builds usam créditos.

O que é meu?

Você é dono do app feito para você. O código do template continua da InspireUI e é licenciado para uso nos seus apps (Terms › Our intellectual property).

Preciso saber programar?

Não. Peça mudanças ao assistente com suas palavras; o código completo está lá quando quiser.

Vem com backend?

Não. Um app completo diz qual backend precisa e você conecta o seu em Server; um design usa dados de exemplo.

Posso mudar o design?

Sim. A aba Design muda cor da marca, cores, fontes e cantos sem gastar créditos; o assistente muda o resto.

Qual plano preciso para publicar?

Creator ou superior faz build e envia às lojas, com suas próprias contas Apple e Google. O app de um template Premium faz build em qualquer plano depois que o site é conectado.

Posso baixar o código?

Sim, com Download source ou Push to GitHub, depois que seu espaço de trabalho comprar um plano, créditos ou um template pago. O app de um template Premium também precisa do site conectado.

E se foi feito com um FluxNative anterior?

Sua cópia funciona como está. Peça ao assistente para atualizá-la com recursos novos, como idiomas e moedas do app; é o último passo da configuração.

Pronto para transformar no seu app?

Comece a partir de Taper Barbershop Booking App e mude o que quiser pelo chat. Sua cópia vem com o código-fonte completo.

Cópia grátis. Sem cartão de crédito.

Taking a little longer than usual…

Loading FluxNative