Sebastian Krüger
7f7bc69d04
Add final layer of advanced features for spectacular UX: ⌨️ Command Palette (CommandPalette.tsx): - Trigger with Ctrl/Cmd+K keyboard shortcut - Search and execute commands instantly - Quick access to all 23 measurement categories - Theme switching commands (light/dark/system) - Keyboard navigation (↑/↓ arrows, Enter to select) - Escape to close - Color-coded category commands - Backdrop blur overlay - Animated scale-in entrance - Footer with keyboard hints - Smart filtering by keywords 📊 Visual Comparison (VisualComparison.tsx): - Toggle between grid and chart view - Horizontal bar chart showing magnitude differences - Animated bars with 500ms transitions - Auto-calculated percentages relative to max value - Color-coded bars matching category colors - Tabular number formatting - Clean, minimal design 🔄 Unit Swap Functionality: - Swap button between From/To units - ArrowLeftRight icon - Automatically converts value on swap - Two-unit quick converter mode - Large result display with color accent - Responsive layout 📱 Footer Component (Footer.tsx): - Three-column grid layout (About, Features, Links) - GitHub repository link - convert-units library attribution - Keyboard shortcuts reference - Feature highlights - Made with ❤️ message - Responsive design (stacks on mobile) - Copyright notice with current year - Smooth hover transitions 🎨 Enhanced MainConverter: - From/To unit selector with swap button - Quick result display between selectors - Toggle between grid and chart views - BarChart3 icon for view switcher - Integrated command palette - Better spacing and layout - Target unit state management - Auto-update target unit on measure change ✨ Enhanced Page Layout: - Sticky header with backdrop blur - Flexbox layout for footer at bottom - Keyboard shortcuts hint (/ and Ctrl+K) - Improved header spacing - Better visual hierarchy Features Now Complete: ✅ Command palette with Ctrl+K ✅ Visual comparison bar charts ✅ Unit swap functionality ✅ Professional footer ✅ From/To quick converter ✅ Chart/Grid view toggle ✅ Sticky navigation header ✅ Full keyboard navigation The app is now feature-complete with: - 23 measurement categories - 187 individual units - Real-time conversion - Fuzzy search (/) - Command palette (Ctrl+K) - Dark mode - Conversion history - Favorites & copy - Visual comparisons - Unit swapping - Complete footer 🤖 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