Snapkit Dashboard

Full-stack image optimization platform monorepo.

Features

• Image Optimization: Real-time image transformation and optimization
• Multi-tenant Dashboard: Organization-based access control
• Figma Plugin: Design workflow integration
• CDN Integration: AWS CloudFront for optimized delivery

Tech Stack

Backend

• Framework: NestJS
• Database: PostgreSQL with TypeORM
• Cache: Redis (Upstash)
• Auth: JWT with Passport.js

Frontend

• Framework: Next.js 15 (App Router)
• UI: React 19, Tailwind CSS, Radix UI
• State: Zustand, TanStack Query
• i18n: next-intl

Infrastructure

• Cloud: AWS (S3, CloudFront, Lambda, KMS)
• Deployment: Railway, Vercel
• Monitoring: Sentry

Quick Start

Prerequisites

• Node.js 22
• pnpm 10.12+
• PostgreSQL
• Redis

Installation

1. Clone the repository

   git clone https://github.com/snapkit-studio/dashboard.git
   cd dashboard

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp apps/api/.env.example apps/api/.env
   cp apps/web/.env.example apps/web/.env

4. Start development servers

   pnpm dev

   This will start:

   • API server at http://localhost:4000
   • Web app at http://localhost:3000

Project Structure

├── apps/
│   ├── api/                    # NestJS backend API
│   ├── web/                    # Next.js dashboard
│   ├── figma-plugin-client/    # Figma plugin
│   └── asset-transform/        # Image transformation service
├── packages/
│   ├── catalyst-ui/            # Shared UI components
│   ├── data-access/            # API client (generated from OpenAPI)
│   ├── image-url/              # Image URL utilities
│   └── ...                     # Other shared packages
└── docs/                       # Documentation

Development

Common Commands

# Development
pnpm dev                    # Start all apps in dev mode
pnpm build                  # Build all apps
pnpm lint                   # Lint all apps
pnpm check-types            # Type check all apps

# Testing
pnpm test                   # Run unit tests
pnpm test:e2e               # Run E2E tests (web)

# API specific
cd apps/api
pnpm openapi-gen            # Generate OpenAPI spec

Code Generation

The project uses Orval to generate TypeScript API clients from OpenAPI specs:

cd apps/api
pnpm openapi-gen            # Generates API client in packages/data-access

Documentation

• Contributing Guide
• Token Optimization Guide
• React Guidelines
• Testing Guide

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

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