跳到主要内容

美容模板

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 个界面
  • iOS 和 Android
  • 示例数据
  • 更新于 2026年10月28日
  • 已验证版本
  • 已复刻 1 次

免费复制 · 完整源码 · 无需信用卡

界面

来自实际运行应用的 6 个界面。

包含内容

  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

关于此模板

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

你将获得

  • 完整源码 — 使用 TypeScript 的 Expo 和 React Native,作为你工作区中的一个应用。
  • 实时预览 — 在浏览器或手机上试用每项更改。
  • 已验证版本 — 可编译,每个界面都能无错误打开。
  • AI 助手 — 用聊天修改任何内容;每次修改会消耗积分。
  • 构建与上架 — iOS 和 Android 构建,从发布页发送到 App Store 和 Google Play。
  • 复制不耗积分 — 复制本身不收费。

使用较早版本的 FluxNative 制作。你的副本可以照常使用;需要应用语言、货币和关于链接时,请让智能体更新。

你需要什么

  • FluxNative 账号 — 免费套餐最多可有 2 个应用。
  • 无需先接后端 — 在你连接自己的后端之前,它使用示例数据运行。
  • Creator 或更高套餐 — 用于原生构建和上架。
  • 商店账号 — Apple Developer Program(每年 99 美元)和 Google Play(一次性 25 美元),用于发布。

源码里有什么

个界面
30
个文件(副本中)
455
行为此应用编写的代码
1万
个现成 UI 组件
138

应用文本语言:英语和越南语

技术栈

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

来自此版本的 package.json。

设计系统

标题
系统字体
正文
系统字体
  • 支持浅色和深色模式
  • Liquid Glass
  • 胶囊按钮
  • 悬浮卡片

复刻后的设置

你的副本会和构建它的 AI 助手一起打开。按顺序完成步骤:某一步需要连接的内容,请在 Server 中连接,然后发送每条提示词。

  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.

    给 AI 的提示词

    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.

    给 AI 的提示词

    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.

    给 AI 的提示词

    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.

    给 AI 的提示词

    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.

    给 AI 的提示词

    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.

如何使用此模板

  1. 使用模板,在你的工作区中获得一个可编辑的副本及其源代码(模板)。
  2. 用平常的话告诉 AI 助手你想要的修改(与助手协作)。
  3. 在实时预览或手机上试用每次修改(预览)。
  4. 使用 Creator 或更高套餐,构建 iOS 和 Android 应用并提交到应用商店(发布概览)。

许可与支持

许可

为你生成的应用归你所有;模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。

帮助

  • 指南:模板、助手和发布。
  • 在帮助中联系支持;通常 1–2 个工作日内回复。
  • 在你的副本中,可向 AI 助手询问任何界面或文件。

由 FluxNative 制作

支持政策

常见问题

免费吗?

复制免费模板不收费,也不耗积分;Premium 模板按网站一次性购买。聊天修改和构建会消耗积分。

我拥有什么?

为你生成的应用归你所有。模板代码仍归 InspireUI 所有,并授权你在自己的应用中使用(条款 › 我们的知识产权)。

需要懂代码吗?

不需要。用日常语言让助手修改;需要时随时可看完整源码。

自带后端吗?

不带。完整应用会写明所需后端,你在 Server 中连接自己的;设计模板使用示例数据运行。

可以改设计吗?

可以。设计标签页可设置品牌色、颜色、字体和圆角,不耗积分;其余由助手修改。

发布需要哪个套餐?

Creator 或更高套餐,用你自己的 Apple 和 Google 账号构建并上传到商店。Premium 模板的应用在连接其网站后,任何套餐都能构建。

能下载源码吗?

可以,使用“下载源码”或“推送到 GitHub”,前提是你的工作区已购买套餐、积分或付费模板。Premium 模板的应用还需连接其网站。

如果是用较早版本的 FluxNative 做的呢?

你的副本照常可用。让助手把它更新到较新的功能,如应用语言和货币;这是最后一个设置步骤。

准备好打造你的应用了吗?

从 Taper Barbershop Booking App 开始,通过聊天修改任何内容。你的副本包含完整源代码。

免费复刻,无需信用卡。

Taking a little longer than usual…

Loading FluxNative