A modern frontend application built with SvelteKit, shadcn-svelte, and Tailwind CSS v4.

• SvelteKit - Full-stack framework for Svelte
• Svelte 5 - Modern reactive framework with runes
• shadcn-svelte - High-quality component library
• Tailwind CSS v4 - Utility-first CSS framework
• TypeScript - Type-safe JavaScript
• Lucide Svelte - Icon library
• Vite - Build tool and dev server

• Bun (recommended) or Node.js 20+
• Docker and Docker Compose (for containerized deployment)

1. Install dependencies using Bun:

bun install

Or if using npm:

npm install

2. Sync SvelteKit types:

bun run prepare

Start the development server:

bun run dev

# or with npm
npm run dev

The app will be available at http://localhost:5173 (or the port shown in the terminal).

To open the app automatically in your browser:

bun run dev -- --open

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build locally
• bun run check - Run type checking
• bun run check:watch - Run type checking in watch mode
• bun run lint - Lint code with ESLint and Prettier
• bun run format - Format code with Prettier

Create an optimized production build:

bun run build

The build output will be in the .svelte-kit directory.

Preview the production build locally:

bun run preview

frontend/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   └── ui/          # shadcn-svelte components
│   │   ├── assets/          # Static assets
│   │   └── utils.ts         # Utility functions
│   ├── routes/              # SvelteKit file-based routing
│   │   ├── +layout.svelte   # Root layout
│   │   ├── +page.svelte     # Home page
│   │   └── [routes]/        # Route pages
│   ├── app.html             # HTML template
│   └── App.scss             # Global styles
├── components.json           # shadcn-svelte configuration
├── svelte.config.js         # SvelteKit configuration
├── vite.config.ts           # Vite configuration
└── tsconfig.json            # TypeScript configuration

To add new components from shadcn-svelte:

bunx shadcn-svelte@latest add [component-name]

# Example:
bunx shadcn-svelte@latest add card
bunx shadcn-svelte@latest add dialog

Components will be installed to src/lib/components/ui/.

This project uses Docker Compose for deployment. The Dockerfile and entrypoint.sh are configured for containerized builds.

Build and run with Docker Compose:

docker compose up --build

The application will be served from the container.

The project uses @sveltejs/adapter-auto which automatically detects the deployment environment. For specific platforms, you may need to install and configure a different adapter:

• Vercel: @sveltejs/adapter-vercel
• Netlify: @sveltejs/adapter-netlify
• Node.js: @sveltejs/adapter-node
• Static: @sveltejs/adapter-static

See the SvelteKit adapters documentation for more information.

• Tailwind CSS v4 - Configured in src/routes/layout.css
• shadcn-svelte theme - CSS variables defined in src/routes/layout.css
• SCSS - Global styles in src/App.scss

The theme uses the "slate" color scheme by default. You can customize colors by modifying the CSS variables in src/routes/layout.css.

Run TypeScript type checking:

bun run check

Or in watch mode:

bun run check:watch

• ESLint - Code linting
• Prettier - Code formatting
• TypeScript - Type safety

Format code:

bun run format

Lint code:

bun run lint

[Add your license here]