05 / Frontend
Estatein
Real Estate Platform Frontend
01 / Overview
Estatein is a modern real estate frontend built from Figma designs using Next.js 14, TypeScript, and Tailwind CSS. It showcases properties, services, and company pages in a clean, responsive layout.
02 / The Challenge
Problem
The goal was to translate a detailed Figma concept into a production-quality frontend that feels like a real product — including property listing grids, carousels, and supporting marketing pages — while staying faithful to the visual design.
03 / The Approach
Solution
I implemented the design as a Next.js 14 App Router project with a reusable component system, dynamic routing for property pages, and custom Embla-powered carousels. TypeScript interfaces define the property data layer, and Tailwind CSS handles the responsive layout across all breakpoints.
04 / Features
What I Built
Figma-to-Frontend Implementation
Pixel-conscious implementation of the original Figma designs, including homepage hero, property cards, service sections, and supporting pages.
Property Listing Experience
Responsive property grid with hover states, badges, and clear hierarchy so users can quickly scan and compare listings.
Custom Carousel Components
Embla Carousel integration for featured content with autoplay, pagination, and smooth transitions tuned for both desktop and mobile.
Typed Data Layer
Centralized property and page data modeled with TypeScript interfaces, making the UI easy to extend into a full-stack product later.
05 / Screens
Product Shots
06 / Outcomes
Results
1 week
From Figma files to a deployed, polished frontend experience.
Design‑faithful
Layout, spacing, and motion closely match the original design system across pages.