Sebastian Krüger
1e1489ec58
Add blocking script in HTML head to apply theme before React hydration. This eliminates the flash of wrong theme (FOUT) that occurred when the page loaded with default theme before useEffect could apply the saved theme. The script: - Runs synchronously before page render - Reads theme from localStorage - Applies dark/light class to <html> element immediately - Handles system theme preference detection - Wrapped in try-catch for safety This ensures users see the correct theme from the first paint, with no flicker. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Unit Converter
A spectacular, innovative unit conversion application built with modern web technologies to provide the best user experience for converting between various measurement units.
Tech Stack
- Next.js 16 - React framework with App Router and static export
- TypeScript - Type-safe development
- Tailwind CSS 4 - Modern utility-first CSS framework
- convert-units - Comprehensive unit conversion library
Features
Supported Units
23 measurement categories with 187 individual units:
- Angle, Apparent Power, Area, Current, Digital
- Each, Energy, Frequency, Illuminance, Length
- Mass, Pace, Parts Per, Power, Pressure
- Reactive Energy, Reactive Power, Speed, Temperature
- Time, Voltage, Volume, Volume Flow Rate
Innovative UX Features
- Real-time bidirectional conversion
- Smart context-aware interface with fuzzy search
- Visual comparison with color-coded categories
- Keyboard shortcuts for power users
- Mobile-first responsive design
- Conversion history with localStorage
- Dark mode support
Getting Started
Prerequisites
- Node.js 18+ or 20+
- pnpm (recommended) or npm
Installation
# Install dependencies
pnpm install
# Run development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
Open http://localhost:3000 to see the app.
Project Structure
units-ui/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components (coming soon)
├── lib/ # Utility functions (coming soon)
├── public/ # Static assets
└── IMPLEMENTATION_PLAN.md # Detailed implementation plan
Development
See IMPLEMENTATION_PLAN.md for the complete development roadmap.
License
MIT
Built with Next.js 16, Tailwind CSS 4, and convert-units