Build a business dashboard or internal tool from an empty repository

An internal tool is a spreadsheet that grew up: a place where your team signs in, sees the numbers, and gets things done. It has more moving parts than a website, which is why building it as a sequence of small, reviewed changes pays off, from an empty repository to a tool your staff use every day.

Overview

Example project. Northwind Rentals hires out garden equipment. They want one screen for bookings, a list of overdue returns, revenue by month, and a download for the accountant. Staff sign in; nobody else gets in. The project is an illustration written to show the steps.

An admin screen built this way: a messaging-assistant platform grew its admin console one screen per issue, inside more than 770 merged pull requests.

Pick the stack

These pieces are mainstream, have free plans, and the agents know them well.

PiecePickWhy
App frameworkNext.jsScreens and the server code behind them live in one project, so each feature is one pull request.
Database and sign-inSupabaseA hosted Postgres database with email sign-in built in. The free plan covers a small team's tool.
StylingTailwind CSSStyles sit next to the markup, so each visual change shows in one place.
HostingVercelMade by the Next.js team. Connect the repository and every merge deploys; every pull request gets its own preview address.

Verified November 2026: Next.js 16 and Tailwind CSS 4 are current. Supabase's free plan includes two projects, a 500 MB database and 50,000 monthly active users, and pauses a project after a week without use; Pro starts at $25 a month. Vercel's Hobby plan is free for personal, non-commercial use; a business deploys on Pro at $20 a month per developer seat.

Create the repository and the accounts

On GitHub, create a repository called northwind-ops and tick Add README. On Supabase, create two free projects: northwind-dev for building and northwind-live for real data. In ProPR, open Repositories, choose Add Repository, enter the repository name, and switch on Visual previews. Add the development database keys to your agent's environment variables in ProPR's agent settings. The live keys go into Vercel later and never into the repository.

Tell the planner what you want

Open Planner Studio, pick the repository, and describe the tool as you would to a new colleague.

Build an internal tool for Northwind Rentals with Next.js, Tailwind and Supabase. Staff sign in with their email. Keep a staff list in the database; anyone can request a magic link, but an account that is not on the list sees nothing, even after signing in. Every data read and the export check that list on the server. Screens: a bookings table (customer, item, start, due back, status) with search and an "add booking" form; an overdue list showing days late; a revenue-by-month chart for the last twelve months; and a CSV download of all bookings for a date range. Keep the design plain and quick. Use the Supabase keys from the environment, never hard-coded.

The planner comes back with a plan. Ask the chat to change what you like: "split sign-in from the project setup", "add sample data so screens have something to show". Approve it, and ProPR files one GitHub issue per task.

One planned task: context, numbered requirements naming the files to touch, and acceptance criteria
One generated task: context, numbered requirements, and acceptance criteria.

The plan becomes issues

Every issue carries a checklist of what done means. A plan for this tool looks like this.

  1. Set up the Next.js project with Tailwind, Supabase and sample dataDone when: the project builds, connects to the development database using keys from the environment, and a script fills it with fifty sample bookings.
  2. Staff sign-in with emailDone when: a visitor sees only the sign-in screen; a staff list table holds the invited email addresses; a listed address signs in with a magic link; and every data read, mutation and export checks the list on the server and refuses anyone else. Tests cover two refusals: a visitor who is not signed in, and an account that signed in but is not on the staff list, which cannot read bookings or download the CSV.
  3. Bookings table and add-booking formDone when: the table lists bookings with search by customer and item, the form adds a booking with validation, and both look right at desktop and tablet widths.
  4. Overdue returns listDone when: bookings past their due date show in a separate list with days late, sorted most late first, and a count appears in the navigation.
  5. Revenue-by-month chartDone when: a bar chart shows the last twelve months of revenue from completed bookings, with the total for the current month above it.
  6. CSV downloadDone when: a date range picker and a download button produce a CSV that opens in a spreadsheet with one row per booking, and a test checks the column headers.

Run the plan as an epic

These tasks build on each other, so choose Execute as Epic PR. ProPR runs the issues in order on one shared branch and opens one epic pull request into main that lists every piece. Each issue still gets its own pull request, with the agent's summary, the tests it ran, and screenshots of the new screen filled with the sample data. The epic playbook shows the shape on a public run from ProPR's own repository.

Executing a plan as individual tasks: one issue running with its pull request, two waiting, and Queue Remaining to start them in order
Individual tasks or an Epic PR; Queue Remaining chains the rest.

What you look at in each pull request

  • The screenshot. Does the bookings table show the columns you asked for? Is the overdue list obvious?
  • The summary against the checklist. The agent says what it built and tested. Compare it with the issue.
  • The preview address. Vercel builds every pull request. Open it, sign in with a test email, add a booking, try the search.

For the sign-in pull request, ask a second model to look before you merge, and tell it the question: can an account that signed in but is not on the staff list reach any booking data or the export? Write /review with a model name as a comment and the review comes back as numbered findings; /fix applies the ones you keep. The second-model review playbook walks through it.

@youcommented on the pull request

The overdue count should be red when it is above zero and should link to the overdue list. Also show the customer's phone number in that list; staff call them from here.

A new commit arrives on the same pull request with a fresh screenshot. When the last piece merges into the epic branch, ProPR tells you the epic is ready, and you merge it into main. Vercel deploys the tool.

How the tool grows

Every request from staff becomes an issue: "let me mark a booking returned from the overdue list", "email me each Monday's overdue list". A bigger change gets a plan. Hand an open-ended improvement to a goal, such as making every screen usable on a phone, and check its checkpoints on the draft pull request. Schedule an automation that reads the repository weekly and reports slow queries or missing tests; the scheduled report playbook shows one.

Good to know

  • Secrets stay out of the repository. The agent gets the development keys through its environment variables in ProPR; the live keys live in Vercel. Pull requests show the code, never the keys.
  • The agent's workspace is a Linux container with Node.js and Python and no screen. It installs a headless browser with npm to capture each screen, filled with the sample data from the first issue.
  • ProPR builds and reviews; Vercel deploys. A merged pull request goes live without anyone touching a server.
  • Customer data enters the live database only through the tool itself, by staff who signed in. Agents work against the development project.

Start your tool.

Everything above happens in a browser. ProPR Hosted gives you your own instance, run by the ProPR team; the live demo lets you click through plans and pull requests first.

On your own server, self-host ProPR, free and open source.

All Build something walkthroughs