Case study · Demo project
Rotabee
A site and working demo for a fictional staff rota app for cafés and small shops. We wrote the brief as if a client had sent it, then reviewed our own work against it.
- Built by
- Vladislav
- Built with
- Next.js, TypeScript, Tailwind
- Services
- Stripe checkout, email, booking
- Tests
- 14 logic tests, lint and build on every pull request
The brief
Small business owners lose evenings to rota spreadsheets. The site had to explain the product, prove it works and get people started, without inventing customers.
What we built
- A rota builder that runs in the browser: add, edit and drag shifts, with live warnings for overtime, short rest, double booking and gaps
- A phone preview that only shows what has been published, where staff can take open shifts
- Paste from Excel or Google Sheets, with unreadable cells flagged, and download the week as CSV
- A three-step free trial that recommends a plan from the team’s size
- Stripe checkout, a contact form that sends email, and search pages for each type of business
Decisions worth explaining
Show the product instead of describing it
At £9 a month nobody books a sales call, so the main path is a free trial and a builder that works with no sign-up. It’s also what makes this project convincing in a client meeting.
Keep the logic away from the pages
The warnings, spreadsheet parsing and CSV export live in plain functions with their own tests. That’s how we caught edge cases like reading “9-5” as 09:00 to 17:00 and stopping a pasted name from running as a spreadsheet formula.
No fake proof
There are no invented customers presented as real. Example stories and reviews are labelled, and the savings calculator starts from the visitor’s own numbers.
Private by default
Without API keys, each service has a local stand-in, so the whole site can be tested on one computer. Those test tools only switch on with an explicit setting, so a hosted copy keeps them closed.
What we tested
Logic tests, lint and a production build run on every pull request. We also checked 20 pages on desktop and phone for layout, tap targets and contrast, in both themes. Doing that caught project cards overlapping on phones.
What it doesn’t do
Rotabee is a demo. There are no real accounts or database, the rota is saved in your browser, the phone grid scrolls sideways, and overnight shifts aren’t supported. A real product would start with accounts and a database.