RentLoop

Booking software for hire businesses in Namibia.

• Now (Phase 1): the everyday tools a hire business needs: stock, bookings and a calendar.
• Later (Phase 2): a public marketplace where customers find and book rentals.

The platform never holds rental money. Customers pay the business directly; the app only records the payment.

Full requirements: SRS document

Contents

1. What works so far
2. Run it on your computer
3. Set up Claude Code
4. Put it online
5. How the code is organised
6. Rules to know before changing code
7. Working as two partners
8. What to build next

---

What works so far

Feature	What it does
Sign in	Log in with a one-time email code, then set up your business.
Inventory	Add items with a photo, a quantity (one listing can cover 300 identical chairs), price per day, deposit, replacement value, units under repair, a low stock warning, and turnaround days for cleaning or setup. Group items into packages (for example "Wedding 100": a tent, 100 chairs and 10 tables) with one price per day.
Bookings	Staff create bookings for phone, walk-in or WhatsApp customers. They see what is free for the dates first, then accept, decline, cancel (with a reason), check out, return and close. Dates and quantities can be changed until the items go out; the double-booking check runs again and the change is logged. Requests nobody answers expire after 24 hours (you can change this in Settings). Every change is saved in the booking's history.
WhatsApp quotes	Staff build a quote (packages, items, dates, delivery, setup, discount) and send it with one tap on WhatsApp. The customer opens the link without an account, sees each item's photo, the total, deposit and your terms, and accepts or asks a question. Accepting checks the items are still free and turns the quote into a booking request.
Payment records	Each booking shows what is due, paid and outstanding, and how much deposit you hold. Staff record payments, refunds, deposits received, returned or kept (with a reason) by cash, EFT, eWallet or card. Mistakes are voided with a reason, never deleted. Recorded only: the money goes to you directly.
Checkout and return	At handover, staff count what goes out, tick that they checked the customer's ID, and take condition photos with the phone camera. At return they count, per item, how many came back fine, damaged or missing. Late returns are marked, and every night bookings past their end date that are still out become Overdue.
Customer booking link	Send the customer their booking on WhatsApp. They see what they booked, what they still owe and the payments you recorded, and can confirm each one. They also see the checkout and return records and tap "This is correct" or say what is wrong. Disputing a return opens a problem on the booking.
Business details	Settings page for your WhatsApp number, payment terms, rental terms, how long quotes stay valid and how long you have to answer a booking request.
Customers

---

Run it on your computer

What you need

• Node.js 22 or newer
• A Supabase database, either:
  • Online (easiest): a free project at supabase.com. Best for computers with less than 8 GB of RAM.
  • Local: runs inside Docker Desktop. Needs about 8 GB of RAM or more. On Windows, Docker also needs WSL (run wsl --install as administrator, then restart).

Option A: online database (recommended)

1. Create a free project at supabase.com.
2. Set up the tables (run these in the VS Code terminal):

   npm install
   npx supabase login
   npx supabase link --project-ref <your-project-ref>
   npx supabase db push
   

   The project ref is the code in your Supabase dashboard address, for example supabase.com/dashboard/project/abcd1234.
3. Copy .env.example to .env.local and fill in your Project URL and publishable key from Supabase → Project Settings → API.
4. Start the website:

   npm run dev
   

5. Open http://localhost:3000 and sign in with your email. Supabase emails you a login link. (See Put it online, step 3, to get a typed code instead.)

Option B: local database (Docker)

npm install
npm run db:start            # starts Supabase in Docker and creates the tables
cp .env.example .env.local  # paste in the API URL and key that db:start printed
npm run dev                 # open http://localhost:3000

Nothing is really emailed when running locally:

Tool	Address	Use it to
Mailpit	http://127.0.0.1:54324	Read your login code
Supabase Studio	http://127.0.0.1:54323	Browse the database

After every pull: update your database

Do this every time you pull, before npm run dev. When one of us adds a file to supabase/migrations/, the other's database needs it too. Otherwise pages that use it fail, for example the homepage shows no plans.

Online database (Option A): see what's missing:

npx supabase migration list

Each row shows a Local and a Remote version. If every row has both, you're up to date and there's nothing to do (for example, because we share the same Supabase project and the other partner already applied them). If a row has a Local version but an empty Remote, apply it:

npx supabase db push

Type Y when asked. It only adds the new changes; it doesn't delete any data. Then run npx supabase migration list again: every row should now have both.

