Icon Real Estate Platform

Overview

Icon Real Estate is a full-stack real estate platform for Addis Ababa, Ethiopia, combining a modern Next.js frontend with a robust Laravel API backend. The platform enables the company to showcase premium properties, manage projects, publish content, and handle customer inquiries through a sophisticated admin dashboard—all while delivering an exceptional user experience with enterprise-grade SEO optimization.

Problem Solved: Traditional real estate websites lack the flexibility to manage complex property portfolios, project updates, and customer relationships efficiently. This platform provides a complete digital ecosystem for luxury real estate operations with transparent pricing, modern architecture, and premium community features.

Key Features

User-Facing Features

• Property & Project Showcase – Browse luxury properties and flagship projects with advanced filtering (type, status, location, price range)
• Dynamic Content Management – Blog posts, project progress updates, and company news with rich media support
• Inquiry System – Multi-channel contact forms with appointment scheduling and threaded conversations
• SEO-Optimized Pages – Structured data, dynamic sitemaps, Open Graph tags, and Twitter cards for maximum visibility
• Progressive Web App (PWA) – Offline support, installable app experience, and service worker caching
• Responsive Design – Mobile-first approach with Tailwind CSS following a strict 60-30-10 color distribution rule
• Multi-Media Support – Image galleries, YouTube integration, interactive maps, and optimized WebP conversions

Admin Dashboard Features

• Content Management – Full CRUD operations for properties, projects, blog posts, team members, and locations
• Media Library – Spatie Media Library integration with automatic image optimization and multiple collections
• Inquiry Management – Track customer inquiries, appointments, and threaded communications
• Role-Based Access Control – Spatie Permission package with granular permissions (Admin, Agent, Client roles)
• Analytics Dashboard – Real-time statistics, recent activities, and performance metrics
• Rich Text Editor – TipTap WYSIWYG editor for blog content with inline image uploads
• Project Progress Tracking – Timeline updates with media attachments for construction milestones

Architecture

Frontend (Next.js)

• App Router with server components for optimal performance
• Server Actions for mutations (create, update, delete operations)
• NextAuth.js for authentication with JWT strategy
• Axios for API communication with centralized error handling
• Shadcn/ui + Radix UI for accessible component primitives
• Tailwind CSS 4 with custom design tokens and strict style guidelines

Backend (Laravel)

• Modular Architecture – Domain-driven design with Auth, People, Enquiries, Leads, and Settings modules
• RESTful API – Versioned endpoints (/api/v1/) with RFC 7807 error responses
• Sanctum Authentication – Token-based API authentication with role/permission checks
• Spatie Packages – Query Builder, Media Library, Activity Log, Permissions, Response Cache
• OpenAPI Documentation – Auto-generated Swagger UI with L5-Swagger
• Docker Deployment – Multi-container setup with PHP-FPM, Nginx, MySQL, and Redis

Notable Implementations

1. Hydration-Safe Architecture

Strict separation of server/client components with icon mapping utilities to prevent React hydration errors. All data functions return plain objects, never React components.

2. Advanced SEO Strategy

• Dynamic metadata generation from company profile API
• Structured data (JSON-LD) for RealEstateAgent schema
• Automatic sitemap generation with priority/frequency
• Open Graph and Twitter Card optimization
• Canonical URLs and alternate language tags

3. Media Optimization Pipeline

Automatic image conversions (thumb, large, WebP) with Spatie Media Library. Multiple collections per model (featured_image, gallery, plans) with lazy loading and responsive srcsets.

4. Modular Backend Design

Domain-driven modules (Auth, People, Enquiries) with clear separation:

• Domain Layer: Models, business logic
• Interfaces Layer: Controllers, Requests, Resources, Routes
• Shared Layer: Enums, exceptions, utilities

5. Role-Based Access Control

Spatie Permission integration with predefined roles (Admin, Agent, Client) and granular permissions. Middleware guards on both frontend routes and backend API endpoints.

Tech Stack

• Frontend: Next.js 16 (React 19, TypeScript), Tailwind CSS 4, Shadcn/ui
• Backend: Laravel 12 (PHP 8.3)
• Database: MySQL 8
• DevOps: Docker, GitHub Actions, Vercel/Static Hosting