Back end developer to build out my Claude web app mockup
Бюджет: $20.0 - $50.0
HOURLY / FULL_TIME
⭐ 4.86 (52)
Australia
javascript, css, web-programming, web-design, php, html, react-js, api
Full-Stack Developer — Build a Direct Response Marketing Web App (Next.js + Supabase)
Overview
We're building Research OS, a web app that automates direct response marketing workflows — from market research through to production-ready ad scripts. The app connects to multiple LLMs (Claude, Gemini, GPT, Perplexity) via OpenRouter, pulls data from an existing research tool, and tracks ad performance.
We have complete HTML/CSS mockups for every screen (16 pages, light and dark mode, designed at 1440px). The design work is done — we need a developer to build the functional application from these mockups.
Tech Stack
Frontend: Next.js (App Router)
Backend/DB: Supabase (Postgres, Auth, Row-Level Security)
LLM Integration: OpenRouter (single API gateway to Claude, Gemini, GPT, Perplexity)
Styling: Tailwind CSS (converting from existing vanilla CSS mockups)
Performance Data: Windsor.ai API → Google Cloud BigQuery (read-only integration)
Deployment: Vercel?
What You'll Build
The app has a fixed sidebar layout (248px) with a scrollable main content area. All screens exist as interactive HTML/CSS prototypes with working light/dark mode toggles, which you'll use as your design spec.
Core Modes (the main workflow)
1. Brands — Command Centre
CRUD for brands (company name, website, target audience, tone, compliance rules)
Stats per brand: script count, research docs, mined posts, reference ads
4-tab expanded view: Profile, Console Data, Docs & Briefs, Performance
Connection to external Research Console API (REST, we'll provide docs)
2. Research Mode
Input screen: form with collapsible sections, variable fields the user fills in before generation
Generation: sends prompts to multiple LLMs via OpenRouter, returns responses in parallel
Review screen: 7-step stepper (Awareness → Audience → Competitors → Life Force 8 → UMP → Hooks → Summary)
Each step shows response cards from 2-3 LLMs with Approve / Rewrite / Copy actions
Approved sections export (append) to a rolling Google Doc or downloadable document
3. Ideation Mode
4-step stepper: Angles → UMP/UMS → Hypotheses → Summary
LLM generates angles and UMPs from approved research data
Hypothesis builder: structured form (If we / Using / Targeting / We expect)
Select/deselect cards, selections persist and feed into downstream modes
4. Copywriting Mode (direct script generation)
Auto-loads strategy context from Research + Ideation (selected UMP, hypothesis, awareness level, LF8 drivers)
Config: ad format dropdown, duration, number of variations
Generates script variations from multiple LLMs, each with scene-by-scene output
Per-script actions: Approve, Edit, Copy, Send to Copy Chief
Approved scripts export to rolling doc + save to Output Library
5. Reference Ads Mode (script from a competitor ad)
Input: upload or paste a reference ad (video URL or image), set strategy parameters
Output: full structured output — strategy breakdown, production notes, 5 hook options, 4-scene script, setup & talent notes
Same approve/edit/export flow as Copywriting mode
6. Copy Chief Mode (independent review)
Receives a script from Copywriting or Reference Ads mode
Opens a NEW LLM session with a critic-only system prompt (no generation context)
Displays: scorecard (4 metrics, 1-10), overall verdict (Pass/Revise/Kill), section-by-section reviews with quoted script excerpts
Revise verdicts include suggested rewrites
"Accept & return to output" sends the user back
Library & Storage
7. Output Library
All approved scripts in a searchable, filterable grid
Columns: brand, format, awareness level, date, performance metrics (CTR, hook rate, hold rate, CPA)
Performance data pulled from Windsor.ai → BigQuery
8. Swipe File
3-column grid of saved competitor ads
Filter by brand, format (YouTube, Facebook, TikTok, Instagram, Display, Landing page)
Cards: thumbnail, platform badge, hook quote, brand tag, technique tags
Sources: Ad Library import, manual save, Research
Console import
Integrations
Integration Purpose Type
OpenRouter LLM gateway (Claude, Gemini, GPT, Perplexity) API calls with streaming responses
Research Console Pull mined Reddit posts, YouTube videos, reviews per brand REST API (we provide docs)
Windsor.ai Ad performance data from Meta Business Manager REST API → store in BigQuery
Google Cloud BigQuery Read performance metrics for Output Library Read-only SQL queries
Google Docs API (optional) Append approved content to a rolling doc OAuth + Docs API
Auth & Multi-User
Supabase Auth (email/password, Google OAuth)
Row-Level Security: users only see their own brands and content
No complex team/permissions system needed for v1 — single user per account
What We Provide
16 complete HTML/CSS mockups with working light/dark mode (your design spec — pixel-accurate)
Full flow documentation explaining every screen, how they connect, and the data model
API docs for the Research Console integration
OpenRouter account and API key
Windsor.ai and BigQuery credentials for performance data
Ideal Candidate
Strong experience with Next.js App Router and Supabase (Postgres, Auth, RLS)
Has built apps with LLM API integrations (streaming responses, multi-model)
Comfortable with Tailwind CSS and converting vanilla CSS designs to Tailwind
Experience with BigQuery or similar data warehouse reads is a plus
Can work from detailed mockups without needing a Figma file
Good communication — we'll do async updates with weekly check-ins
Deliverables
Working Next.js application deployed on Vercel
Supabase project with schema, migrations, and RLS policies
All 8 modes/pages functional with LLM generation, review flows, and export
Light/dark mode toggle matching the mockups
OpenRouter integration with streaming LLM responses
Basic performance data display from BigQuery
Clean, documented codebase with README
How to Apply
Please include in your proposal:
A link to a similar project you've built (Next.js + Supabase + LLM integration preferred)
Your estimated timeline for a v1
Any questions about the scope or technical approach
We're happy to share the mockups and flow documentation with shortlisted candidates before starting.
Відкрити на Upwork