TryCrib - Try Before You Buy Real Estate Platform

🏠 Overview

TryCrib is an innovative real estate platform that allows potential home buyers to "try before they buy" by booking short-term stays in properties they're interested in purchasing. This addresses the anxiety of home buying by enabling buyers to experience living in a property before making an offer.

The Problem We Solve

Buying a home is the most expensive transaction most people undertake, yet unlike other major purchases (like cars), you don't get to test-drive your potential new home. TryCrib changes this by allowing buyers to:

• Experience the property firsthand
• Test the neighborhood and commute
• Make informed decisions with confidence
• Reduce purchase anxiety

🎯 Current Development Focus

Pricing System Implementation:

• Tiered pricing structure based on property value
• Fixed pricing tiers: $500/night (under $500K), $750/night ($500K-$1M), $1250/night ($1M-$1.5M), $1500/night ($1.5M-$3M), $2000/night ($3M-$5M)
• "Contact Seller" pricing for properties over $5M
• Dynamic price calculation and display
• Integration with property listings and booking flow

System Optimization & Production Readiness:

• Cloudinary integration for image processing and optimization
• Advanced search and filtering capabilities
• Booking system implementation
• Payment processing integration
• Mobile responsiveness improvements
• Performance optimization for large datasets

✅ Recently Completed

User Verification System - Comprehensive identity verification for buyers and sellers (✅ COMPLETED):

• Role-specific verification requirements (pre-approval letters for buyers, property tax statements for sellers)
• Document upload system with drag-and-drop interface
• File deduplication and secure storage in Supabase
• Verification status tracking (pending, approved, rejected)
• Dashboard integration with verification banners
• Onboarding flow integration for both user types
• Mobile-responsive verification pages
• Skip verification option with persistent reminders

Enhanced Authentication System - Robust login and signup flow (✅ COMPLETED):

• Fixed CAPTCHA integration with Clerk
• Email verification with code input system
• Duplicate signup prevention and error handling
• Mobile navigation improvements
• Resend verification functionality
• User-friendly error messages and recovery flows

Enhanced Role System - A comprehensive admin management system:

• Superadmin role with elevated permissions
• User promotion/demotion functionality
• Role-based dashboard redirects
• Admin management interface with visual role indicators

Property Data Management System - Property feed import and claiming system (✅ COMPLETED):

• Property feed import system with JSON/CSV support
• Smart data mapping from external feeds to database schema
• Property claiming system for sellers to claim ownership
• Admin interface for managing imports and claims
• Enhanced property schema with rich data fields (JSONB)
• Import history tracking and error reporting
• Duplicate claim prevention and status tracking
• Large Dataset Testing - Successfully tested with 85 properties
• Dual Format Support - Handles both old and new data formats automatically
• Rich Property Data - 40+ images per property, detailed descriptions, structured addresses

Pagination & Performance System - High-performance property browsing:

• Client-side pagination for external browse page (12 properties per page)
• Server-side pagination for admin dashboard (6 properties per page)
• Search and filtering across all properties
• Lazy loading for optimal performance
• Dynamic homepage showing 3 most expensive properties
• Property detail pages with image carousels and rich descriptions

✨ Key Features

For Buyers

• 🔍 Browse Properties: Search and filter available properties on the market
• 🏡 Book Stays: Reserve short-term stays to experience properties
• 📅 Manage Bookings: View booking history and manage reservations
• ⭐ Leave Reviews: Provide feedback after stays
• 💳 Secure Payments: Integrated Stripe payment processing

For Sellers

• 📝 List Properties: Create detailed property listings for try-before-buy stays
• 💰 Set Pricing: Configure per-night rates and manage availability
• 📊 Track Bookings: Monitor reservations and earnings
• 💬 Communicate: Message with potential buyers
• 📈 Analytics: View booking performance

For Admins

• ✅ Property Verification: Review and approve property listings
• 👥 User Management: Manage user accounts and roles
• 📊 Platform Analytics: Monitor bookings and platform performance
• 🔧 Content Moderation: Oversee reviews and communications
• 📥 Property Feed Import: Upload and process JSON/CSV property feeds
• 🔄 Bulk Operations: Process large datasets efficiently
• 👑 Superadmin Features: Manage admin roles and permissions
• 📋 Property Claims Management: Review and approve property ownership claims
• 📈 Import History: Track all property feed imports and results

For Superadmins

