84 lines
2.0 KiB
Markdown
84 lines
2.0 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Install dependencies
|
||
|
|
pnpm install
|
||
|
|
|
||
|
|
# Run development server
|
||
|
|
pnpm dev
|
||
|
|
|
||
|
|
# Build for production
|
||
|
|
pnpm build
|
||
|
|
|
||
|
|
# Start production server
|
||
|
|
pnpm start
|
||
|
|
```
|
||
|
|
|
||
|
|
Open [http://localhost:3000](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](./IMPLEMENTATION_PLAN.md) for the complete development roadmap.
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
MIT
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
Built with Next.js 16, Tailwind CSS 4, and convert-units
|