Quiz-App-SvelteKit-App Svelte Themes

Quiz App Sveltekit App

Quiz App Using SvelteKit

A modern, interactive quiz application built with SvelteKit, featuring a beautiful UI, smooth animations, and robust state management.

โœจ Features

  • Interactive Quiz Interface: Smooth transitions and animations between questions
  • Progress Tracking: Visual progress bar with question navigation
  • Score System: Points-based scoring with detailed results
  • Responsive Design: Mobile-first design with Tailwind CSS
  • TypeScript Support: Full type safety and better development experience
  • Error Handling: Graceful error boundaries and fallback mechanisms
  • State Management: Centralized store-based state management
  • API Integration: RESTful API support with fallback data

๐Ÿš€ Tech Stack

  • Frontend: SvelteKit 2.0
  • Styling: Tailwind CSS
  • Language: TypeScript
  • State Management: Svelte Stores
  • Build Tool: Vite
  • Linting: ESLint + Prettier

๐Ÿ“ Project Structure

src/
โ”œโ”€โ”€ lib/
โ”‚   โ”œโ”€โ”€ components/          # Reusable UI components
โ”‚   โ”œโ”€โ”€ constants/           # App constants and configuration
โ”‚   โ”œโ”€โ”€ services/            # API and business logic services
โ”‚   โ”œโ”€โ”€ stores/              # Svelte stores for state management
โ”‚   โ””โ”€โ”€ types/               # TypeScript type definitions
โ”œโ”€โ”€ routes/                  # SvelteKit routes
โ””โ”€โ”€ app.html                 # HTML template

๐Ÿ› ๏ธ Development Setup

Prerequisites

  • Node.js 18+
  • npm or yarn

Installation

  1. Clone the repository

    git clone <repository-url>
    cd quiz-app
    
  2. Install dependencies

    npm install
    
  3. Start the development server

    npm run dev
    
  4. Start the mock API server (optional)

    npm run server
    

Available Scripts

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run check - Type checking with svelte-check
  • npm run lint - Lint code with ESLint
  • npm run format - Format code with Prettier
  • npm run server - Start mock API server

๐Ÿ—๏ธ Architecture

State Management

The app uses a centralized store pattern with Svelte stores:

  • quizStore: Main application state
  • Derived stores: Computed values for UI components
  • Actions: Methods to update state

Component Architecture

  • WelcomeScreen: Quiz introduction and start
  • QuestionCard: Individual question display
  • ProgressBar: Navigation and progress tracking
  • ScoreDisplay: Current score and progress
  • ResultScreen: Final results and statistics
  • ErrorBoundary: Error handling and recovery
  • LoadingSpinner: Loading states

Service Layer

  • QuizService: API communication and data fetching
  • Fallback mechanisms: Local data when API is unavailable

๐ŸŽจ UI/UX Features

  • Smooth Animations: CSS transitions and Svelte animations
  • Responsive Design: Mobile-first approach
  • Accessibility: ARIA labels and keyboard navigation
  • Visual Feedback: Color-coded scoring and status indicators
  • Interactive Elements: Hover effects and micro-interactions

๐Ÿ”ง Configuration

Environment Variables

Create a .env file for custom configuration:

VITE_API_BASE_URL=http://localhost:9000
VITE_APP_TITLE=React Quiz

Tailwind Configuration

Custom animations and design tokens are defined in tailwind.config.js.

๐Ÿ“ฑ API Integration

The app can work with or without an API:

  • With API: Configure VITE_API_BASE_URL for external data
  • Without API: Falls back to embedded question data
  • Mock Server: Use npm run server for development

๐Ÿงช Testing

Run the following commands to ensure code quality:

# Type checking
npm run check

# Linting
npm run lint

# Formatting
npm run format

# Build verification
npm run build

๐Ÿš€ Deployment

Build for Production

npm run build

Deploy Options

  • Vercel: Zero-config deployment
  • Netlify: Drag and drop deployment
  • Static Hosting: Deploy the build directory
  • Docker: Containerized deployment

๐Ÿค Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Run tests and linting
  5. Submit a pull request

๐Ÿ“„ License

This project is licensed under the MIT License.

๐Ÿ™ Acknowledgments

  • SvelteKit team for the amazing framework
  • Tailwind CSS for the utility-first CSS framework
  • The Svelte community for inspiration and support

Top categories

Loading Svelte Themes