Figma to React.js UI Development

Budget: ₹12500 - ₹37500

We are building House True, a premium, trust-first real estate platform for Delhi focused on Rent + Buy.

The complete website UI has already been designed in Figma, including typography, spacing, layout, component structure, and user flows. We are looking for a React UI developer to convert the approved Figma into clean, reusable, responsive React.js UI code. This is not a design role. The Figma is final, and the developer’s role is to convert it into high-quality React UI code exactly as designed.

This scope is for frontend UI development only. Backend, database, API integration, and final Next.js integration will be handled separately. The React UI code must be created in a way that allows smooth handoff into Next.js later, with no rework needed. The delivered project must use mock/static data so that the UI behaves like a real working product during local testing. The developer will build the following pages in React UI code: Home, Listing Page, Property Detail Page, Insights/Blog, Insights Home, Category Pages, Article Detail Page, (OTP UI), Media Unlock Flow, Shortlist Page, Compare Page in Focus Mode, FAQ Page, Contact Us Page, For Owners Page, simple internal/static pages, and 404 Page. In addition, the developer must create reusable global components such as Header, Footer, sticky bottom navigation for mobile, property cards, chips, tags, badges, trust strips, CTA buttons, forms, modals, bottom sheets, and loading/empty/error/disabled states.

The UI must behave like a complete usable website when run locally. All page links, menus, and front-end flows must work correctly using mock/static data. This includes filter bottom sheet open/close, apply/reset filters, real-time filtering behavior, sticky bottom navigation, shortlist toggle, compare mode, OTP UI flow, toast messages, expandable sections, and modal/bottom-sheet behavior that does not break scrolling. Although backend integration is not part of this project, the local React build should not feel like a collection of static screens. It should feel like a connected working website prototype.

The developer should use clear placeholder variables such as propertyId, title, price, location, bhk, area Sqft, furnishing, availability, images, verified Date, and other relevant data points. Repeated elements such as property cards, chips, badges, and sections must follow a stable and reusable structure. Predictable data attributes should be added where useful, such as data-property-id, data-action="shortlist", data-action="compare", and data-section="media-unlock" so that analytics and backend wiring can be added later. Headings, labels, and repeatable UI text should be centralized where practical rather than being hardcoded everywhere.

The visual output must preserve the intended House True design language: calm, premium, minimal, trust-first, and advisory rather than salesy. The selected developer must follow the Figma strictly and must not change the spacing, typography, layout, component behavior, or styling decisions. No Bootstrap, Material UI, prebuilt UI kits, or template systems should be used. This project requires custom implementation in React.js only.

The final deliverables must include a complete React.js UI codebase, fully responsive frontend, all pages implemented, working UI interactions, reusable components, mock/static data, and a README file with setup instructions. The project must run properly on local environment, and the entire website must be fully navigable with all required front-end interactions functioning correctly. The code should be clean enough for a second developer to take over and integrate into Next.js without having to rebuild the UI.

Applicants must begin their proposal with HOUSE TRUE UI and include: 2–3 examples of premium UI work, their timeline estimate, and confirmation that they understand this is strict Figma-to-code execution with no design changes.

Screening Questionnaire: Q1. Which CSS approach will you use for this project and why?

Q2. How will you structure the React codebase for scalability?

Q3. How will you ensure the UI matches Figma exactly?

Q4. Will you build reusable components (e.g., property cards, filters, modals)? How?

Q5. How will you handle mock data for this project?

Q6. How will you implement navigation between pages in React?

Q7. How will you implement real-time filtering without page reload?

Q8. How will you implement shortlist (save/unsave) functionality?

Q9. How will you ensure modals and bottom sheets do not break scrolling?

Q10. How will you structure your React code so it can be easily integrated into Next.js later?

Q11. Will your code require rewriting when moving to Next.js?

Q12. Which tools will you use to code quality?

Q13. How will you ensure there are no console errors?

Q14. How will you ensure the full website works locally?