Build Mobile React PWA for Construction Sales
Budget: $250 – $750 CAD
Project Title: React + Supabase Mobile PWA for Lead Calling (Construction Sales)
Project Description
We need a simple, mobile‑first React PWA to help our construction sales team manage outbound calls. The app will connect directly to Supabase (free tier) as its database. All business logic (priority calculation, cooldown, 5‑call limit, status changes) will run in the frontend.
An external prediction engine supplies only the stage value for each lead; this value is written into Supabase by a separate process. Your app will simply read that value and use it in the priority formula – no direct integration with the prediction engine is required. Everything else (call tracking, status updates, reappearance dates) is handled entirely within this app.
The UI follows a single‑screen transforming design:
Call Screen – Shows the next eligible lead (highest priority).
Post‑Call Form – Records outcome (answered yes/no, transfer, reappearance date, needs measure).
Confirmation Screen – Confirms submission and reloads the next lead.
No custom backend is needed – just a React app talking to Supabase. We want a clean, maintainable codebase that can easily be extended later (authentication, real‑time, etc.).
Key Features (Must-Have)
1. Lead Queue & Priority
Fetch all pending leads from Supabase.
Compute a priority score for each lead:
priority = (stage × 100) + urgency – (call_count × 20)
Determine the next eligible lead based on:
Status = 'pending'
No future next_appearance date (or date ≤ today)
If last_called exists, at least 48 hours have passed (cooldown)
Display the lead’s details: name, phone, address, stage, urgency, call count, last called, and priority score.
Show a small preview of upcoming leads (next 2‑3) below.
2. Call & WhatsApp Actions
CALL button – Opens native dialer with lead’s phone number (tel: link).
WhatsApp button – Opens WhatsApp with a pre‑filled greeting (e.g., Hello {name}).
Buttons disabled if no lead is available.
3. Post‑Call Workflow
User taps “Call Over – Log Outcome” to open a form.
Step 1: Was the call answered? (Yes / No)
If No:
Increment call_count and missed_call_count.
Set last_called to current timestamp.
If call_count reaches 5 → change status to 'visit'.
Go to confirmation.
If Yes:
Reset missed_call_count to 0.
Increment call_count.
Show transfer options: Current Clients, Pending, Visit.
Optional “Needs measure” checkbox (forces status = 'current' and urgency = 10).
Optional reappearance date picker (only for Pending).
After saving, if call_count reaches 5 → auto‑set status to 'visit'.
All updates are sent to Supabase.
4. Confirmation & Next Lead
After form submission, show a simple confirmation: “Next lead queued” with a button to return to the call screen (which fetches and displays the next eligible lead).
5. Data Persistence
Use Supabase JavaScript client for all database operations.
No authentication required for this phase, but code should be structured to easily add it later.
Technical Stack & Requirements
Frontend: React (functional components + hooks). Use Vite or Create React App – your choice.
Backend: Supabase (free tier). We will provide the database schema and anon key.
Styling: Mobile‑first, responsive design. You may use Tailwind CSS, Bootstrap, or plain CSS – keep it clean.
State Management: Local state + Supabase queries is sufficient; no Redux/MobX needed.
Deployment: The app will be deployed as a static site (Netlify/Vercel). You can either include deployment or we'll handle it.
Code Quality: Well‑commented, modular, and with a clear separation of concerns (e.g., a services/supabase.js file for API calls).
Database Schema (Supabase)
We will create a table named leads with the following columns:
Column Type Notes
id uuid Primary key (default gen_random_uuid())
name text
phone text
address text
stage int2 1‑10, provided by prediction engine
urgency int2 1‑10, manually set
call_count int2 default 0
missed_call_count int2 default 0
last_called timestamptz nullable
status text 'pending', 'current', 'visit', 'trash' (default 'pending')
next_appearance date nullable
created_at timestamptz default now()
You will write queries like:
javascript
const { data: pendingLeads } = await supabase
.from('leads')
.select('*')
.eq('status', 'pending');
Then filter and sort in JavaScript.
Deliverables
Complete React source code in a Git repository (GitHub, GitLab, etc.).
A README.md with:
Setup instructions (install dependencies, environment variables).
How to configure Supabase (URL and anon key).
Any notes on the logic.
(Optional but appreciated) A live demo deployed to Netlify/Vercel.
Timeline
Maximum 2 weeks from start date. We expect a simple, functional MVP.
Budget
Fixed price range: $400 – $800 (depending on experience and quality).
Please provide your fixed‑price bid in your proposal.
How to Apply
In your proposal, please include:
Links to previous React + Supabase (or similar) projects you've built.
A brief outline of how you would structure the app (components, data flow).
Confirmation that you can deliver within 2 weeks.
Your fixed‑price bid.
Additional Notes
The construction prediction engine supplies only the stage value. It writes this value into Supabase via an external process; your app will simply read it from the database. No direct API call to the prediction engine is required.
This is a standalone project; no integration with existing codebases is required.
We are open to suggestions for improving the UI/UX, but keep it simple and functional.
If you have experience with PWA features (manifest, service workers) that’s a plus but not required.
We look forward to your bids!
Project Description
We need a simple, mobile‑first React PWA to help our construction sales team manage outbound calls. The app will connect directly to Supabase (free tier) as its database. All business logic (priority calculation, cooldown, 5‑call limit, status changes) will run in the frontend.
An external prediction engine supplies only the stage value for each lead; this value is written into Supabase by a separate process. Your app will simply read that value and use it in the priority formula – no direct integration with the prediction engine is required. Everything else (call tracking, status updates, reappearance dates) is handled entirely within this app.
The UI follows a single‑screen transforming design:
Call Screen – Shows the next eligible lead (highest priority).
Post‑Call Form – Records outcome (answered yes/no, transfer, reappearance date, needs measure).
Confirmation Screen – Confirms submission and reloads the next lead.
No custom backend is needed – just a React app talking to Supabase. We want a clean, maintainable codebase that can easily be extended later (authentication, real‑time, etc.).
Key Features (Must-Have)
1. Lead Queue & Priority
Fetch all pending leads from Supabase.
Compute a priority score for each lead:
priority = (stage × 100) + urgency – (call_count × 20)
Determine the next eligible lead based on:
Status = 'pending'
No future next_appearance date (or date ≤ today)
If last_called exists, at least 48 hours have passed (cooldown)
Display the lead’s details: name, phone, address, stage, urgency, call count, last called, and priority score.
Show a small preview of upcoming leads (next 2‑3) below.
2. Call & WhatsApp Actions
CALL button – Opens native dialer with lead’s phone number (tel: link).
WhatsApp button – Opens WhatsApp with a pre‑filled greeting (e.g., Hello {name}).
Buttons disabled if no lead is available.
3. Post‑Call Workflow
User taps “Call Over – Log Outcome” to open a form.
Step 1: Was the call answered? (Yes / No)
If No:
Increment call_count and missed_call_count.
Set last_called to current timestamp.
If call_count reaches 5 → change status to 'visit'.
Go to confirmation.
If Yes:
Reset missed_call_count to 0.
Increment call_count.
Show transfer options: Current Clients, Pending, Visit.
Optional “Needs measure” checkbox (forces status = 'current' and urgency = 10).
Optional reappearance date picker (only for Pending).
After saving, if call_count reaches 5 → auto‑set status to 'visit'.
All updates are sent to Supabase.
4. Confirmation & Next Lead
After form submission, show a simple confirmation: “Next lead queued” with a button to return to the call screen (which fetches and displays the next eligible lead).
5. Data Persistence
Use Supabase JavaScript client for all database operations.
No authentication required for this phase, but code should be structured to easily add it later.
Technical Stack & Requirements
Frontend: React (functional components + hooks). Use Vite or Create React App – your choice.
Backend: Supabase (free tier). We will provide the database schema and anon key.
Styling: Mobile‑first, responsive design. You may use Tailwind CSS, Bootstrap, or plain CSS – keep it clean.
State Management: Local state + Supabase queries is sufficient; no Redux/MobX needed.
Deployment: The app will be deployed as a static site (Netlify/Vercel). You can either include deployment or we'll handle it.
Code Quality: Well‑commented, modular, and with a clear separation of concerns (e.g., a services/supabase.js file for API calls).
Database Schema (Supabase)
We will create a table named leads with the following columns:
Column Type Notes
id uuid Primary key (default gen_random_uuid())
name text
phone text
address text
stage int2 1‑10, provided by prediction engine
urgency int2 1‑10, manually set
call_count int2 default 0
missed_call_count int2 default 0
last_called timestamptz nullable
status text 'pending', 'current', 'visit', 'trash' (default 'pending')
next_appearance date nullable
created_at timestamptz default now()
You will write queries like:
javascript
const { data: pendingLeads } = await supabase
.from('leads')
.select('*')
.eq('status', 'pending');
Then filter and sort in JavaScript.
Deliverables
Complete React source code in a Git repository (GitHub, GitLab, etc.).
A README.md with:
Setup instructions (install dependencies, environment variables).
How to configure Supabase (URL and anon key).
Any notes on the logic.
(Optional but appreciated) A live demo deployed to Netlify/Vercel.
Timeline
Maximum 2 weeks from start date. We expect a simple, functional MVP.
Budget
Fixed price range: $400 – $800 (depending on experience and quality).
Please provide your fixed‑price bid in your proposal.
How to Apply
In your proposal, please include:
Links to previous React + Supabase (or similar) projects you've built.
A brief outline of how you would structure the app (components, data flow).
Confirmation that you can deliver within 2 weeks.
Your fixed‑price bid.
Additional Notes
The construction prediction engine supplies only the stage value. It writes this value into Supabase via an external process; your app will simply read it from the database. No direct API call to the prediction engine is required.
This is a standalone project; no integration with existing codebases is required.
We are open to suggestions for improving the UI/UX, but keep it simple and functional.
If you have experience with PWA features (manifest, service workers) that’s a plus but not required.
We look forward to your bids!