React UI From Figma Designs
Budget: $250 – $750 USD
I have a complete set of Figma screens for a brand-new web application and now need those designs turned into a production-ready React interface. The work starts with translating each screen into clean, responsive components and ends with a smooth OAuth sign-in flow wired to our backend API.
The core of this first milestone is user authentication. An OAuth flow (Google and GitHub are already configured on the server) must feel seamless on desktop and mobile. While later phases may introduce data visualisation and complex forms, this sprint is all about getting the shell of the app live, fast, and maintainable.
You are free to work in JavaScript or TypeScript—TypeScript is preferred for type safety—but either way the codebase should rely on modern React (hooks, functional components, code-splitting, lazy loading) and a contemporary styling approach such as CSS Modules, Styled-Components, or Tailwind. Please keep the bundle lean, follow common linting conventions, and document any reusable components in a short README.
Deliverables
• Pixel-perfect, fully responsive React components matching every Figma artboard
• OAuth sign-in/out flow integrated with our API endpoints
• Environment-agnostic build scripts (Vite, CRA, or similar) with clear setup instructions
• Source code in a public or shared Git repository, including commit history
Acceptance criteria
• Visual match to Figma within a 2 px tolerance on common breakpoints
• Lighthouse performance score ≥ 90 on a fresh build
• No console warnings or lint errors in production mode
If this aligns with your workflow, let’s get the repo handed off and the first screens in review.
The core of this first milestone is user authentication. An OAuth flow (Google and GitHub are already configured on the server) must feel seamless on desktop and mobile. While later phases may introduce data visualisation and complex forms, this sprint is all about getting the shell of the app live, fast, and maintainable.
You are free to work in JavaScript or TypeScript—TypeScript is preferred for type safety—but either way the codebase should rely on modern React (hooks, functional components, code-splitting, lazy loading) and a contemporary styling approach such as CSS Modules, Styled-Components, or Tailwind. Please keep the bundle lean, follow common linting conventions, and document any reusable components in a short README.
Deliverables
• Pixel-perfect, fully responsive React components matching every Figma artboard
• OAuth sign-in/out flow integrated with our API endpoints
• Environment-agnostic build scripts (Vite, CRA, or similar) with clear setup instructions
• Source code in a public or shared Git repository, including commit history
Acceptance criteria
• Visual match to Figma within a 2 px tolerance on common breakpoints
• Lighthouse performance score ≥ 90 on a fresh build
• No console warnings or lint errors in production mode
If this aligns with your workflow, let’s get the repo handed off and the first screens in review.