RepairMatch

A modern crowdsourced repair platform that connects people who need repairs with skilled professionals in their area. Built with Next.js, TypeScript, Supabase, and modern web technologies.

Table of Contents

• Overview
• Features
• Tech Stack
• Getting Started
• Project Structure
• Database Schema
• API Documentation
• Testing
• Deployment
• Contributing
• Environment Variables
• License

Overview

RepairMatch is a full-stack web application that facilitates connections between repair service requesters and professional repairers. The platform features real-time messaging, location-based job discovery, bidding systems, and comprehensive user management.

Key Concepts

• Requesters: Users who post repair jobs and need services
• Repairers: Professional service providers who bid on and complete jobs
• Jobs: Repair requests with location, budget, and category information
• Bids: Proposals submitted by repairers with pricing and timeline estimates
• Real-time Communication: Built-in chat system for seamless coordination

Features

For Requesters

• Create detailed repair job listings with photos and specifications
• Set budgets and receive competitive bids from qualified repairers
• Interactive map view to visualize available repairers in the area
• Real-time chat with selected repairers
• Job status tracking and management dashboard
• Secure payment processing integration
• Rating and review system for completed jobs

For Repairers

• Browse and filter available jobs by category, location, and budget
• Map-based job discovery with geographic filtering
• Submit detailed proposals with custom pricing and timelines
• Business profile management with portfolio and credentials
• Real-time notifications for new job opportunities
• Bid tracking and status management
• Customer communication tools

Platform Features

• User authentication with email/password and OAuth (Google)
• Role-based access control (Requester/Repairer)
• Real-time notifications and messaging
• Location-based services with Mapbox integration
• Responsive design for desktop and mobile devices
• Dark/light theme support
• Comprehensive search and filtering capabilities

Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe JavaScript
• TailwindCSS - Utility-first CSS framework
• Radix UI - Accessible component primitives
• React Query - Server state management
• React Hook Form - Form validation and management
• Framer Motion - Animation library

Backend & Database

• Supabase - Backend-as-a-Service with PostgreSQL
• Row Level Security (RLS) - Database-level authorization
• Real-time subscriptions - Live updates for chat and notifications
• Supabase Auth - Authentication and user management

Maps & Location

• Mapbox GL JS - Interactive maps and geocoding
• React Map GL - React wrapper for Mapbox

Development & Testing

• Jest - JavaScript testing framework
• Selenium WebDriver - End-to-end testing
• ESLint - Code linting
• Prettier - Code formatting

Deployment

• Docker - Containerization
• Vercel/Netlify - Hosting platform options

Getting Started

Prerequisites

• Node.js 18 or higher
• npm or yarn package manager
• Supabase account
• Mapbox account (for maps functionality)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/repair-match.git
cd repair-match/project

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local

4. Configure your environment variables (see Environment Variables section)

5. Run the development server:

npm run dev

6. Open http://localhost:3000 in your browser

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm test             # Run unit tests
npm run test:e2e     # Run end-to-end tests

Project Structure

project/
├── app/                    # Next.js App Router pages
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout component
│   ├── page.tsx           # Home page
│   ├── dashboard/         # User dashboard
│   ├── jobs/              # Job-related pages
│   ├── post/              # Job posting page
│   ├── repairers/         # Repairer directory
│   └── signin/            # Authentication pages
├── components/             # Reusable React components
│   ├── auth/              # Authentication components
│   ├── jobs/              # Job-related components
│   ├── map/               # Map components
│   ├── messages/          # Chat components
│   ├── notifications/     # Notification components
│   └── ui/                # Base UI components
├── hooks/                  # Custom React hooks
│   ├── use-auth.ts        # Authentication hook
│   ├── use-profile.ts     # User profile hook
│   └── use-toast.ts       # Toast notification hook
├── lib/                    # Utility functions and configurations
│   ├── supabase/          # Supabase client and types
│   ├── types/             # TypeScript type definitions
│   ├── notifications/     # Notification utilities
│   └── constants/         # Application constants
├── supabase/              # Database migrations and config
│   └── migrations/        # SQL migration files
└── __tests__/             # Test files
    └── e2e/               # End-to-end tests

