Modernize SaaS UI (Figma to React/Tailwind)
Budget: $8 – $15 USD
Revamp SaaS Frontend (React + Tailwind + Supabase) — 18 Pages from Figma
⸻
Description
I need a frontend developer to revamp my SaaS web app’s UI based on a Figma guide. The backend, APIs, and Supabase integration are already built. The goal is to modernize the design, clean up navigation, and ensure role-based visibility (hide/show buttons).
Scope of Work
• Update ~18 pages/components in the React/Tailwind app:
• Simple pages (5–6) → Login, Profile, Settings, Error states, etc.
• Medium pages (7–8) → Contacts list/detail, CSV Import Wizard, Campaign list, Users/Roles, Exports, Admin Switcher.
• Complex pages (3–4) → Campaign Wizard (with MMS & A/B testing), Inbox (threaded replies), Billing screen.
• Apply Figma styles (colors, typography, spacing, buttons, tables, wizards).
• Implement reusable components:
• Table (with filters/sorting).
• Form inputs (react-hook-form + zod).
• Wizard steps (reusable layout).
• Ensure responsive design, accessibility, and role-based button hiding.
• No backend changes needed — just consume existing API endpoints.
Tech Stack (already in repo)
• Frontend: React + Vite + TypeScript, TailwindCSS, shadcn/radix UI.
• State/Auth: Supabase Auth + Context.
• Backend: Node/Express (already complete).
• DB: Supabase (Postgres).
• Deployment: Railway.
Deliverables
• Updated frontend code (PRs into existing GitHub repo).
• Pixel-perfect components matched to Figma design system.
• Functional navigation + no “white screen” crashes when clicking around.
• Role-based UI visibility (Admin vs Guest vs User).
• Smoke-tested flows:
• Import contacts → launch campaign → inbox replies visible.
• Admin switcher works.
• Billing screen renders subscription/usage states.
Skills Needed
• Strong React + TypeScript.
• TailwindCSS + shadcn/radix UI.
• React Hook Form + Zod (validation).
• Experience with Supabase or Firebase auth.
• Bonus: Storybook or component-driven design.
What I’ll Provide
• GitHub repo with current app.
• Figma file (style guide + example screens).
• API contracts (no changes required).
• Supabase + Railway staging environments.
⸻
Description
I need a frontend developer to revamp my SaaS web app’s UI based on a Figma guide. The backend, APIs, and Supabase integration are already built. The goal is to modernize the design, clean up navigation, and ensure role-based visibility (hide/show buttons).
Scope of Work
• Update ~18 pages/components in the React/Tailwind app:
• Simple pages (5–6) → Login, Profile, Settings, Error states, etc.
• Medium pages (7–8) → Contacts list/detail, CSV Import Wizard, Campaign list, Users/Roles, Exports, Admin Switcher.
• Complex pages (3–4) → Campaign Wizard (with MMS & A/B testing), Inbox (threaded replies), Billing screen.
• Apply Figma styles (colors, typography, spacing, buttons, tables, wizards).
• Implement reusable components:
• Table (with filters/sorting).
• Form inputs (react-hook-form + zod).
• Wizard steps (reusable layout).
• Ensure responsive design, accessibility, and role-based button hiding.
• No backend changes needed — just consume existing API endpoints.
Tech Stack (already in repo)
• Frontend: React + Vite + TypeScript, TailwindCSS, shadcn/radix UI.
• State/Auth: Supabase Auth + Context.
• Backend: Node/Express (already complete).
• DB: Supabase (Postgres).
• Deployment: Railway.
Deliverables
• Updated frontend code (PRs into existing GitHub repo).
• Pixel-perfect components matched to Figma design system.
• Functional navigation + no “white screen” crashes when clicking around.
• Role-based UI visibility (Admin vs Guest vs User).
• Smoke-tested flows:
• Import contacts → launch campaign → inbox replies visible.
• Admin switcher works.
• Billing screen renders subscription/usage states.
Skills Needed
• Strong React + TypeScript.
• TailwindCSS + shadcn/radix UI.
• React Hook Form + Zod (validation).
• Experience with Supabase or Firebase auth.
• Bonus: Storybook or component-driven design.
What I’ll Provide
• GitHub repo with current app.
• Figma file (style guide + example screens).
• API contracts (no changes required).
• Supabase + Railway staging environments.
Related categories:
PHP
JavaScript
Website Design
Node.js
PostgreSQL
React.js
Frontend Development
Figma