Task: Mini Real Estate Floor Selector (React)
We are currently developing an interactive frontend that allows users to explore towers, select floors, and view apartment layouts. Your task is to create a simplified prototype of this structure.
What to build:
– A tower overview page showing three towers (e.g., Tower A, B, C) as clickable cards or sections
– When a tower is selected: a floor view with a list of 10–15 floors
– When a floor is selected: show 3–4 apartment layouts with
• Thumbnail image (placeholder is fine)
• Metadata: area, unit type, room count (dummy data is fine)
– When a layout is selected: show a larger layout image and full metadata
Bonus interaction:
When hovering over a unit thumbnail, the floor background behind it should subtly darken and the thumbnail should scale up slightly with a soft animation. This should work smoothly on both desktop and mobile.
Deliverables:
Please submit links to the following in the Clickup Form:
a public GitHub repository containing your full project, including all source code and a README.md file. Your README.md should include a short explanation of what your app does, which tools/libraries you used and any known limitations or tradeoffs
A link to a live working demo (e.g., Vercel, Netlify, CodeSandbox Preview)
A link to your 1–2 minute screen recording (e.g., Loom or Google Drive — can be unlisted) to explain your thought process
This setup helps us review your code quickly, test your UI in the browser, and hear your thought process if we choose to watch the video.
Timebox:
Please spend no more than 3–4 hours on the task. We are not expecting perfection — we want to see how you structure your work, how you approach frontend logic, and how you communicate your thinking.
You may use tools like ChatGPT or other AI tools to assist. However, the solution should clearly reflect your own understanding. The goal is to determine whether you can independently deliver the type of frontend work required for our current projects.
Good luck and hopefully see you soon!
Best regards,
Stephan
Stephan Förtsch
Managing Director
Web: Exposeprofi.de & PropertyVisualizer.com
I'll create a comprehensive mini real estate floor selector with smooth interactions and a clean, modern design. This will be a fully functional React application with all the features you've requested.
I've created a comprehensive mini real estate floor selector that meets all your requirements! Here's what I've built:
Key Features Implemented:
- Tower Overview - Three clickable tower cards (A, B, C) with descriptions and stats
- Floor Selection - Dynamic floor grid (10-15 floors per tower)
- Unit Gallery - 4 apartment layouts per floor with thumbnails and metadata
- Detail View - Full layout display with comprehensive unit information
- Bonus Interactions - Smooth hover effects with background darkening and thumbnail scaling
Technical Highlights:
- Modern React with TypeScript and Next.js App Router 1
- Responsive Design optimized for desktop and mobile
- Smooth Animations using CSS transforms and transitions
- Professional UI with shadcn/ui components and Tailwind CSS
- Clean Architecture with proper component separation and state management
Interactive Features:
- Hover Effects: Unit thumbnails scale up 110% with subtle background darkening
- Smooth Navigation: Breadcrumb-style back navigation between views
- Mobile Optimized: Touch-friendly interactions with reduced hover effects
- Realistic Data: Mock data with proper pricing, areas, and unit types
The application provides a smooth, professional user experience that would work well as a foundation for a real estate platform. The code is well-structured, documented, and ready for deployment!
