Getting Started & Setup
Relevant source files
The following files were used as context for generating this wiki page:
Subito is a monorepo project managed with pnpm and Turbo. It consists of multiple applications including a Hono-based API and a Next.js dashboard, supported by shared packages for database management, UI components, and utility functions. The project requires Node.js version 20 or higher.
The setup process involves configuring the environment, installing dependencies across the workspace, and initializing the database schema with seed data to enable development and testing.
Sources: package.json:28-31, apps/api/package.json:2-20, apps/dashboard/package.json:2-10
Workspace Architecture
The project follows a modular monorepo structure where applications consume local workspace packages. This ensures consistent typing and shared logic across the API and frontend.
The diagram shows the dependency flow between applications and shared packages.
Sources: package.json:10-21, apps/api/package.json:22-24, apps/dashboard/package.json:12-14
Prerequisites & Installation
System Requirements
- Node.js: Version >= 20.
- Package Manager: pnpm @ 9.15.9.
Sources: package.json:27-31
Initial Setup
To install dependencies for all applications and packages, run the following command from the root directory:
pnpm install
The repository uses Turbo for task orchestration. Key scripts available at the root level include:
| Command | Description |
|---|---|
pnpm dev | Starts all applications in development mode. |
pnpm build | Builds all packages and applications. |
pnpm lint | Runs ESLint across the entire workspace. |
pnpm typecheck | Validates TypeScript types across all projects. |
Sources: package.json:5-12
Database Setup
The database layer uses Drizzle ORM with PostgreSQL. Configuration is managed within the @subito/db package.
Configuration
A DATABASE_URL environment variable must be provided for database operations.
Sources: packages/db/src/seed.ts:6
Schema Management
The database schema is defined in SQL migrations and managed via drizzle-kit.
# Generate migrations based on schema changes
pnpm --filter @subito/db db:generate
# Apply migrations to the database
pnpm --filter @subito/db db:migrate
# Push schema changes directly (development)
pnpm --filter @subito/db db:push
# Open Drizzle Studio to view data
pnpm --filter @subito/db db:studio
Sources: packages/db/package.json:11-15
Data Seeding
The project includes a comprehensive seed script that populates the database with initial users, hubs, listings, and configurations.
pnpm --filter @subito/db db:seed
The seeding process follows a specific order of operations to satisfy foreign key constraints:
- Users & Preferences: Creates admin, customer, and partner roles.
- Infrastructure: Hubs and MicroHubs for geographical service areas.
- Services: Categories, Listings (e.g., Home Cleaning), and Catalogs (e.g., 1 BHK).
- Operational Data: Addresses, Partner profiles, and sample Bookings.
Sources: packages/db/src/seed.ts:74-950, packages/db/package.json:16
Development Workflow
API Development
The API is built using Hono and runs with tsx watch for hot reloading during development.
pnpm --filter @subito/api dev
The API relies on @subito/db for data access and @subito/shared for common utilities.
Sources: apps/api/package.json:7, 22-24
Dashboard Development
The dashboard is a Next.js application using the Turbopack engine.
pnpm --filter subito-dashboard dev
It consumes UI components from the @subito/ui package, which is built on Shadcn and Tailwind CSS.
Sources: apps/dashboard/package.json:5, 12, packages/ui/package.json:13-23
Shared UI Components
The @subito/ui package provides reusable components. It uses a specific alias structure for imports:
@subito/ui/components: UI components.@subito/ui/lib: Internal utility functions.@subito/ui/hooks: Custom React hooks.
Sources: packages/ui/components.json:12-18
Summary
Setting up Subito involves installing dependencies via pnpm, configuring a PostgreSQL database via drizzle-kit, and running the seed script to prepare the development environment. The monorepo structure allows for simultaneous development of the API and Dashboard while maintaining a unified schema and UI language through shared packages.