Pack Challenge

A SvelteKit application for document management with file upload, preview, and storage capabilities using PostgreSQL and MinIO.

🌐 Live Demo

The application is available at: https://sveltekit-challenge.onrender.com

Features

• Document upload and management
• File preview functionality
• Support for both local and MinIO storage
• Database with Prisma ORM
• Dockerized development environment
• Modern UI with Tailwind CSS and DaisyUI

Prerequisites

• Docker and Docker Compose
• Node.js 18+ (for local development)
• Git

Quick Start with Docker

1. Clone the repository

   git clone <repository-url>
   cd pack-challenge
   

2. Create environment file

   cp .env.example .env
   

   Or create a .env file with the following variables:

    DATABASE_URL="postgresql://postgres:prisma@db:5432/pack_db"
    MINIO_ENDPOINT=minio
    MINIO_PORT=9000
    MINIO_ACCESS_KEY=minioadmin
    MINIO_SECRET_KEY=minioadmin
    MINIO_BUCKET=pack-challenge-bucket
    MINIO_ROOT_USER=minioadmin
    MINIO_ROOT_PASSWORD=minioadmin
    USE_LOCAL_STORAGE=false
    POSTGRES_USER=postgres
    POSTGRES_PASSWORD=prisma
    POSTGRES_DB=pack_db
   

3. Start the application

   docker-compose up -d
   

4. Access the application

   • Web Application: http://localhost:3000
   • MinIO Console: http://localhost:9001 (minioadmin/minioadmin)
   • PostgreSQL: localhost:51213

Local Development

1. Install dependencies

   npm install
   

2. Start PostgreSQL and MinIO

   docker-compose up db minio -d
   

3. Set up database

   npx prisma migrate deploy
   npx prisma generate
   

4. Start development server

   npm run dev
   

Database Schema

The application uses a PostgreSQL database with the following main model:

• Document: Stores document metadata including title, description, category, language, provider, roles, file path, content type, and storage type (MinIO or local)

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Type check with Svelte
• npm run format - Format code with Prettier
• npm run lint - Check code formatting

Technology Stack

• Frontend: SvelteKit, Tailwind CSS, DaisyUI
• Backend: SvelteKit API routes
• Database: PostgreSQL with Prisma ORM
• Storage: MinIO (S3-compatible) or local filesystem
• Development: Docker, TypeScript, Vite

Project Structure

src/
├── lib/
│   ├── components/         # Svelte components
│   ├── config.ts           # Application configuration
│   ├── prisma.ts           # Prisma client
│   ├── storage.ts          # Storage utilities
│   └── validation.ts       # Input validation
├── routes/
│   ├── +page.svelte        # Home page
│   └── api/                # API endpoints
└── app.html                # HTML template

Environment Variables

Docker Services

• web: Main SvelteKit application (port 3000)
• db: PostgreSQL database (port 51213)
• minio: MinIO object storage (ports 9000, 9001)

Troubleshooting

Database Connection Issues

• Ensure PostgreSQL is running: docker-compose logs db
• Check database URL in .env file
• Wait for database to be ready before starting the app

MinIO Connection Issues

• Verify MinIO is running: docker-compose logs minio
• Check MinIO credentials in .env file
• Access MinIO console at http://localhost:9001

Development Issues

• Clear node_modules and reinstall: rm -rf node_modules package-lock.json && npm install
• Regenerate Prisma client: npx prisma generate
• Check Docker containers: docker-compose ps