• 👑 Admin Management: Promote/demote admin users
• 🔧 System Configuration: Advanced platform settings
• 📈 Global Analytics: Platform-wide performance metrics
• 📊 Role Change History: Track all user role changes and audit trail

🛠 Technology Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS with Radix UI components
• Backend: Next.js API routes
• Database: Supabase (PostgreSQL)
• Authentication: Clerk.dev with Google OAuth
• Payments: Stripe
• Images: Cloudinary (planned)
• Deployment: Vercel

🗄️ Database Schema

The application uses a comprehensive PostgreSQL schema with the following key tables:

• profiles: User accounts with role-based access (buyer/seller/admin/superadmin)
• properties: Property listings with detailed information and rich data (JSONB)
• bookings: Short-term stay reservations
• reviews: Post-stay feedback system
• messages: Buyer-seller communication
• property_availability: Calendar system for blocked dates
• role_changes: User role change history and audit trail
• property_imports: Import history and tracking
• property_claims: Property ownership claims and verification

Enhanced Property Schema

The properties table includes rich data fields:

• Core fields: address, price, bedrooms, bathrooms, square footage
• Feed data: MLS ID, listing date, days on market, property type
• Rich data: Property features, location details, building info (JSONB)
• Images: Cloudinary URLs with original feed references
• Ownership: Seller assignment and claiming system

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Supabase account
• Clerk.dev account
• Stripe account
• Cloudinary account (for image processing)

Installation

1. Clone the repository

   git clone <repository-url>

   cd trycrib

2. Install dependencies

   pnpm install

   or

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory and put these in it:

   Supabase

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

   Clerk Authentication

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key CLERK_SECRET_KEY=your_clerk_secret_key

   Stripe

   STRIPE_SECRET_KEY=your_stripe_secret_key NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

   Cloudinary (for image processing)

   CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret

   Google Analytics (optional)

   NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

   App

   NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL=http://localhost:3000

4. Set up the database

   ONLY DO THIS IF STARTED WITH AN EMPLTY POSTRESQL DB

   Run the SQL scripts in the scripts/ directory in order:

   Execute these in your Supabase SQL editor

   scripts/001_create_tables.sql scripts/002_enable_rls.sql scripts/003_create_profile_trigger.sql scripts/add-stripe-session-column.sql

5. Run the development server

   pnpm dev

   or

   npm run dev

6. Open your browser

Navigate to http://localhost:3000

🏗️ Build and Deployment

Local Build

```bash

Build the application

pnpm build

Start the production server

pnpm start ```

Vercel Deployment

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy - Vercel will automatically build and deploy

Environment Variables for Production

Ensure all environment variables are set in your deployment platform:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• SUPABASE_SERVICE_ROLE_KEY
• NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
• CLERK_SECRET_KEY
• STRIPE_SECRET_KEY
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
• STRIPE_WEBHOOK_SECRET
• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET
• NEXT_PUBLIC_GA_ID (optional - Google Analytics tracking ID)

📁 Project Structure

``` trycrib/ ├── app/ # Next.js app router pages │ ├── admin/ # Admin dashboard │ ├── api/ # API routes │ ├── auth/ # Authentication pages │ ├── booking/ # Booking flow │ ├── dashboard/ # User dashboards │ └── properties/ # Property listings ├── components/ # React components │ ├── admin/ # Admin-specific components │ ├── buyer/ # Buyer-specific components │ ├── seller/ # Seller-specific components │ ├── landing/ # Landing page components │ └── ui/ # Reusable UI components ├── lib/ # Utility libraries │ ├── supabase/ # Supabase client configuration │ ├── stripe.ts # Stripe configuration │ └── types.ts # TypeScript type definitions ├── scripts/ # Database migration scripts └── public/ # Static assets ```

🔐 Authentication & Authorization

The app uses Clerk.dev authentication with four user roles:

• Buyer: Can browse and book properties
• Seller: Can list and manage properties, claim ownership of properties
• Admin: Can verify properties, manage users, and import property data
• Superadmin: Can manage admin roles and system configuration

Users are automatically redirected to role-appropriate dashboards after authentication, with an onboarding flow for new users to select their role.

💳 Payment Integration

• Stripe Checkout for secure payment processing
• Webhook handling for payment confirmation
• Fee structure: Platform fees, agent commissions, and seller payouts

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🚀 Live Demo

TryCrib Live Demo

---

Built with ❤️ using Next.js, Supabase, and Stripe