Web App Development: React & Supabase
Budget: $30 – $250 USD
Project: Web App for Task Management Between Customer and Supplier (React + Supabase)
We are looking to develop a simple and user-friendly web app that allows residents (customers) to create and submit tasks directly to their local supplier. The app should be easy enough for anyone to use — including users aged 60+ — and work smoothly on both mobile and desktop (as a PWA).
Purpose
The goal is to simplify communication between customers and suppliers. Customers should easily report issues such as “leaking faucet,” “door sticks,” or “water damage on ceiling.” The supplier receives the task, contacts the customer by phone, and can update the status or add internal notes as the work progresses.
Technology
Frontend: React (preferably with TypeScript and Vite).
Backend: Supabase (PostgreSQL, Auth, and File Storage).
The solution will be delivered as a web app (not App Store app) hosted on Supabase.
Customer Features
When first using the app, the customer registers with:
– Name (required)
– Phone number (required)
– Self-chosen 4-digit PIN
– Address (street, house number, postal code, city)
Once registered, the customer can create a task with:
– Title (e.g. “Toilet running”)
– Short description
– Ability to take or upload photos
Photos must be captured directly using the React camera component (getUserMedia) and uploaded to Supabase Storage. Each task can include up to 5 photos. Once submitted, the task is locked for the customer. The customer can log in later with phone number + PIN to view task status but cannot edit it.
Supplier Features
Suppliers receive all new tasks from customers in their area and can see the customer’s name, phone, and address. The supplier always calls the customer first.
Tasks progress through four stages:
Created
Viewed
Date agreed
Completed
Suppliers can add internal notes and sub-tasks (checklists) that are visible only to them. Tasks can be assigned to internal employees or to subcontractors.
Subcontractor Features
A subcontractor technically functions as an independent supplier. This means a subcontractor can both receive tasks from a main supplier and have their own customers who create tasks directly for them. The system is designed to scale naturally — every subcontractor can act as a primary supplier with their own team, customers, and subcontractors. Subcontractors have the same permissions as suppliers: they can create, view, assign, and update tasks, and manage their own users.
Login and Verification
Customers log in using their phone number and the 4-digit PIN they created. No SMS or verification code is sent. Verification happens when the supplier calls the customer for the first time. Suppliers and subcontractors log in via Supabase Auth (email or phone) with roles such as admin, planner, or worker.
Data Model (overview)
Customer: name, phone, address, PIN (hashed), status (unverified/verified).
Task: title, description, photos, status, assigned user, timestamps.
Supplier: company info, users, roles, linked customers and subcontractors.
The system must support hierarchical relationships between suppliers and subcontractors, where both can act as primary contact for their own customers.
Functional Requirements
The interface must be simple, responsive, and mobile-optimized.
Photos captured directly in React and uploaded to Supabase Storage (max 5 photos, up to 10 MB each).
Customers can only view their own tasks (read-only).
Suppliers can see all their own tasks; subcontractors see only assigned ones (unless they have their own customers).
Supplier dashboard must include filters (All, Today, Tomorrow, Completed).
Status changes must be logged (timestamp + user).
PINs stored as hashed (argon2id).
Rate limiting on login attempts.
Supplier can reset a customer’s PIN after verification.
Minimum Viable Product (MVP)
Customer registration (name, phone, PIN, address).
Task creation (title, description, photos via camera).
Customer login (phone + PIN).
Customer task overview (status view only).
Supplier and subcontractor dashboards with ability to view and update tasks.
Subcontractors must be able to function as suppliers with their own customers.
Design and UX
The app must be intuitive enough that users can understand it without guidance: large input fields, clear buttons, short texts, and logical flow. Focus on usability and performance — not heavy graphics.
Security
PINs stored securely (argon2id hash).
Max 5 login attempts per 30 minutes.
Device cookie for “remember this device” (90 days).
Suppliers can reset PINs if a customer forgets it.
Development Conditions
We have full access to everything developed — including Supabase, database, and source code. We expect the developer to perform functional testing continuously so that bugs and issues are resolved before our internal review. Our testing will focus on UI/UX and flow — not on debugging.
Purpose of MVP
To create a stable and simple platform where customers can easily report issues, and suppliers and subcontractors can efficiently manage, update, and complete tasks. The system must be intuitive, secure, and production-ready as a web app.
We are looking to develop a simple and user-friendly web app that allows residents (customers) to create and submit tasks directly to their local supplier. The app should be easy enough for anyone to use — including users aged 60+ — and work smoothly on both mobile and desktop (as a PWA).
Purpose
The goal is to simplify communication between customers and suppliers. Customers should easily report issues such as “leaking faucet,” “door sticks,” or “water damage on ceiling.” The supplier receives the task, contacts the customer by phone, and can update the status or add internal notes as the work progresses.
Technology
Frontend: React (preferably with TypeScript and Vite).
Backend: Supabase (PostgreSQL, Auth, and File Storage).
The solution will be delivered as a web app (not App Store app) hosted on Supabase.
Customer Features
When first using the app, the customer registers with:
– Name (required)
– Phone number (required)
– Self-chosen 4-digit PIN
– Address (street, house number, postal code, city)
Once registered, the customer can create a task with:
– Title (e.g. “Toilet running”)
– Short description
– Ability to take or upload photos
Photos must be captured directly using the React camera component (getUserMedia) and uploaded to Supabase Storage. Each task can include up to 5 photos. Once submitted, the task is locked for the customer. The customer can log in later with phone number + PIN to view task status but cannot edit it.
Supplier Features
Suppliers receive all new tasks from customers in their area and can see the customer’s name, phone, and address. The supplier always calls the customer first.
Tasks progress through four stages:
Created
Viewed
Date agreed
Completed
Suppliers can add internal notes and sub-tasks (checklists) that are visible only to them. Tasks can be assigned to internal employees or to subcontractors.
Subcontractor Features
A subcontractor technically functions as an independent supplier. This means a subcontractor can both receive tasks from a main supplier and have their own customers who create tasks directly for them. The system is designed to scale naturally — every subcontractor can act as a primary supplier with their own team, customers, and subcontractors. Subcontractors have the same permissions as suppliers: they can create, view, assign, and update tasks, and manage their own users.
Login and Verification
Customers log in using their phone number and the 4-digit PIN they created. No SMS or verification code is sent. Verification happens when the supplier calls the customer for the first time. Suppliers and subcontractors log in via Supabase Auth (email or phone) with roles such as admin, planner, or worker.
Data Model (overview)
Customer: name, phone, address, PIN (hashed), status (unverified/verified).
Task: title, description, photos, status, assigned user, timestamps.
Supplier: company info, users, roles, linked customers and subcontractors.
The system must support hierarchical relationships between suppliers and subcontractors, where both can act as primary contact for their own customers.
Functional Requirements
The interface must be simple, responsive, and mobile-optimized.
Photos captured directly in React and uploaded to Supabase Storage (max 5 photos, up to 10 MB each).
Customers can only view their own tasks (read-only).
Suppliers can see all their own tasks; subcontractors see only assigned ones (unless they have their own customers).
Supplier dashboard must include filters (All, Today, Tomorrow, Completed).
Status changes must be logged (timestamp + user).
PINs stored as hashed (argon2id).
Rate limiting on login attempts.
Supplier can reset a customer’s PIN after verification.
Minimum Viable Product (MVP)
Customer registration (name, phone, PIN, address).
Task creation (title, description, photos via camera).
Customer login (phone + PIN).
Customer task overview (status view only).
Supplier and subcontractor dashboards with ability to view and update tasks.
Subcontractors must be able to function as suppliers with their own customers.
Design and UX
The app must be intuitive enough that users can understand it without guidance: large input fields, clear buttons, short texts, and logical flow. Focus on usability and performance — not heavy graphics.
Security
PINs stored securely (argon2id hash).
Max 5 login attempts per 30 minutes.
Device cookie for “remember this device” (90 days).
Suppliers can reset PINs if a customer forgets it.
Development Conditions
We have full access to everything developed — including Supabase, database, and source code. We expect the developer to perform functional testing continuously so that bugs and issues are resolved before our internal review. Our testing will focus on UI/UX and flow — not on debugging.
Purpose of MVP
To create a stable and simple platform where customers can easily report issues, and suppliers and subcontractors can efficiently manage, update, and complete tasks. The system must be intuitive, secure, and production-ready as a web app.