Fahrenheit Temperature Converter

A static SvelteKit web application demonstrating:

1. Dynamic bidirectional temperature conversion (Celsius ↔ Fahrenheit)
2. Analysis of the approximation formula (F - 32) / 2 ≈ C vs the exact formula (F - 32) * 5/9 = C

Built with SvelteKit 2.x, Svelte 5, Tailwind CSS 4.x, and Skeleton UI.

Prerequisites

• Node.js 22.x
• pnpm package manager
• mise task runner (optional but recommended)

Setup

Install dependencies:

pnpm install

Development

This project uses mise as the primary task runner. All development commands are defined in mise.toml and run directly without relying on package.json scripts.

Start the development server:

mise dev

# or open in browser automatically
mise dev-open

Note: This project uses a mise-first approach. The package.json only contains the prepare lifecycle hook for SvelteKit type generation. All other tasks should be run through mise.

Building

Build the static site for production:

mise build

Preview the production build:

mise preview

Testing

Run all tests:

mise test

Run only unit tests:

mise test-unit

Run only E2E tests:

mise test-e2e

Code Quality

Type-check:

mise check

Lint and check code (Prettier + ESLint, no fixes):

mise lint
# or explicitly
mise lint:check

Check code formatting (no changes):

mise format:check

Format code (write changes):

mise format

Run all CI checks (lint, format, type-check, tests):

mise ci

Available Mise Tasks

View all available tasks:

mise tasks

Key tasks:

All mise tasks execute commands directly using pnpm exec, ensuring consistent behavior across local development and CI/CD environments.

Project Structure

src/
├── routes/           # SvelteKit routes
│   ├── +page.svelte # Main application page
│   └── +layout.svelte
├── lib/              # Reusable components and utilities
│   ├── components/  # Svelte components
│   └── utils/       # Utility functions
├── app.html         # HTML template
└── app.css          # Global styles

Technology Stack

• Framework: SvelteKit 2.x with Svelte 5
• UI Kit: Skeleton UI 4.x
• Icons: Lucide Svelte
• Styling: Tailwind CSS 4.x
• Build: Vite 7.x
• Adapter: @sveltejs/adapter-static (Static Site Generation)
• Testing: Vitest + Playwright
• Task Runner: mise

CI/CD & Security

This project uses GitHub Actions for continuous integration, deployment, and security scanning:

• Testing: Automated tests run on every push and pull request
• Deployment: Cloudflare Pages deployment via Wrangler CLI
  • Production: main branch → https://fahrenheight.pages.dev
  • Preview (Next): next branch → https://next.fahrenheight.pages.dev
  • Preview (Other): Feature branches → Auto-generated preview URLs
• Security: CodeQL analysis, Scorecard security checks, and dependency review
• Quality: Linting, type-checking, and formatting validation

Learn More

• SvelteKit Documentation
• Svelte 5 Documentation
• mise Documentation