A robust, server-rendered web application that allows users to seamlessly convert values between different units of measurement, including Length, Weight, and Temperature.

This project is a solution to the Unit Converter challenge from Roadmap.sh.

• Server-Side Processing: The application handles form submissions and calculates conversions on the backend, returning the processed data to the view.
• Vite-Powered Bundling: Extremely fast development environment and optimized production builds.
• Multiple Unit Categories:
  • Length: millimeter, centimeter, meter, kilometer, inch, foot, yard, mile.
  • Weight: milligram, gram, kilogram, ounce, pound.
  • Temperature: Celsius, Fahrenheit, Kelvin.
• No Database Required: Lightweight execution focusing on pure conversion logic.
• Strict Code Quality: Enforced via ESLint, Prettier, and Husky pre-commit hooks.

• Language: TypeScript (running as ES Modules).
• Runtime: Node.js.
• Development Tooling: .
• Code Quality: ESLint, Prettier.
• Git Hooks: Husky.

Follow these steps to run the project locally:

1. Clone the repository:

git clone https://github.com/alejogiraldoo/Unit-Converter.git
cd unit-converter

2. Install dependencies:

npm install

Note: This will also automatically trigger the prepare script to set up Husky git hooks.

3. Run in Development Mode:

npm run dev

This starts the Vite development server for real-time updates.

4. Build for Production:

npm run build

Runs the TypeScript compiler and Vite build to generate optimized assets.

5. Linting & Formatting:

npm run preview

Starts a local server to preview the production-ready application.

6. Linting & Formatting:

npm run lint

Automatically fixes linting errors and formats the code according to ESLint and Prettier rules.

To maintain clean code and separate the conversion logic cleanly, this project relies on specific design patterns:

• Strategy Pattern: Used to define a family of conversion algorithms (e.g., converting Celsius to Fahrenheit vs. Meters to Yards), encapsulating each one, and making them interchangeable based on user input.

• Template Method: Defines the skeleton of the conversion process in a base class, letting subclasses override specific steps of the calculation without changing the overall algorithm structure.

• Strategy Pattern - Refactoring Guru
• Template Method - Refactoring Guru

• HTML "" target Attribute
• Client-Side Form Handling with JavaScript – Explained with Example Code
• How to work with Form Elements in TypeScript ?
• How can I trigger an onchange event manually in javascript?
• Curso JavaScript: 151. SPA: Enrutamiento (Router)
• Ripple Effect Button with CSS and Vanilla Javascript for BEGINNERS
• How to add padding to the default arrow in a select dropdown menu?

• ESLint Getting Started
• TypeScript ESLint Docs
• typescript-eslint-parser
• Prettier Integration with Linters
• eslint-plugin-prettier GitHub
• Typescript Project from Scratch | Complete Tutorial for Beginners
• Husky, ESLint & Prettier Setup
• How to Set Up ESLint in 2026! (Beginner's Guide)

Static Deploy