Skip to content

lconnell/svelte5

Repository files navigation

Svelte 5 Starter Project

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.

πŸš€ Features

  • ⚑ 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

πŸ› οΈ Prerequisites

  • Node.js 18+ (LTS recommended)
  • npm or pnpm

πŸš€ Getting Started

  1. Clone the repository

    git clone https://github.com/lconnell/svelte5.git
    cd svelte5
  2. Install dependencies

    npm install
    # or
    pnpm install
  3. Set up environment variables Copy .env.example to .env in the root directory.

  4. Generate API client

    npm run openapi:fetch
    npm run openapi:generate
  5. Start the development server

    npm run dev
  6. Open in browser The application will be available at http://localhost:5173

πŸ“ Project Structure

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    

πŸ› οΈ Development Scripts

  • npm run dev # Start development server
  • npm run build # Build for production
  • npm run preview # Preview production build
  • npm run check # Run TypeScript and Svelte checks
  • npm run check:watch # Run checks in watch mode
  • npm run pretty:lint # Lint code
  • npm run pretty:fix # Fix linting and formatting issues
  • npm run openapi:fetch # Fetch latest OpenAPI schema
  • npm run openapi:generate # Generate API client from OpenAPI schema

πŸ§ͺ Testing

To run tests:

npm test

πŸš€ Deployment

  1. Build the application

    npm run build
  2. Preview the production build

    npm run preview
  3. Deploy The application is ready to be deployed to any static hosting service (Vercel, Netlify, etc.)

πŸ“ License

This project is licensed under the MIT License.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published