Code Converter

Browser-based multi-language code converter powered by LLMs.

Live Demo ↗View Source

Overview

Problem

Developers frequently need to convert code between languages for migrations, learning, or prototyping. Existing tools handle single files but fail on multi-file projects — losing directory structure, naming conventions, and cross-file references.

Solution

Built a browser-based tool that accepts entire project directories, preserves their architecture during conversion, and provides a side-by-side diff view. The converted output can be exported as a ready-to-use ZIP archive.

Tech Stack

TypeScriptReactViteTailwind CSSLLM APIVercel

Architecture

Code Converter architecture diagram
High-level architecture of Code Converter

Features

  • Multi-file project upload with directory structure preservation
  • Side-by-side comparison of original and converted code
  • Support for multiple source and target languages
  • Architecture-aware conversion that maintains naming and references
  • Export converted project as ZIP
  • Syntax-highlighted code editor with line numbers

Technical Decisions

1

Used Vite + TypeScript for fast development iteration and type safety

2

Client-side file tree parsing to avoid uploading user code to a server

3

Streaming LLM responses to show conversion progress in real time

4

Tailwind CSS for consistent, responsive UI without custom stylesheet overhead

Challenges

  • Maintaining cross-file import references when converting between language ecosystems
  • Handling large projects without exceeding LLM context windows — implemented chunked conversion
  • Building an intuitive file tree UI that maps original to converted structure

Outcomes

  • Fully client-side architecture — no user code leaves the browser
  • Supports conversion between 10+ programming languages
  • Clean project export with correct directory hierarchy

Gallery