How to build a job card app with vibe coding: a step-by-step plan

Paper job cards get lost, WhatsApp threads get buried, and nobody knows how long jobs really take. For plumbers, electricians, maintenance companies, appliance repairers and IT support teams, a simple job card app is often the first piece of software that pays for itself. This guide walks through planning and building one with AI tools, in the order that keeps rework and credits low.

Step 1: write down who uses it

Most job card systems have three or four roles. Name them the way your business talks:

• Owner or manager: sees everything, including reports and staff performance.
• Office administrator: logs new jobs, assigns technicians, talks to clients.
• Technician: sees only their own jobs, updates the status, adds notes and photos, captures the client's sign-off.
• Client (optional): gets updates and can see the status of their own jobs.

Write one line per role on what they may and may not do. "Technicians can't delete jobs or see invoices" is the kind of rule that saves you three correction prompts later.

Step 2: decide what you record

Keep the first version small. A solid starting set of tables:

• Clients: name, contact person, phone, email, address.
• Jobs: client, site address, fault description, priority (Low, Normal, Urgent), preferred date, assigned technician, status, notes.
• Job updates: job, technician, time, note, photos.
• Sign-offs: job, client name, signature or confirmation, date and time.

Decide every status in advance: New, Scheduled, On the way, On site, Waiting for parts, Complete. A status list you change later means changing every screen and automation that uses it.

Step 3: list the screens

• Office: a job list with filters (status, technician, priority), a form to log a job, a job detail page.
• Technician: "My jobs today" on a phone, a job page with big buttons to change the status, add a note, take photos and capture sign-off.
• Manager: a dashboard with open jobs, jobs per technician, average time to complete and jobs completed this month.

Design the technician screens for a phone first. That is where the app lives or dies.

Step 4: decide what happens on its own

Automations are where the time savings are. Common ones:

1. When a job is assigned, notify the technician.
2. When the technician is on the way, send the client an SMS or WhatsApp message.
3. When a job is complete, email the client a job report with the photos and sign-off.
4. Every Monday at 08:00, send the manager a summary of last week's jobs.

For WhatsApp, use the official WhatsApp Business Platform through an approved provider. Personal WhatsApp numbers aren't meant for automated messages and can be blocked. Our guide to WhatsApp automation for small businesses explains the setup, templates and opt-in rules.

Step 5: the POPIA basics

A job card app stores clients' names, phone numbers and addresses, and possibly photos of their homes. That is personal information under POPIA. At minimum:

• Store only what you need.
• Make sure technicians can see only the jobs assigned to them.
• Tell clients why you collect their details and how long you keep them.
• Get consent before sending marketing messages; service updates about their own job are different from promotions.

Our POPIA checklist for vibe-coded apps covers the rest.

Step 6: build it in phases

With the plan written, build in this order, checking each phase before the next:

1. Foundation: sign-in and the four roles.
2. Data: Clients and Jobs, with the office screens to log and assign jobs.
3. Technician app: My jobs, status buttons, notes, photos, sign-off.
4. Automations: assignment alert, on-the-way message, completion report.
5. Dashboard: the manager's numbers.
6. Polish: wording, empty states, offline-friendly touches, your logo.

Use the exact table, field and status names from your plan in every prompt. If you use an app builder such as Lovable, connect it to a database such as Supabase so your records live in an account you own.

Step 7: test with last week's jobs

Before anyone relies on it, take five real jobs from last week and run them through the app from start to finish: logged by the office, assigned, updated on a phone, signed off, reported. Ask a technician, not the person who built it, to do the phone part. Fix what confuses them before you launch.

Step 8: launch to a small group

Start with one or two technicians for a week while paper runs alongside. Then move the whole team over, and retire the paper cards. Measure the things you wanted to improve: jobs lost, time to complete, client complaints, hours spent on admin.