ListingLens

AI-powered real-estate listing analyzer for evaluating Dubai properties through pricing context, red flags, neighborhood insights and comparable listings.

View the live application

Overview

ListingLens helps users explore property listings and understand them more clearly before making a decision.

Users can browse a curated Dubai property catalog, filter listings, review property details and generate AI-assisted analysis covering pricing, potential risks, neighborhood quality and comparable properties.

The project was built as a complete product experience, including public listing discovery, AI analysis, PDF export, authentication and an administrative listing-management dashboard.

Highlights

• Browse and filter a curated Dubai property catalog
• View detailed property information and market context
• Generate AI-assisted analysis using Google Gemini
• Review suggested pricing ranges, red flags and sentiment
• Explore neighborhood insights and comparable properties
• Export analysis results as PDF
• Manage listings through an authenticated dashboard
• Use the public product without creating an account
• Fall back to demo analysis when the AI service is unavailable

Tech stack

Frontend

• Next.js 16 with the App Router
• React 19
• TypeScript
• Tailwind CSS 4
• Framer Motion
• Lucide React

Backend and data

• Next.js Route Handlers
• Prisma ORM
• PostgreSQL
• Supabase
• Supabase Authentication

AI and utilities

• Google Gemini
• jsPDF
• Custom rate limiting
• Server-side and client-side rendering

Main product areas

Property catalog

Users can browse a collection of fictional Dubai properties and filter them by relevant property attributes.

Listing details

Each listing includes its price, location, specifications, description and a direct entry point into the analysis experience.

AI analysis

The analysis experience provides:

• Suggested pricing context
• Potential red flags
• Listing sentiment
• Neighborhood ratings
• Comparable properties
• A structured summary for decision-making

AI-generated information is clearly presented as an estimate and should not be treated as a licensed property valuation.

Management dashboard

Authenticated users can access the management area to:

• Create listings
• Update listing information
• Delete listings
• Maintain the property catalog

Application routes

Route	Purpose	Access
/	Marketing homepage	Public
/listings	Browse and filter properties	Public
/listings/[id]	View property details	Public
/analyze	Generate listing analysis	Public
/login	Administrator sign-in	Public
/manage	Manage property listings	Authenticated

Architecture

ListingLens uses the Next.js App Router with a combination of Server Components and Client Components.

Server Components handle data-heavy page rendering where possible, while Client Components manage interactive experiences such as filtering, forms, modals and analysis states.

API functionality is implemented through Next.js Route Handlers:

• POST /api/analyze generates AI-assisted analysis
• GET /api/listings/comps retrieves comparable properties
• Management endpoints handle listing creation, updates and deletion

Prisma provides typed database access to PostgreSQL, while Supabase manages authentication and server-side sessions.

Local setup

Prerequisites

• Node.js 20.9 or newer
• npm
• A Supabase project
• A Google AI Studio API key

1. Clone the repository

git clone https://github.com/abdelazizBi/listing-lens.git
cd listing-lens

2. Install dependencies

npm install

3. Generate the Prisma client

npx prisma generate

4. Configure environment variables

Create a .env.local file in the project root:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# PostgreSQL
DATABASE_URL=postgresql://USER:PASSWORD@HOST:6543/postgres?pgbouncer=true
DIRECT_URL=postgresql://USER:PASSWORD@HOST:5432/postgres

# Google Gemini
GEMINI_API_KEY=your_gemini_api_key

GEMINI_API_KEY is used only on the server and is not exposed to the browser.

When the Gemini integration is unavailable, the application can display a built-in sample analysis in demo mode instead of failing completely.

5. Apply database migrations

npx prisma migrate deploy

For local schema development, use:

npx prisma migrate dev

6. Seed the database

npx prisma db seed

The seed creates fictional Dubai property listings for the demonstration catalog.

7. Start the development server

npm run dev

Open:

http://localhost:3000

Authentication setup

The /manage route requires a Supabase account.

To create an administrator:

1. Open the Supabase dashboard.
2. Go to Authentication → Users.
3. Add a user with an email address and password.
4. Sign in through /login.

The catalog, listing details and analysis experience remain publicly accessible.

Available commands

Command	Description
npm run dev	Start the development server
npm run build	Create a production build
npm run start	Start the production server
npm run lint	Run ESLint
npm run smoke	Run the application smoke checks
npx tsc --noEmit	Run TypeScript validation
npx prisma generate	Generate the Prisma client
npx prisma studio	Open the Prisma database interface
npx prisma migrate dev	Create and apply a development migration
npx prisma migrate deploy	Apply existing migrations
npx prisma db seed	Seed the property catalog

Production checks

Before deploying changes:

npm run lint
npx tsc --noEmit
npm run build
npm run smoke

Deployment

The application is designed for deployment with Vercel and Supabase.

Add the following environment variables to the deployment environment:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
DATABASE_URL=
DIRECT_URL=
GEMINI_API_KEY=

Apply the Prisma migrations to the production database:

npx prisma migrate deploy

Seed the demonstration data when needed:

npx prisma db seed

Technical decisions

Public-first experience

Users can explore listings and generate analysis without creating an account. Authentication is reserved for catalog management.

Clear AI labeling

Pricing suggestions and generated insights are presented as AI-assisted estimates rather than professional property valuations.

Graceful AI fallback

If the Gemini request fails or no API key is configured, the application can use sample analysis data and clearly indicate demo mode.

Typed data access

Prisma provides a typed interface between the Next.js application and PostgreSQL.

Server-side authentication

Supabase authentication is integrated with server-side session handling to protect the management dashboard.

Known limitations

• All properties and prices are fictional demonstration data.
• Comparable properties are selected using simplified matching rather than verified transaction data.
• The current rate limiter is stored in memory and is not shared across serverless instances.
• The authentication flow does not currently include self-service password recovery.
• AI-generated analysis may be incomplete or inaccurate and should not be treated as professional financial or property advice.

Author

Built by Abdelaziz Biad, Senior Full-Stack Engineer.

• Portfolio
• LinkedIn