KID2 You Stitch It! Frontend

A web-based panorama creation tool built with SvelteKit that allows users to upload images and videos to create seamless panoramic compositions.

Features

• Media Upload: Drop zone interface for uploading images and videos
• Interactive Canvas: Drag and drop media elements to create panoramas
• Media Inspector: Detailed view and manipulation of individual media items
• Video Support: Handle both images and video files
• Real-time Preview: Live preview of panorama as you build it
• Export Functionality: Download completed panoramas

Tech Stack

• Frontend: SvelteKit 5 with TypeScript
• Styling: Tailwind CSS 4
• Canvas: Fabric.js for interactive canvas manipulation
• State Management: Tanstack Query for data fetching
• Icons: Lucide Svelte
• Testing: Vitest with Testing Library

Development

Prerequisites

• Node.js (latest LTS version)
• npm or pnpm

Installation

# Clone the repository
git clone https://github.com/dw-innovation/kid2-you-stitch-it-frontend.git
cd kid2-you-stitch-it-frontend

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env
# Edit .env with your configuration

Development Server

npm run dev

Building

npm run build

Project Structure

src/
  lib/
    ui/               # Reusable UI components
      MediaLibrary/   # Media management components
      MediaInspector/ # Media detail components
      Modals/         # Modal dialogs
  routes/             # SvelteKit routes
  assets/             # Static assets

Environment Variables

Copy .env.example to .env and configure the following variables:

API Configuration

• PUBLIC_STITCH_API: URL of the panorama stitcher API backend

Analytics

• PUBLIC_MATOMO_SITE_ID: Matomo site ID for analytics tracking
• PUBLIC_MATOMO_URL: Matomo analytics server URL
• PUBLIC_MATOMO_PAGE_URL: Page URL for Matomo tracking

Database

• MONGODB_DBNAME: MongoDB database name
• MONGODB_URI: MongoDB connection string

License

MIT License - see the LICENSE file for details.

Repository

https://github.com/dw-innovation/kid2-you-stitch-it-frontend