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