🌍 LangShift.dev - Multi-Language Learning Platform

December 12, 2025 · View on GitHub

A programming language conversion learning platform designed for developers, helping you master new languages through comparative learning

English | 中文

📖 Project Overview

LangShift.dev is a programming language conversion learning platform specifically designed for developers. Through comparative analysis of syntax features and concept mapping between different programming languages, it helps you quickly understand the core concepts of new languages and apply them to real-world projects.

Our core philosophy is: Understanding unknown languages through known languages, making learning new programming languages simple and efficient.

💡 AI-Enhanced Learning: This project leverages AI technology to create rich learning content, reviewed and optimized to provide you with an efficient learning experience. Combine with official documentation for the best results! We welcome your feedback and suggestions via GitHub Issues.

🎯 Learning Objectives

Master new programming languages quickly through language comparison
Understand syntax features and design philosophies of different languages
Build multi-language development capabilities
Learn to migrate development thinking between different languages
Master modern development tools and best practices

🌐 Supported Language Conversions

🔄 JavaScript ↔ Python ✅ (Completed)

Learn Python from a JavaScript developer's perspective
Syntax mapping: variables, functions, classes, async programming
Ecosystem comparison: npm vs pip, Node.js vs Python
Practical projects: web development, data processing, automation scripts
Advanced features: type annotations, decorators, context managers
Includes 13 complete learning modules

📚 View detailed learning guide →

🔄 JavaScript ↔ Rust ✅ (Completed)

Learn Rust from a JavaScript developer's perspective
Memory management: garbage collection vs ownership system
Type system: dynamic types vs static types
Performance optimization: interpreted execution vs compiled optimization
Concurrency programming: event loop vs zero-cost abstractions
Includes 14 complete learning modules

📚 View detailed learning guide →

🔄 JavaScript ↔ Go ✅ (Completed)

Learn Go from a JavaScript developer's perspective
Concurrency programming: event loop vs Goroutines
Type system: dynamic types vs static types
Package management: npm vs Go Modules
Error handling: exceptions vs explicit error returns
Includes 14 complete learning modules

📚 View detailed learning guide →

🔄 JavaScript ↔ Kotlin ✅ (Completed)

Learn Kotlin from a JavaScript developer's perspective
Coroutine programming: Promise/async-await vs Kotlin coroutines
Android development: mobile app development basics
JVM ecosystem: Spring Boot and backend services
Functional programming: higher-order functions and Lambda expressions
Includes 14 complete learning modules

📚 View detailed learning guide →

🔄 JavaScript ↔ C++ ✅ (Completed)

Learn C++ from a JavaScript developer's perspective
Memory management: garbage collection vs manual management
Object-oriented programming: prototype chain vs class inheritance
Performance optimization: interpreted execution vs compiled optimization
Template programming: dynamic types vs generics
Includes 15 complete learning modules

📚 View detailed learning guide →

🔄 JavaScript ↔ Swift 🚧 (In Development)

Learn Swift from a JavaScript developer's perspective
Type system: dynamic types vs strong types
Memory management: garbage collection vs ARC
Functional programming: higher-order functions vs closures
Mobile development: Web vs iOS/macOS
Includes 15 learning modules

📚 View detailed learning guide →

🔄 JavaScript ↔ C ✅ (Completed)

Learn C programming from a JavaScript developer's perspective
Memory management: garbage collection vs manual memory management
Pointer operations: references vs pointers
Systems programming: high-level abstractions vs low-level control
Performance optimization: interpreted execution vs compiled optimization
Includes 15 complete learning modules

📚 View detailed learning guide →

🚀 More language support planned...

JavaScript ↔ Java (planned)
JavaScript ↔ Dart (planned)
Python ↔ Rust
Python ↔ TypeScript

📚 Learning Module Overview

JavaScript → Python (Completed)

Module 0: Python Introduction and Learning Methods
Module 1: Basic Syntax Comparison
Module 2: Module System and Package Management
Module 3: Object-Oriented and Functional Programming
Module 4: Asynchronous Programming
Module 5: Code Quality, Testing, and Type Annotations
Module 6: Web Development
Module 7: Data Processing and Automation
Module 8: Comprehensive Practical Projects
Module 9: Advanced Topics
Module 10: Common Pitfalls and Solutions
Module 11: Pythonic Code Style
Module 12: Type Annotations Deep Dive

JavaScript → Rust (Completed)