Database Schema

The application uses PostgreSQL through Supabase with the following main tables:

Tables

profiles

• User information for both requesters and repairers
• Includes role designation, location data, and business information

repair_jobs

• Job listings with title, description, budget, and location
• Status tracking (open, in_progress, completed, closed)
• Category classification and geographic coordinates

bids

• Proposals from repairers on specific jobs
• Includes pricing, estimated timeline, and detailed descriptions
• Status management (pending, accepted, rejected)

messages

• Real-time chat system between users
• Job-specific conversation threads
• Read status tracking

notifications

• In-app notification system
• Type-based notifications (new_bid, bid_accepted, job_completed, message)
• User-specific targeting with read status

Relationships

• profiles (1) → repair_jobs (many) via requester_id
• profiles (1) → repair_jobs (many) via repairer_id
• repair_jobs (1) → bids (many) via job_id
• profiles (1) → bids (many) via repairer_id
• repair_jobs (1) → messages (many) via job_id
• profiles (1) → messages (many) via sender_id/receiver_id

API Documentation

Authentication

The application uses Supabase Auth for user management:

• Email/password authentication
• OAuth integration (Google)
• Role-based access control
• Session management

Key API Endpoints

Jobs

• GET /api/jobs - List all open jobs with filtering
• POST /api/jobs - Create new job (authenticated requesters)
• GET /api/jobs/:id - Get job details with bids
• PUT /api/jobs/:id - Update job status (job owner only)

Bids

• GET /api/jobs/:id/bids - Get bids for a job
• POST /api/jobs/:id/bids - Submit bid (authenticated repairers)
• PUT /api/bids/:id/accept - Accept bid (job owner only)

Messages

• GET /api/jobs/:id/messages - Get chat messages
• POST /api/jobs/:id/messages - Send message
• WebSocket connection for real-time updates

Testing

Unit Tests

Run unit tests with Jest:

npm test

End-to-End Tests

The application includes comprehensive E2E tests using Selenium WebDriver:

npm run test:e2e

Test Coverage:

• User authentication flows
• Job posting and management
• Bidding system functionality
• Real-time messaging
• Map interactions

Test Configuration

• Jest configuration: jest.config.e2e.js
• Test setup: jest.setup.e2e.ts
• Browser automation with Chrome headless mode

Deployment

Docker Deployment

Build and run with Docker:

docker build -t repair-match .
docker run -p 3000:3000 repair-match

Environment-based Deployment

The application supports multiple deployment environments:

• Development: npm run dev
• Production: npm run build && npm start
• Docker: Multi-stage build with optimized production image

Deployment Platforms

Compatible with:

• Vercel (recommended for Next.js)
• Netlify
• Docker containers
• Traditional VPS/cloud servers

Environment Variables

Create a .env.local file with the following variables:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Mapbox Configuration
NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_access_token

# Optional: Analytics and Monitoring
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id

# Optional: Payment Processing
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

# Optional: SMS Notifications
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token

Required Services

1. Supabase Project: Create at supabase.com
2. Mapbox Account: Get API key at mapbox.com
3. Stripe Account: For payment processing (optional)
4. Twilio Account: For SMS notifications (optional)

Contributing

We welcome contributions to RepairMatch! Please follow these guidelines:

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature-name
3. Make your changes with appropriate tests
4. Ensure all tests pass: npm test && npm run test:e2e
5. Commit with conventional commits: git commit -m "feat: add new feature"
6. Push to your fork: git push origin feature/your-feature-name
7. Create a Pull Request

Code Standards

• Follow TypeScript best practices
• Use ESLint and Prettier for code formatting
• Write comprehensive tests for new features
• Follow React/Next.js conventions
• Maintain responsive design principles

Issue Reporting

When reporting issues, please include:

• Clear description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Browser/environment information
• Relevant console errors or logs

License

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

Support

For support and questions:

• Create an issue on GitHub
• Check existing documentation
• Review the test files for usage examples

Roadmap

Upcoming features and improvements:

• Mobile application (React Native)
• Advanced payment processing
• Enhanced notification system
• Multilingual support
• Advanced analytics dashboard
• API rate limiting and optimization