A modern web application built with Svelte, SvelteKit, TypeScript, and Tailwind CSS. This project includes authentication, API integration with OpenAPI, and a responsive UI powered by DaisyUI.
- β‘ Svelte 5 with runes for fine-grained reactivity
- π¨ Tailwind CSS 4 with DaisyUI components
- π TanStack Query for server state management
- π Authentication flow with JWT
- π¦ TypeScript for type safety
- π οΈ Vite for fast development and builds
- π OpenAPI integration with Orval for type-safe API clients
- Node.js 18+ (LTS recommended)
- npm or pnpm
-
Clone the repository
git clone https://github.com/lconnell/svelte5.git cd svelte5
-
Install dependencies
npm install # or pnpm install
-
Set up environment variables Copy
.env.example
to.env
in the root directory. -
Generate API client
npm run openapi:fetch npm run openapi:generate
-
Start the development server
npm run dev
-
Open in browser The application will be available at
http://localhost:5173
svelte5/
βββ src/
β βββ lib/
β β βββ api/ # API client and utilities
β β β βββ client.ts # API client configuration
β β β βββ client-wrapper.ts # Axios instance wrapper
β β β βββ error.ts # Error handling utilities
β β β βββ schemas/ # Auto-generated API schemas
β β β βββ openapi.json # OpenAPI spec
| β β
β β βββ auth.ts # Authentication utilities
β β βββ components/ # Reusable UI components
β β β βββ MapForm.svelte # Form component with map integration
β β βββ queryClient.ts # TanStack Query client configuration
β β βββ index.ts # Library exports
β β
β βββ routes/
β β βββ items/ # Items feature
β β β βββ +page.svelte # Items listing and management
β β βββ login/ # Authentication
β β β βββ +page.svelte # Login page
β β βββ +layout.svelte # Root layout
β β βββ +layout.ts # Root layout server code
β β βββ +page.svelte # Home page
β β
β βββ app.css # Global styles
β βββ app.d.ts # TypeScript declarations
β βββ app.html # HTML template
β
βββ static/ # Static assets
βββ .eslintrc.cjs # ESLint configuration
βββ .prettierrc # Prettier configuration
βββ postcss.config.cjs # PostCSS configuration
βββ tailwind.config.js # Tailwind CSS configuration
βββ tsconfig.json # TypeScript configuration
βββ .stylelintrc.cjs # Stylelint configuration
βββ orval.config.ts # Orval configuration
βββ vite.config.ts # Vite configuration
npm run dev
# Start development servernpm run build
# Build for productionnpm run preview
# Preview production buildnpm run check
# Run TypeScript and Svelte checksnpm run check:watch
# Run checks in watch modenpm run pretty:lint
# Lint codenpm run pretty:fix
# Fix linting and formatting issuesnpm run openapi:fetch
# Fetch latest OpenAPI schemanpm run openapi:generate
# Generate API client from OpenAPI schema
To run tests:
npm test
-
Build the application
npm run build
-
Preview the production build
npm run preview
-
Deploy The application is ready to be deployed to any static hosting service (Vercel, Netlify, etc.)
This project is licensed under the MIT License.