Christian Tannahill
Back to Projects

CodeShift

React 18TypeScriptViteFastAPITailwind CSS+3
View Demo Source Code
CodeShift

CodeShift is a modern, AI-powered platform designed to help developers translate code across frameworks like React, Vue, Next.js, and Angular—while simultaneously building personalized learning paths to deepen their understanding of each technology. It blends practical tooling with smart insights to create a full development and education ecosystem.

🔧 Technologies

🛠️Technology Stack

React 18TypeScriptViteFastAPITailwind CSSZustandMonaco EditorPostgreSQL

🔀 AI Code Translation

✨Key Features

  • Source-to-Target Detection

    Select frameworks like React, Vue, Angular, and Next.js with intelligent matching.

  • Feasibility Analysis

    Pre-translation checks to assess code complexity and estimated conversion confidence.

  • Interactive Framework Picker

    Easily swap between supported technologies with an intuitive dropdown.

Framework-Aware Translation features

🎓 Adaptive Learning System

✨Key Features

  • Guided Input Flow

    Users define learning goals, target proficiency, and time commitment using an AI-assisted form.

  • Adaptive Personalization

    The system adjusts curriculum intensity and content based on experience and style (e.g., hands-on vs concept-focused).

  • Multi-Tech Support

    Supports personalized transitions across dozens of modern frontend and backend frameworks.

Dynamic Path Creation features

📂 Repository Management

✨Key Features

  • Seamless Repo Linking

    Quickly connect public GitHub repositories via a simple UI form for immediate analysis.

  • Branch Targeting

    Specify branches like `main` or `dev` to ensure the most relevant context is used during translation and profiling.

  • Secure Analysis

    Only public repos are currently supported, with private repo support planned. All data is processed locally or through scoped APIs.

GitHub Repository Integration features

🧠 Project Timeline

📅Project Timeline

May 24, 2025

Initial Concept

Outlined the problem space, target audience, and AI-focused technical approach.

May 31, 2025

Documentation Planning

Established architecture, README, and content structure to guide early development.

June 2, 2025

Frontend Development Start

Built the UI foundation using Vite, Zustand, and Tailwind. Initialized Monaco integration.

June 4, 2025

Frontend Demo Complete

Completed functional demo with mock data and polished UI to validate feature direction.

June 2025

Backend Scaffolding

Started FastAPI and PostgreSQL backend with plans for LLM integration.

TBD

Backend Completion

To include live translation APIs, user authentication, and learning data analysis.

📊 Metrics

📊Project Metrics

🎯Frontend Completion

100%

🛠️Backend Progress

40%

🤖AI Integration Design

60%

✨UI Polish & UX

90%

🧩 Core Challenges

🧩

Framework-Aware Code Translation

HighAI / Dev Tooling

Challenge:

Traditional converters fail to respect idioms like hooks, routing, or composition models across JS frameworks.

Solution:

Implemented a hybrid LLM + static analysis approach to preserve structure and map functional intent.

Impact:

Dramatically improved translation accuracy and usability in real-world projects.

🧩

Adaptive Learning at Scale

MediumLearning Platforms

Challenge:

Pre-built tutorials often mismatch developer level, causing disengagement or inefficiency.

Solution:

Designed adaptive curricula based on analysis of past projects, target goals, and usage patterns.

Impact:

Improved engagement and knowledge retention while reducing redundant lessons.

🧪 Status

  • ✅ Frontend: Fully functional with mock data, production-ready UX
  • 🚧 Backend: Core structure in place, API development underway
  • 🌐 Demo: Live Demo
  • 📦 Tech Stack: Vite, React 18, Zustand, Tailwind, FastAPI (WIP), PostgreSQL (WIP)