O2N Engine

Upgrade your stack, retain your logic

Comment

💡 Inspiration

The idea for O2N (Old-to-New) was born out of shared developer pain. Every year, trillions of dollars are spent maintaining legacy systems. Migrating old PHP scripts, legacy Python loops, or monolithic systems to modern stacks (like FastAPI or Next.js) is a nightmare. It is slow, manual, security-risky, and prone to breaking changes.

We asked ourselves: “Why can’t developers have a map and a compass for migration? What if we could use AI to scan, audit, and translate codebases into clean architectures in seconds, right from their local computer?” That is how O2N was born.

🚀 What it does

O2N is a premium codebase modernization console that guides developers through a 4-step wizard:

  1. Select Codebase: Instantly select a local directory using a native Windows File Explorer popup, or provide a public GitHub URL.
  2. Analyze & Map: O2N scans the files, runs static checks, categorizes security and syntactic findings, and automatically detects legacy tech to recommend the best target stack (e.g., PHP -> FastAPI).
  3. Slices & Configure: Select exactly which files to convert, specify custom output directories, and customize your targets.
  4. Interactive Preview: Review source code vs. modernized code side-by-side with tabbed navigation, post-conversion validation findings, and quick clipboard copying.

🛠️ How we built it

We integrated a robust stack to deliver a seamless developer experience:

  • Frontend: Built with Next.js 16 and React 19 using client-only dynamic loading to bypass server hydration limits. We styled the interface with a custom Vercel-inspired glassmorphism Dark Theme.
  • Backend: Built a high-performance FastAPI application. We implemented an isolated PowerShell subprocess loop to pop up the native Windows folder picker on the desktop without freezing the server threads.
  • AI Agent Pipeline: Leveraged LangGraph to manage state and ran file translations using Claude Sonnet 5 (via the Anthropic API). We structured prompt formats to return precise, validated JSON file arrays and parse text blocks securely.

🚧 Challenges we ran into

  • Headless Terminal Dialogs: Running a GUI dialog (tkinter) inside a background command terminal caused the server thread to freeze. We overcame this by shifting to an isolated PowerShell Windows Forms subprocess that captures output and terminates cleanly.
  • Browser Extension Hydration Mismatches: Ad-blockers and browser shields (like Brave) inject styling attributes onto the DOM, causing React to crash with hydration mismatch overlays. We resolved this by refactoring the dashboard into a client-only dynamically imported component and adding console error interceptors.
  • AI Thinking Blocks: Newer models return thinking streams that lack standard text properties, crashing standard JSON parsers. We rewrote the backend parsing module to securely extract text blocks and handle markdown blocks.

🎉 Accomplishments that we're proud of

  • 100% Native OS Access: Bridging the web-to-desktop gap with a fully functional local directory picker.
  • Dynamic Recommendations: Writing logic that scans files first and sets up stack defaults automatically based on actual codebase contents.
  • Side-by-Side Visuals: Creating a stunning, glassmorphic UI that feels premium and responsive.

📚 What we learned

We learned the complexity of orchestrating LLMs for structural JSON code generation. Generating multi-file directory structures requires rigorous schema validation, safe path mapping (preventing directory traversal attacks), and robust error handling for API latency.

🔮 What's next for O2N

We plan to build:

  1. AST-based Code Dependency Graphs: Generating a visual interactive node graph of how legacy files import/depend on each other.
  2. Deep Semgrep Auditing: Fully integrating local containerized Semgrep scans for deep compliance analysis before and after conversion.
  3. Direct Git Commit Integration: Pushing the modernized codebase to a new branch automatically.

Built With

  • anthropiapikey
  • fastapi
  • langraph
  • moongodb
  • nextjs
  • python
  • semgrep
  • treesitter
Share this project:

Updates

posted an update —

The O2N Migration Console represents a massive step forward in solving the legacy code debt problem. Bridging native Windows OS interactions with dynamic Next.js 16/React 19 interfaces and Claude Sonnet 5 is a stellar showcase of technical execution.

We are excited to hear the community's thoughts! Please leave your feedback, suggestions, or features you’d love to see next in the comments below. Let’s make codebase migrations faster, safer, and automated together!

Log in or sign up for Devpost to join the conversation.

posted an update —

What’s New: Web apps are sandboxed and cannot access local folders. Instead of forcing developers to manually copy-paste paths, we integrated a native Windows Directory Dialog. How it Evolved: We initially tried running tkinter directly in the server process, but it blocked uvicorn's event loop in headless environments. We solved this by shifting the UI execution into an isolated PowerShell subprocess:

python

app/services.py

import subprocess def open_native_picker(): ps_script = ( "[void][System.Reflection.Assembly]::LoadWithPartialName('System.Windows.Forms'); " "$dialog = New-Object System.Windows.Forms.FolderBrowserDialog; " "$dialog.Description = 'Select Project Folder'; " "$dialog.ShowNewFolderButton = $true; " "$result = $dialog.ShowDialog(); " "if ($result -eq 'OK') { Write-Output $dialog.SelectedPath }" ) completed = subprocess.run( ["powershell", "-NoProfile", "-Command", ps_script], capture_output=True, text=True, timeout=60 ) return completed.stdout.strip()

  1. React 19 Client-Side Hydration Interceptor What’s New: In modern browsers like Brave, ad-blockers inject custom attributes (bis_skin_checked="1") into hidden div tags generated by Next.js's metadata managers. Since this happens on the client before React loads, it triggers a fatal React 19 hydration mismatch overlay. How it Evolved: We refactored the homepage to load dynamically with ssr: false and implemented a client-side interceptor that filters out extension-related warning logs:

typescript

// src/app/MigrationConsole.tsx if (typeof window !== "undefined") { const origError = console.error; console.error = function (...args) { if (args[0] && typeof args[0] === 'string' && ( args[0].includes('hydration') || args[0].includes('bis_skin_checked') )) { return; // Silences Brave ad-blocker DOM mismatch overlays } origError.apply(console, args); }; }

  1. Handling AI "Thinking" Streams What’s New: When using Claude Sonnet 5, the model generates structured ThinkingBlocks alongside standard TextBlocks to process code logic. The previous API parser expected text directly on message.content[0], causing crashes when thinking was returned. How it Evolved: We updated our Anthropic response parsing to dynamically search and extract text blocks:

python

app/services.py

Extract text content safely from all text blocks, skipping ThinkingBlocks

content = "".join([ block.text for block in message.content if getattr(block, "type", None) == "text" or hasattr(block, "text") ]).strip() Future Roadmap: Interactive Dependency Graph: Render AST-based maps of how files connect. Semgrep CI/CD Integration: Automatically run containerized security checks before and after AI modernization. Feel free to leave a comment below! What features would you like to see next in the O2N Engine?

Log in or sign up for Devpost to join the conversation.