Local database (Option B):

npx supabase migration up

If that fails, npm run db:reset rebuilds the database from scratch (this deletes local data).

What each new migration does is written in a comment at the top of its file in supabase/migrations/.

Useful commands

Command	What it does
npm run lint	Checks code style
npm run typecheck	Checks TypeScript types
npm test	Runs the unit tests
npm run test:db	Checks the booking, quote, payment, checkout, return, booking edit, request expiry, item photo, package, report, customer and plan rules against the local database
npm run db:reset	Rebuilds the local database from scratch (deletes local data)
npx supabase migration new <name>	Starts a new database change

Run lint, typecheck and test before every push.

---

Set up Claude Code

Both partners: do this once on every computer you code on. We share one Claude account, but that only shares the claude.ai skills (Word, PDF, Excel and so on). The skills below are installed on the computer itself, so each of us has to install them. Without them, Claude can't follow the workflow in CLAUDE.md.

CLAUDE.md tells Claude how we work: plan first, use the theme colours, then simplify, review and test before every commit. It names these tools:

Tool	What it does	Where it comes from
theme-factory	Colour and font themes (our theme is Botanical Garden)	Install below
frontend-design	Guidance for designing and restyling screens	Install below
webapp-testing	Opens the app in a hidden browser and takes phone and desktop screenshots	Install below, plus Playwright
/simplify	Tidies the code you just changed without changing what it does	Built into Claude Code
/code-review	Checks your changes for bugs before you commit	Built into Claude Code

1. Install the skills

They go in your personal Claude folder (~/.claude/skills), so they work in any folder you open and are never committed to this repo.

Windows (PowerShell):

