Reda - Property Management App

A modern property management application built with Next.js 15, React 19, and Supabase. Reda allows users to sign contracts for property management services and advertise property management services.

Features

• 🔐 User Authentication (Email/Password and Google OAuth sign-in)
• 🏠 Property Management (Add, view, and manage properties)
• 📋 Contract Signing (Create and digitally sign property management contracts)
• 🎯 Service Advertising (Showcase property management services)
• 📊 Dashboard (Overview of properties and contracts)

Tech Stack

• Framework: Next.js 15 with App Router
• React: React 19
• Database: Supabase (PostgreSQL)
• Authentication: Supabase Auth
• Styling: TailwindCSS
• TypeScript: Full type safety

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn
• A Supabase account and project

Setup Instructions

1. Clone the repository

   git clone <repository-url>
   cd reda

2. Install dependencies

   npm install

3. Set up Supabase

   • Create a new project at supabase.com
   • Go to SQL Editor in your Supabase dashboard
   • Run the SQL migration file: lib/supabase/migrations.sql
   • This will create all necessary tables, indexes, and RLS policies

4. Configure environment variables

   • Copy env.example to .env.local
   • Fill in your Supabase credentials:

     NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
     NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY=your_supabase_publishable_key
     

   • You can find these in your Supabase project settings under API

5. Set up Google OAuth (Optional but recommended)

   • Go to your Supabase project dashboard
   • Navigate to Authentication → Providers
   • Enable Google provider
   • Add your Google OAuth credentials:
     • Client ID (from Google Cloud Console)
     • Client Secret (from Google Cloud Console)
   • Add authorized redirect URL: https://your-project-ref.supabase.co/auth/v1/callback
   • In Google Cloud Console, add the redirect URI:
     • Go to APIs & Services → Credentials
     • Edit your OAuth 2.0 Client ID
     • Add authorized redirect URI: https://your-project-ref.supabase.co/auth/v1/callback

6. Seed initial services (optional) You can add some initial services to the services table via the Supabase dashboard:

   INSERT INTO public.services (name, description, category, price, is_featured) VALUES
   ('Full Property Management', 'Complete property management including maintenance, tenant relations, and financial reporting', 'property_management', 299.00, true),
   ('Maintenance Services', 'Regular maintenance and repair services for your property', 'maintenance', 149.00, false),
   ('Leasing Services', 'Professional tenant screening and leasing services', 'leasing', 199.00, false);

7. Run the development server

   npm run dev

8. Open your browser Navigate to http://localhost:3000

Project Structure

reda/
├── app/                    # Next.js App Router pages
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Dashboard and management pages
│   ├── services/          # Services advertising page
│   └── page.tsx           # Home page
├── api/                   # API routes (backend logic)
│   ├── auth/              # Authentication endpoints
│   ├── contracts/         # Contract management endpoints
│   └── properties/        # Property management endpoints
├── components/            # Reusable UI components
│   ├── auth/              # Authentication components
│   ├── contracts/         # Contract-related components
│   ├── dashboard/         # Dashboard components
│   ├── properties/        # Property-related components
│   └── services/          # Service-related components
├── lib/                   # Backend utilities and configurations
│   └── supabase/          # Supabase client setup and types
└── tests/                 # Test files (to be added)

Database Schema

The application uses the following main tables:

• users: User profiles (extends Supabase auth.users)
• properties: Property information
• contracts: Property management contracts
• services: Available property management services

See lib/supabase/migrations.sql for the complete schema.

Key Features Implementation

Authentication

• Uses Supabase Auth for secure user authentication
• Row Level Security (RLS) policies ensure users can only access their own data

Contract Signing

• Users can create contracts for property management services
• Digital signature capture with name-based signing
• Contract status tracking (draft, pending, signed, active, terminated)

Property Management

• Add properties with detailed information
• Link contracts to specific properties
• View all properties in the dashboard

Service Advertising

• Public services page showcasing available services
• Featured services highlighting
• Direct links to contract creation from services

Testing

Run tests with:

npm test

Deployment

The app is configured for deployment on Vercel:

1. Push your code to a Git repository
2. Import the project in Vercel
3. Add your environment variables in Vercel dashboard
4. Deploy!

Architecture

This project follows the architecture guidelines in ARCHITECTURE.md:

• React Server Components for rendering
• API routes for all backend access
• Strict TypeScript
• TailwindCSS for styling
• All database access through API routes

License

MIT "# Reda" "# Reda"