FixItNow 🔧

Your Trusted Home Service Platform

FixItNow is a full-stack home services marketplace that connects customers with verified technicians in Bangladesh. Customers can discover services, book qualified professionals, pay securely, and leave reviews — while technicians and admins manage operations through dedicated, role-based dashboards.

This repository contains the frontend application. It consumes a separate Prisma/PostgreSQL-backed REST API built for this project.

🔗 Live URL: https://fixitnow.vercel.app/

---

Overview

FixItNow provides an end-to-end marketplace experience with three distinct user roles, each with a purpose-built dashboard:

• Customers browse services and technicians, book appointments, pay via Stripe, track booking status, and leave reviews.
• Technicians manage service listings, availability, and incoming bookings through a structured lifecycle.
• Admins oversee users, categories, bookings, and platform-wide analytics.

Routes are protected with Next.js Middleware, and the UI adapts dynamically based on the authenticated user's role.

---

Roles & Permissions

Role	Access
Customer	Public browsing, service booking, time-slot selection, payment checkout, booking tracking, reviews
Technician	Protected dashboard, service/profile management, availability scheduling, booking request handling
Admin	Protected dashboard, user management, category management, platform-wide statistics

---

Core Features

Public Marketplace

• Responsive service and technician grids with optimized images, ratings, and pricing
• Multi-select filtering with URL-synced query params (service type, location, rating, price range)
• Technician profile pages with bio, skills, reviews, and booking CTA
• Skeleton loaders and graceful error boundaries

Customer Dashboard

• Booking history with status-driven action buttons
• Payment status tracking and history
• Post-completion review submission
• Cancellation available only while eligible (before IN_PROGRESS)

Technician Dashboard

• Job overview: upcoming bookings, earnings, pending requests
• Service and profile management
• Booking management table with lifecycle actions (Accept, Decline, Start, Complete)

Admin Dashboard

• Platform analytics via interactive charts (area, donut, bar)
• User management with search, pagination, and status actions
• Category management (create, edit, view)

Design System

• Consistent visual language across the app: letterhead-style section headers, eyebrow labels, bordered-circle icon containers, and subtle dot-grid textures
• Full dark/light theme support via CSS custom properties (no hardcoded colors)
• Built with Tailwind CSS and shadcn/ui for a clean, professional feel rather than a templated look

---

Payments are handled via Stripe Checkout Sessions, with webhook-based confirmation and idempotency guards to prevent duplicate processing.

---

Tech Stack

Frontend

• Next.js (App Router) · React · TypeScript
• Tailwind CSS · shadcn/ui · Radix UI primitives
• React Hook Form + Zod for validation
• Recharts for admin analytics
• Sonner for toast notifications

Backend Integration

• Prisma ORM + PostgreSQL
• JWT-based, role-aware authentication with cookie-based sessions
• Stripe for payments
• Cloudinary for image uploads

Tooling

• ESLint · PostCSS · pnpm

---

Project Structure

app/
├── (authGroup)/         # Login & registration
├── (dashboardGroup)/    # Role-based dashboards (customer, technician, admin)
├── (publicGroup)/       # Public marketplace pages
components/              # Shared UI components & design system primitives
services/                # API helper functions & data access logic
lib/                     # Shared types, schemas, and utilities
types/                   # Domain entity type definitions
util/                    # Formatting, ratings, and UI fallback helpers

The app uses Server Components and Server Actions for data fetching, booking creation, reviews, payments, and status updates — keeping logic close to the data and minimizing client-side complexity.

---

Getting Started

Prerequisites

• Node.js 20+
• pnpm
• A running instance of the FixItNow backend API

Setup

git clone <your-repo-url>
cd fixitnow
pnpm install

Create a .env.local file (see Environment Variables), then start the dev server:

pnpm dev

Visit http://localhost:3000.

---

Environment Variables

BACKEND_API_URL=http://localhost:5000
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

Make sure the backend API is running and reachable at BACKEND_API_URL before starting the frontend.

---

Available Scripts

Command	Description
pnpm dev	Start the development server
pnpm build	Build the production bundle
pnpm start	Run the production build locally
pnpm lint	Run ESLint checks

---