Back end developer to build out my Claude web app mockup

Posted 7 hours ago

Worldwide

Summary

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.

  • More than 30 hrs/week
    Hourly
  • 1-3 months
    Duration
  • Expert
    Experience Level
  • $20.00

    -

    $50.00

    Hourly
  • Remote Job
  • Ongoing project
    Project Type
Skills and Expertise
Mandatory skills
JavaScript
CSS
Web Development
Activity on this job
  • Proposals:50+
  • Interviewing:
    0
  • Invites sent:
    0
  • Unanswered invites:
    0
About the client
Member since Apr 27, 2018
  • Australia
    Melbourne7:11 AM
  • $46K total spent
    157 hires, 57 active
  • 1,393 hours

Explore similar jobs on Upwork

Application InstallationFixed-price‐ Posted 2 weeks ago
Android
Smartphone
Tablet
iPhone
Amazon Web Services
Java
Unity

How it works

  • Post a job icon
    Create your free profile
    Highlight your skills and experience, show your portfolio, and set your ideal pay rate.
  • Talent comes to you icon
    Work the way you want
    Apply for jobs, create easy-to-by projects, or access exclusive opportunities that come to you.
  • Payment simplified icon
    Get paid securely
    From contract to payment, we help you work safely and get paid securely.
Want to get started? Create a profile

About Upwork

  • Rating is 4.9 out of 5.
    4.9/5
    (Average rating of clients by professionals)
  • G2 2021
    #1 freelance platform
  • 49,000+
    Signed contract every week
  • $2.3B
    Freelancers earned on Upwork in 2020

Find the best freelance jobs

Growing your career is as easy as creating a free profile and finding work like this that fits your skills.

Trusted by

  • Microsoft Logo
  • Airbnb Logo
  • Bissell Logo
  • GoDaddy Logo