Module 0: Rust Introduction and Environment Setup
Module 1: Core Syntax and Structure Comparison
Module 2: Module System and Build Tools
Module 3: Ownership and Memory Model
Module 4: Concurrency and Async Models
Module 5: Type System and Traits
Module 6: Error Handling and Type Safety
Module 7: Web Development Practice
Module 8: Systems Programming and Advanced Topics
Module 9: Project-Driven Learning
Module 10: Common Pitfalls and Debugging Guide
Module 11: Idiomatic Rust Style
Module 12: Advanced Rust Features
Module 13: Performance Optimization and Best Practices

JavaScript → Go (Completed)

Module 0: Go Introduction and Learning Methods
Module 1: Basic Syntax Comparison
Module 2: Package System and Module Management
Module 3: Type System and Interfaces
Module 4: Concurrency Programming and Goroutines
Module 5: Channels and Select Statements
Module 6: Error Handling Mechanisms
Module 7: Web Development Practice
Module 8: Microservices Architecture
Module 9: Cloud-Native Development
Module 10: Testing and Debugging
Module 11: Comprehensive Practical Projects
Module 12: Common Pitfalls and Solutions
Module 13: Idiomatic Go Style

JavaScript → Kotlin (Completed)

Module 0: Kotlin Introduction and JVM Ecosystem
Module 1: Basic Syntax Comparison
Module 2: JVM Ecosystem and Toolchain
Module 3: Functional Programming Features
Module 4: Coroutines and Asynchronous Programming
Module 5: Object-Oriented Programming
Module 6: Android Development Basics
Module 7: Web Development and Spring Boot
Module 8: Mobile App Development
Module 9: Cross-Platform Development
Module 10: Testing and Debugging
Module 11: Comprehensive Practical Projects
Module 12: Common Pitfalls and Solutions
Module 13: Idiomatic Kotlin Style

JavaScript → C++ (Completed)

Module 0: C++ Introduction and Learning Methods
Module 1: Basic Syntax Comparison
Module 2: Memory Management Basics
Module 3: Pointers and References
Module 4: Object-Oriented Programming Basics
Module 5: Templates and Generic Programming
Module 6: STL Containers
Module 7: STL Algorithms
Module 8: Error Handling Mechanisms
Module 9: Smart Pointers
Module 10: Performance Optimization
Module 11: Modern C++ Features
Module 12: Concurrency and Multithreading
Module 13: Systems Programming
Module 14: Comprehensive Practical Projects

JavaScript → Swift (In Development - Partial)

Module 0: Swift Introduction and Learning Methods
Module 1: Basic Syntax Comparison
Module 2: Type System and Safety
Module 3: Functional Programming Features
Module 4: Object-Oriented Programming
Module 5: Protocols and Extensions
Module 6: Error Handling
Module 7: Concurrency Programming
Module 8: iOS/macOS Development
Module 9: SwiftUI Framework
Module 10: Network Programming
Module 11: Data Persistence
Module 12: Performance Optimization
Module 13: Testing and Debugging
Module 14: Comprehensive Practical Projects

JavaScript → C (Completed)

Module 0: C Language Introduction and Learning Methods
Module 1: Basic Syntax Comparison
Module 2: Variables and Memory Basics
Module 3: Pointer Fundamentals
Module 4: Arrays and String Processing
Module 5: Functions and Stack Management
Module 6: Structures and Unions
Module 7: Dynamic Memory Allocation
Module 8: File Operations and I/O
Module 9: Algorithms and Data Structures
Module 10: Systems Programming Basics
Module 11: Comprehensive Practical Projects
Module 12: Common Pitfalls and Debugging
Module 13: Performance Optimization and Best Practices
Module 14: Advanced Topics and Extensions

For detailed learning content, please refer to the dedicated documentation for each module.

🛠️ Technology Stack

Platform Technology

Framework: Next.js 15.5.7 (App Router)
Documentation: Fumadocs 15.6.1 + MDX
Styling: Tailwind CSS 4.0.9
Code Editor: Monaco Editor 4.7.0 + Pyodide
Internationalization: Support for English, Simplified Chinese, and Traditional Chinese
Search: Orama 3.1.1 full-text search

Language Runtimes

Python: Pyodide (browser-side Python)
JavaScript: V8 Engine
Rust: WebAssembly (planned)

Development Tools

Type Checking: TypeScript 5.8.2
Code Quality: ESLint 9.30.1, Prettier 3.5.3
Build Optimization: Turbopack
Performance Monitoring: Built-in performance monitoring components

Special Features

Interactive Code Editor: Supports multi-language syntax highlighting and real-time execution
Code Comparison Mode: Side-by-side display of implementations in different languages
Performance Monitoring: Real-time monitoring of code execution performance
Virtualized Editor: Optimized rendering performance for large amounts of code
Scrollycoding: Interactive code demonstrations
SEO Optimization: Structured data and search engine optimization

