Next.js UI Redesign & API Update
Budget: ₹1,500 – ₹12,500 INR
I’m ready to give my existing Next.js app a full facelift. You’ll begin by cloning the repo and exploring the current component tree, routes, and API layer so you understand what’s already in place. Nothing in the front-end is off-limits—the entire interface can be refreshed—so feel free to reorganise or replace components as long as every feature still works.
Once you’re comfortable with the codebase, I’ll share the new Figma file and a short Loom walkthrough. Your job is to refactor or rebuild each screen so it aligns with the updated design system: colour tokens, typography scales, spacing, and responsive breakpoints. While modernising the UI, you’ll also extend a few backend endpoints and wire them into the front-end so the added features surface seamlessly.
Current stack
• Next.js 13 (app router) with React 18 and TypeScript
• TailwindCSS (open to emotion/styled-components if you prefer)
• Node/Express REST API plus server actions
Deliverables
• Pixel-perfect screens that mirror Figma across desktop, tablet, and mobile
• Updated endpoints and hooks integrated without breaking existing flows
• Clean Git history with small, descriptive PRs
• Unit tests for new logic (Jest / React Testing Library)
• Updated README outlining setup, scripts, and new API specs
Acceptance criteria
1. Visual match to Figma (<2 px variance on primary spacing).
2. Existing Cypress e2e suite passes unaltered.
3. No console or server errors during regression run.
4. New features fully functional and documented.
When you reply, please share two recent Next.js redesigns (before/after if possible) and your usual turnaround for a mid-sized screen. Excited to see what you can do with the new design!
Once you’re comfortable with the codebase, I’ll share the new Figma file and a short Loom walkthrough. Your job is to refactor or rebuild each screen so it aligns with the updated design system: colour tokens, typography scales, spacing, and responsive breakpoints. While modernising the UI, you’ll also extend a few backend endpoints and wire them into the front-end so the added features surface seamlessly.
Current stack
• Next.js 13 (app router) with React 18 and TypeScript
• TailwindCSS (open to emotion/styled-components if you prefer)
• Node/Express REST API plus server actions
Deliverables
• Pixel-perfect screens that mirror Figma across desktop, tablet, and mobile
• Updated endpoints and hooks integrated without breaking existing flows
• Clean Git history with small, descriptive PRs
• Unit tests for new logic (Jest / React Testing Library)
• Updated README outlining setup, scripts, and new API specs
Acceptance criteria
1. Visual match to Figma (<2 px variance on primary spacing).
2. Existing Cypress e2e suite passes unaltered.
3. No console or server errors during regression run.
4. New features fully functional and documented.
When you reply, please share two recent Next.js redesigns (before/after if possible) and your usual turnaround for a mid-sized screen. Excited to see what you can do with the new design!