コンテンツへスキップ

美容のテンプレート

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 アカウント — Free プランはアプリを2つまで持てます。
  • 始めるのにバックエンド不要 — 自分のものを接続するまでサンプルデータで動きます。
  • Creator 以上 — ネイティブビルドとストアへのアップロード用です。
  • ストアアカウント — 公開には Apple Developer Program(年額 99 米ドル)と Google Play(1回 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 はウェブサイトごとに1回の購入です。チャットでの変更とビルドにはクレジットを使います。

何を所有しますか?

あなた向けに作られたアプリはあなたのものです。テンプレートのコードは InspireUI のもので、あなたのアプリで使うライセンスが付与されます(利用規約 › 当社の知的財産)。

コードの知識は必要ですか?

いいえ。普通の言葉でアシスタントに変更を頼めます。必要ならソース全体も使えます。

バックエンドは付属しますか?

いいえ。完全なアプリは必要なバックエンドを示し、サーバーで自分のものを接続します。デザインはサンプルデータで動きます。

デザインは変更できますか?

はい。デザインタブでブランドカラー、色、フォント、角をクレジットなしで設定できます。残りはアシスタントが変更します。

公開にはどのプランが必要ですか?

Creator 以上で、ご自身の Apple と Google のアカウントでビルドとストアへのアップロードができます。Premium テンプレートのアプリは、ウェブサイトを接続すればどのプランでもビルドできます。

ソースをダウンロードできますか?

はい。ワークスペースでプラン、クレジット、有料テンプレートのいずれかを購入済みなら、ソースをダウンロードまたは GitHub にプッシュできます。Premium テンプレートのアプリはウェブサイトの接続も必要です。

以前の FluxNative で作った場合は?

コピーはそのまま動きます。アプリの言語や通貨などの新機能に更新するにはアシスタントに頼んでください。最後のセットアップ手順です。

自分のアプリにしてみませんか?

Taper Barbershop Booking App から始めて、チャットで何でも変更できます。コピーには完全なソースコードが含まれます。

無料でコピー。クレジットカード不要。

Taking a little longer than usual…

Loading FluxNative