🚀 Quick Start

Requirements

Node.js 18+
pnpm (recommended package manager)
Modern browser (supports WebAssembly)

Installation Steps

Clone the project

git clone https://github.com/erweixin/langshift.dev.git
cd langshift.dev

Install dependencies
```
pnpm install
```
Start development server
```
pnpm dev
```
Access the project Open your browser and visit http://localhost:8000

Development Commands

# Development mode (using Turbopack)
pnpm dev

# Build production version
pnpm build

# Start production server
pnpm start

# Code linting
pnpm lint

# Type checking
pnpm type-check

# SEO checking
pnpm seo-check

# Build analysis
pnpm analyze

📁 Project Structure

langshift.dev/
├── app/                    # Next.js App Router
│   └── [lang]/            # Internationalization routes
│       ├── (home)/        # Home page
│       ├── docs/          # Documentation pages
│       ├── intro/         # Introduction pages
│       └── layout.tsx     # Layout components
├── components/            # React components
│   ├── python-editor.tsx  # Python code editor
│   ├── virtualized-editor.tsx # Virtualized editor
│   ├── side-by-side-code.tsx # Code comparison component
│   ├── scrollycoding.tsx # Scrollycoding component
│   ├── monaco-manager.tsx # Monaco editor management
│   ├── editor-performance-monitor.tsx # Performance monitoring
│   ├── interactive-code-comparison.tsx # Interactive code comparison
│   ├── seo-head.tsx      # SEO head component
│   ├── seo-doc-page.tsx  # Documentation page SEO
│   ├── analytics.tsx     # Analytics component
│   ├── annotations/      # Annotation components
│   └── ui/              # UI component library
├── content/              # Documentation content
│   └── docs/            # Documentation directory
│       ├── js2py/       # JavaScript → Python (completed)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 13 learning modules
│       ├── js2rust/     # JavaScript → Rust (completed)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 14 learning modules
│       ├── js2go/       # JavaScript → Go (completed)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 14 learning modules
│       ├── js2cpp/      # JavaScript → C++ (completed)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 15 learning modules
│       ├── js2swift/    # JavaScript → Swift (in development - partial)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 15 learning modules
│       ├── js2c/        # JavaScript → C (completed)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 15 learning modules
│       ├── js2kotlin/   # JavaScript → Kotlin (completed)
│       │   ├── README.md # Module introduction
│       │   ├── .cursorrules # Module specifications
│       │   └── module-*.mdx # 14 learning modules
│       └── ...
├── lib/                 # Utility functions
│   ├── i18n.ts         # Internationalization configuration
│   ├── seo-structured-data.ts # SEO structured data
│   ├── source.ts       # Source configuration
│   └── utils.ts        # Utility functions
├── messages/           # Internationalization messages
│   ├── en.json        # English
│   ├── zh-cn.json     # Simplified Chinese
│   └── zh-tw.json     # Traditional Chinese
├── styles/            # Style files
├── middleware.ts      # Middleware configuration
├── next.config.mjs   # Next.js configuration
├── source.config.ts  # Fumadocs configuration
├── tsconfig.json     # TypeScript configuration
├── README.md         # Project description (this file)
└── .cursorrules      # Global development specifications

🎯 Learning Recommendations

Choose a starting point: Begin with the language you're most familiar with
Comparative learning: Focus on syntax differences and concept mapping
Hands-on practice: Write code to verify each concept
Project-driven: Consolidate knowledge through practical projects
Progressive learning: Follow module order and build a solid foundation
Performance focus: Understand performance characteristics of different languages
Best practices: Learn coding standards and best practices for each language

🌟 Special Features

🔄 Interactive Code Editor

Supports syntax highlighting for multiple programming languages
Real-time code execution and error prompts
Code comparison mode for intuitive difference display
Performance monitoring and optimization suggestions
Virtualized rendering supporting large amounts of code

📚 Structured Learning Path

Modular course design
Progressive difficulty increase
Rich code examples and exercises
Project-driven learning
Multi-language content support

🌍 Multi-language Support

Three-language interface: English, Simplified Chinese, Traditional Chinese
Internationalized documentation content
Localized learning experience
Language detection and automatic redirection

🔍 Intelligent Search

Full-text search functionality
Multi-language search support
Search result highlighting
Search history records

📊 Performance Optimization

Image optimization and lazy loading
Code splitting and on-demand loading
Cache strategy optimization
SEO-friendly design

📖 Documentation Structure

This project adopts a layered documentation structure:

Root-level Documentation

README.md (this file) - Overall project introduction and quick start
.cursorrules - Global development specifications and AI assistant behavior guidelines