$src = "$env:TEMP\anthropic-skills"
if (Test-Path $src) { git -C $src pull } else { git clone --depth 1 https://github.com/anthropics/skills.git $src }
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
foreach ($s in "theme-factory", "frontend-design", "webapp-testing") {
  Copy-Item -Recurse -Force "$src\skills\$s" "$HOME\.claude\skills\"
}

Mac or Linux:

rm -rf /tmp/anthropic-skills
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropic-skills
mkdir -p ~/.claude/skills
cp -R /tmp/anthropic-skills/skills/{theme-factory,frontend-design,webapp-testing} ~/.claude/skills/

2. Install Playwright (for screenshots)

webapp-testing needs Python and Playwright:

pip install playwright
python -m playwright install chromium

On a Mac, use pip3 and python3.

3. Optional: Figma

Only if you design screens in Figma first. This lets Claude read a Figma link:

claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

The first time you use it, Claude asks you to log in to Figma.

4. Check it worked

Start a new Claude Code chat (skills only load when a chat starts) and ask: "What skills do you have?" You should see theme-factory, frontend-design and webapp-testing in the list.

To sign in for screenshots, Claude opens its own hidden browser. It asks you to paste the login link from the Supabase email: right-click the link and choose Copy link rather than clicking it.

---

Put it online

1. Database: create a Supabase project and push the tables (step 2 of Option A). This also creates the photo and payment-proof storage buckets and two scheduled jobs: the nightly overdue check and a request expiry check every 15 minutes (see them in Supabase under Integrations → Cron).
2. Website: import this repository at vercel.com/new and add the settings from .env.example, using the values from your Supabase project's API settings. Set NEXT_PUBLIC_SITE_URL to your Vercel address so quote links sent on WhatsApp point to it.
3. Admins: after you sign in once, make yourself a platform admin in the Supabase SQL editor, then open /admin to set the bank and eWallet details, the invoice name and address, and the plan prices:

   insert into public.platform_admins (user_id)
   select id from auth.users where email = '[email protected]';
   

4. Login links: in Supabase, go to Authentication → URL Configuration:
   • Set Site URL to your Vercel address.
   • Add https://<your-vercel-address>/auth/callback under Redirect URLs.
   • To let people type a code instead of clicking a link, add {{ .Token }} to the Magic Link email template.

---

How the code is organised

Tools used

Part	Tool
Website	Next.js 16, TypeScript, Tailwind CSS (mobile first)
Database and logins	Supabase (Postgres, Auth, row level security, Storage for photos, Cron for nightly jobs)
Hosting	Vercel
Tests	Vitest for TypeScript, a SQL script for database rules. Both run on GitHub Actions.

Note: Next.js 16 works differently from older versions. For example, middleware.ts is now proxy.ts, and params / searchParams are promises. The docs for this version are in node_modules/next/dist/docs/.

Folders

Folder	What's inside
src/app/login, src/app/setup	Sign in and first-time business setup
src/app/(app)/calendar	Month view per item
src/app/(app)/bookings	Booking list, new booking, booking page
src/app/(app)/inventory	Item and package lists, add and edit
src/app/(app)/quotes	Quote list, quote builder, quote page with the WhatsApp button
src/app/(app)/customers	Customer list and customer page
src/app/(app)/plan	The business's plan, paying for an upgrade, invoices
src/app/admin	Platform admin: approve payments, set plan prices and payment details
src/app/(app)/reports	Reports and their CSV downloads
src/app/(app)/settings	Business details shown on quotes
src/app/q/[token]	The customer's quote page (no sign-in needed)
src/app/b/[token]	The customer's booking page, where they confirm payments and handover records (no sign-in needed)
src/components	Shared UI pieces
src/lib	Dates, money, booking states, quote totals, handover counts, WhatsApp links, Supabase clients
src/proxy.ts	Keeps the login fresh; sends signed-out visitors to /login
supabase/migrations	Database tables, rules and security
supabase/tests	Database rule checks (npm run test:db)

---

Rules to know before changing code

1. Bookings only change through database functions: create_booking, accept_booking, decline_booking, cancel_booking, update_booking, record_checkout, record_return and set_booking_status. The website calls them with supabase.rpc(...). Nobody can edit the bookings table directly, so the double-booking check can't be skipped.
2. Booking states follow SRS section 4.2. The database decides which changes are allowed. src/lib/bookings.ts keeps a copy only to decide which buttons to show, and a test fails if the two don't match.
3. Every table has row level security: each business only sees its own data. Customers reach a quote or booking only through its link, using get_public_quote, accept_public_quote, get_public_booking, confirm_public_payment, get_public_handovers and respond_public_handover; they can't read any table directly.
4. Dates are stored as YYYY-MM-DD in Namibian time. A booking includes both its first and last day.
5. Payments are recorded through record_payment and corrected with void_payment. Records are never edited or deleted, and the database refuses refunds above what was paid or deposit returns above what was received.
6. Packages are saved through save_package and archive_package. A booking or quote stores the package (at the price it was booked at) and the items it contains, so stock is checked item by item as usual. Units that came from a package are charged at the package price, not twice.
7. Reports come from one function, business_report, so the screen and the CSV files always agree. Money in reports is only what staff recorded.
8. Plans are enforced by the database. The item and user limits are checked by triggers, reports leave out the Pro sections on Free, and only review_plan_payment (platform admins) can switch a plan on. The plan in force comes from business_plan(), so an expired plan is Free without any scheduled job.
9. Photos go straight from the phone to Supabase Storage. Handover photos are in the private handover-photos bucket; item photos are in the public item-photos bucket so quote pages can show them. Paths always start with the business id, and only that business's staff can upload there. Handover photos sit in a folder per booking (), and only that business's staff can open them. Large photos never pass through Vercel.

---

Working as two partners

Split the work by layer so you rarely edit the same files:

	Partner A: screens	Partner B: data and rules
Owns	src/app, src/components	supabase/migrations, supabase/tests, src/lib
Does	Pages, forms, mobile layout, WhatsApp links, wording	Tables, database functions, permissions, tests, background jobs

For each feature: agree on the function names and inputs first (in an issue or pull request). Partner B then builds the database part and its tests while Partner A builds the screen on top.

Before you start: make sure Claude Code is set up on your computer (Set up Claude Code). We share a Claude account, but the skills are installed per computer, so each of us has to do it.

Day to day:

1. Pull the latest main, then make a branch for the feature: git switch -c quotes-whatsapp
2. Keep each pull request small (one feature). GitHub automatically runs lint, typecheck, tests, the build and the database checks.
3. The other partner reviews and merges. Never push straight to main.
4. Never edit a migration that is already on main. Add a new one instead.

---

What to build next

The rest of Phase 1, in SRS order:

#	Feature	Details	Who
1	Phone sign-in (FR-AC-01)	Once an SMS provider is chosen. Also staff invites and roles.
2	Notifications (FR-NT-01)	SMS or WhatsApp messages for new requests, reminders and plan renewals (plans already remind in the app). Shares the SMS provider with phone sign-in.

After that, test it with 2 or 3 real hire businesses before starting the Phase 2 marketplace.