Rakan Real Estate

Rakan Real Estate is a modern Arabic real-estate platform focused on property discovery, listing requests, authenticated user flows, and admin-only management routes. I worked on it as a production-style Next.js application with a strong focus on RTL user experience, reusable UI sections, validated forms, and scalable frontend architecture.

The app is built around real estate workflows: users can browse properties, search by filters, view property details, submit property requests, add listings, manage their profile, and access protected dashboard/admin screens based on their role.

Core Features

1. Arabic RTL Experience: Built for Arabic users with localized routes and layout behavior using next-intl.
2. Property Discovery: Property listing pages for buy, rent, offers, and full property search.
3. Advanced Search Filters: Search by type, property type, condition, region, city, district, rooms, bathrooms, price, area, and features.
4. Property Details: Dynamic detail pages with metadata for each property.
5. Property Requests: Validated request form for users looking for a specific property.
6. Add Listing Flow: Structured route for submitting a new real-estate listing.
7. Authentication: NextAuth-based login, registration, password reset, OTP verification, and session handling.
8. Role-Based Routing: Protected dashboard and admin routes with middleware access checks.
9. Profile Area: User profile page with personal data and listing/favorite-style UI.
10. API Routes: App Router API endpoints for auth, contact, profile, property search, property request, and listing submission.

Technologies Used

Frontend

1. Next.js 15
2. React 19
3. TypeScript
4. Tailwind CSS
5. Radix UI / shadcn-style components
6. Lucide React

State and Data

1. TanStack React Query
2. Zustand
3. React Hook Form
4. Zod validation

Auth and Routing

1. NextAuth v5
2. JWT sessions
3. Role-based middleware
4. next-intl localization

Technical Work

The project uses the Next.js App Router with route groups under a locale segment. Public pages include the homepage, buy, rent, offers, contact, and property listings. Authenticated routes include request and profile flows. Admin-only routes include dashboard/admin screens.

The property search flow is schema-driven. Filters are validated with Zod, converted into query parameters, fetched through API routes, and cached through React Query. This keeps the UI responsive while keeping request logic isolated from presentation components.

Forms were structured with React Hook Form and shared validation schemas. This made property requests, profile updates, and auth flows easier to maintain and safer to extend.

UI and UX Focus

The interface was designed around a real-estate browsing journey:

• A full-screen hero with property search tabs.
• Property cards with location, area, plot ID, price, and type data.
• Sections for platform value, property management, electronic services, neighborhoods, and reviews.
• RTL spacing and typography suitable for Arabic content.
• Mobile-friendly layouts for repeated property cards and profile listings.

Challenges and Solutions

RTL Layout Consistency

Arabic real-estate interfaces need strong RTL handling across headers, cards, filters, forms, and dashboards. The solution was to make direction and spacing part of the component structure instead of applying one-off fixes.

Search State

Search filters can become difficult to manage when many fields are involved. I used schema-based defaults, typed filter inputs, and a query builder so the search page stays predictable.

Protected Routes

The project needed public, authenticated, and admin-only pages. Middleware checks session state and user role before routing, which keeps protected screens from leaking to the wrong users.

Reusable Sections

The homepage has multiple content sections, so I kept them componentized: hero, about, property cards, why-us, property management, services, neighborhoods, and reviews. This makes the landing page easier to rearrange and maintain.

Conclusion

Rakan Real Estate shows my ability to build a full frontend product, not only isolated UI components. It combines Next.js, authentication, localization, form validation, data fetching, protected routes, responsive RTL design, and real-estate-specific workflows into one coherent application.