Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Codefied-CodePix/KaroCar-platform/llms.txt

Use this file to discover all available pages before exploring further.

The vendor app is the operational dashboard for car service providers and vendors on the KaroCar Platform. It gives vendors the tools to manage their vehicle listings, set availability windows, track incoming orders, and update pricing — all within a dedicated Next.js application. Like the admin app, the vendor dashboard consumes the shared @karo-car/ui component library, ensuring UI consistency across internal-facing surfaces. The homepage (app/page.tsx) renders the Vendor Dashboard heading as the authenticated landing page for service providers.

​
Tech Stack

Next.js 16.2.7

App Router with server components for dashboard-grade performance and nested route layouts.

React 19.2.4

Latest stable React with concurrent features for responsive, data-heavy vendor management UIs.

Tailwind CSS v4

Utility-first CSS with v4 PostCSS engine, dark-mode support, and consistent tokens across the monorepo.

@karo-car/ui

Shared internal component library providing reusable Button, Card, and other building-block components.

​
Shared UI Components

The vendor app declares @karo-car/ui as a runtime dependency using the workspace:* protocol, resolving directly to packages/ui in the monorepo. This is the same package used by the admin app, ensuring visual and behavioural consistency between the two internal dashboards. 
import { Button } from "@karo-car/ui";
Any changes made to packages/ui are immediately available in the vendor app without a separate publish step. See UI Package Overview for the full component catalogue.

​
Directory Structure

apps/vendor/
├── app/
│   ├── layout.tsx    # Root layout with Geist font
│   ├── page.tsx      # Vendor Dashboard homepage
│   └── globals.css   # Global styles
├── public/           # Static assets
├── package.json
├── next.config.ts
└── tsconfig.json

​
Package Configuration

{
  "name": "vendor",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.2.7",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "@karo-car/ui": "workspace:*"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.2.7",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

​
Development Commands

turbo dev --filter=vendor
Use turbo dev --filter=vendor to run only the vendor dashboard. Turborepo automatically watches packages/ui for changes and triggers hot-reloads in the vendor app — no manual re-linking or extra terminal windows required.
Next.js starts on port 3000 by default. When running multiple apps in parallel, each is assigned the next available port. Check the terminal output for the exact URL.

​
Building & Starting

turbo build --filter=vendor && turbo start --filter=vendor
1

Install dependencies

Run pnpm install from the monorepo root. The workspace:* protocol symlinks @karo-car/ui automatically.
2

Build @karo-car/ui (if needed)

If running builds independently, run turbo build --filter=@karo-car/ui first. When using the standard Turborepo pipeline, this is handled automatically via the dependency graph.
3

Build the vendor app

Run turbo build --filter=vendor. Turborepo caches the output for fast incremental rebuilds.
4

Start the production server

Run turbo start --filter=vendor and navigate to the printed URL to verify the Vendor Dashboard loads correctly.

​
Linting

pnpm --filter vendor lint

UI Package Overview

Explore the shared @karo-car/ui component library used by this app.

Button Component

API reference for the shared Button component.

Admin App

The internal operator dashboard that also consumes @karo-car/ui.

Customer App

The customer-facing portal that interacts with vendor listings.

Build docs developers (and LLMs) love

Get started for freeTalk to us