A high-performance, zero-brokerage rental property discovery platform built with a dark glassmorphic interface.

Features • Architecture • Security Model • Setup Guide • Roadmap

---

🌟 Value Proposition

Finding a room shouldn't come with a premium middleman tax. RoomFinder solves this by connecting tenants directly with property owners. Featuring instant peer-to-peer phone access, responsive visual carousels, and an isolated, secure owner administration cockpit, it is the modern answer to rental discovery.

---

🚀 Features Grid

👤 Tenant Experience	💼 Owner Experience
Instant Search & Filters: Filter properties seamlessly by area, landmark, rent constraints, property layouts, and tenant compatibility.	Secure CRUD Cockpit: Create, view, edit, and safely delete listings from a single, responsive dashboard.
Instant Peer-to-Peer Dialing: Direct tel: links to property owners, enabling single-click communication on mobile viewports.	Multi-Image Storage Pipeline: Multi-file drag-and-drop uploads directly to Supabase storage with automatic extension filters.
Smooth Visual Carousels: Glide through high-resolution property galleries with interactive layout indicators.	Isolated Data Safeguards: RLS-backed transactions restrict listings so only the authentic owner can mutate or delete their entries.

---

🏗️ Technical Architecture

RoomFinder relies on a highly responsive, unified SSR-CSR hybrid data loop that leverages Next.js App Router and Supabase BaaS:

┌───────────────────────────────────────────────────────────────────┐
│                           Client Browser                          │
│        (Next.js Client Components, Toast Context, Interactive UI)  │
└─────────────────────────────────┬─────────────────────────────────┘
                                  │
                  HTTPS Requests / Cookie Sync
                                  │
┌─────────────────────────────────▼─────────────────────────────────┐
│                        Next.js Server Layer                       │
│     (App Router, React Server Components, Server-Side Cookie Auth)│
└─────────────────────────────────┬─────────────────────────────────┘
                                  │
                     Supabase SDK Operations
                                  │
┌─────────────────────────────────▼─────────────────────────────────┐
│                       Supabase Backend Services                   │
│     (Auth & JWT Manager ➔ PostgreSQL Database ➔ Storage Bucket)   │
└───────────────────────────────────────────────────────────────────┘

• RSC Data Loading: Public listings (/rooms) and dashboards (/owner/rooms) fetch directly from Supabase within React Server Components. This completely eliminates loading states, enhances SEO performance, and secures database calls.
• Unified Auth Exchange: Next.js uses middleware and @supabase/ssr to dynamically retrieve auth sessions from server-side cookies, sharing authentication state securely between the browser and edge servers.

---

🔒 Security Model

Data security is built directly into RoomFinder’s database schema using PostgreSQL Row Level Security (RLS).

Row Level Security (RLS) Policies

Rather than relying on vulnerable API validation endpoints, the system delegates security checks directly to PostgreSQL:

-- Enable Row Level Security
ALTER TABLE rooms ENABLE ROW LEVEL SECURITY;

-- 1. Enable public read access for all visitors
CREATE POLICY "Public Read Access" ON rooms
    FOR SELECT USING (true);

-- 2. Restrict row insertions to logged-in users matching their own ID
CREATE POLICY "Authenticated Owner Insert" ON rooms
    FOR INSERT WITH CHECK (auth.uid() = owner_id);

-- 3. Restrict updates and deletions exclusively to the row's owner
CREATE POLICY "Owner Mutation Control" ON rooms
    FOR ALL USING (auth.uid() = owner_id);

Storage Bucket Security (room-images)

• Read Operations: Set as a public bucket to allow instant image loading for listing galleries.
• Write Operations: Bucket write policies constrain file paths to standard patterns (e.g. bucket/owner_id/filename), ensuring authenticated owners can only upload to, and delete from, their own directories.

---

⚙️ Installation & Setup

Get RoomFinder running locally in minutes:

1. Clone the Repository

git clone https://github.com/Sudarshan25092007/Room-Finder-Web.git
cd Room-Finder-Web

2. Install Project Dependencies

npm install

3. Configure Local Environment Variables

Create a .env.local (or edit your existing .env) in the root directory:

NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-supabase-anon-key

4. Boot Up the Development Server

npm run dev

Open http://localhost:3000 in your web browser to explore.

---

🗺️ Future Roadmap

• Next-Gen Image Processing: Integrate next/image in ImageCarousel and RoomCard for automatic WebP conversion and responsive viewports.
• Interactive Maps: Embed an interactive Mapbox canvas to pinpoint room locations.
• Real-Time Tenant Messaging: Build an in-app messaging terminal using Supabase Realtime tables.
• Search Auto-Suggestions: Integrate search autocomplete matching regional landmarks.

---

Developed with ❤️ by Sudarshan Patil H J