A modern, interactive quiz application built with SvelteKit, featuring a beautiful UI, smooth animations, and robust state management.
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
Clone the repository
git clone <repository-url>
cd quiz-app
Install dependencies
npm install
Start the development server
npm run dev
Start the mock API server (optional)
npm run server
npm run dev
- Start development servernpm run build
- Build for productionnpm run preview
- Preview production buildnpm run check
- Type checking with svelte-checknpm run lint
- Lint code with ESLintnpm run format
- Format code with Prettiernpm run server
- Start mock API serverThe app uses a centralized store pattern with Svelte stores:
quizStore
: Main application stateWelcomeScreen
: Quiz introduction and startQuestionCard
: Individual question displayProgressBar
: Navigation and progress trackingScoreDisplay
: Current score and progressResultScreen
: Final results and statisticsErrorBoundary
: Error handling and recoveryLoadingSpinner
: Loading statesQuizService
: API communication and data fetchingCreate a .env
file for custom configuration:
VITE_API_BASE_URL=http://localhost:9000
VITE_APP_TITLE=React Quiz
Custom animations and design tokens are defined in tailwind.config.js
.
The app can work with or without an API:
VITE_API_BASE_URL
for external datanpm run server
for developmentRun 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
npm run build
build
directoryThis project is licensed under the MIT License.