# langshift.dev **Repository Path**: jcoffee_admin/langshift.dev ## Basic Information - **Project Name**: langshift.dev - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-08-14 - **Last Updated**: 2025-08-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🌍 LangShift.dev - Multi-Language Learning Platform > A programming language conversion learning platform designed for developers, helping you master new languages through comparative learning English | [δΈ­ζ–‡](README.md) [![Next.js](https://img.shields.io/badge/Next.js-15.3.5-black.svg)](https://nextjs.org) [![React](https://img.shields.io/badge/React-19.0.0-blue.svg)](https://react.dev) [![TypeScript](https://img.shields.io/badge/TypeScript-5.8.2-blue.svg)](https://www.typescriptlang.org) [![Fumadocs](https://img.shields.io/badge/Fumadocs-15.6.1-purple.svg)](https://fumadocs.vercel.app) [![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md) ## πŸ“– 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. ## 🎯 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 β†’](./content/docs/js2py/README.md)** ### πŸ”„ 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 β†’](./content/docs/js2rust/README.md)** ### πŸ”„ 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 β†’](./content/docs/js2go/README.md)** ### πŸ”„ JavaScript ↔ C++ 🚧 (In Development) - 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 learning modules** **πŸ“š [View detailed learning guide β†’](./content/docs/js2cpp/README.md)** ### πŸ”„ 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 β†’](./content/docs/js2swift/README.md)** ### πŸ”„ JavaScript ↔ C 🚧 (In Development) - 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 learning modules** **πŸ“š [View detailed learning guide β†’](./content/docs/js2c/README.md)** ### πŸš€ More language support planned... - TypeScript ↔ Java - Python ↔ Rust - JavaScript ↔ Dart - 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 β†’ C++ (In Development) - **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) - **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 For detailed learning content, please refer to the dedicated documentation for each module. ## πŸ› οΈ Technology Stack ### Platform Technology - **Framework**: Next.js 15.3.5 (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 1. **Clone the project** ```bash git clone https://github.com/erweixin/langshift.dev.git cd langshift.dev ``` 2. **Install dependencies** ```bash pnpm install ``` 3. **Start development server** ```bash pnpm dev ``` 4. **Access the project** Open your browser and visit [http://localhost:8000](http://localhost:8000) ### Development Commands ```bash # 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++ (in development) β”‚ β”‚ β”œβ”€β”€ README.md # Module introduction β”‚ β”‚ β”œβ”€β”€ .cursorrules # Module specifications β”‚ β”‚ └── module-*.mdx # 15 learning modules β”‚ β”œβ”€β”€ js2swift/ # JavaScript β†’ Swift (in development) β”‚ β”‚ β”œβ”€β”€ README.md # Module introduction β”‚ β”‚ β”œβ”€β”€ .cursorrules # Module specifications β”‚ β”‚ └── module-*.mdx # 15 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 1. **Choose a starting point**: Begin with the language you're most familiar with 2. **Comparative learning**: Focus on syntax differences and concept mapping 3. **Hands-on practice**: Write code to verify each concept 4. **Project-driven**: Consolidate knowledge through practical projects 5. **Progressive learning**: Follow module order and build a solid foundation 6. **Performance focus**: Understand performance characteristics of different languages 7. **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 ### Module-level Documentation Each language conversion module has its own dedicated documentation: - **README.md** - Detailed module introduction and learning guide - **.cursorrules** - Module-specific development specifications ### Documentation Templates - **docs/module-documentation-template.md** - New module creation guide ## 🀝 Contributing We welcome Issue submissions and Pull Requests! 1. Fork this repository 2. Create a feature branch (`git checkout -b feature/AmazingFeature`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request ### Contribution Types - πŸ› Bug fixes - ✨ New feature development - πŸ“ Documentation improvements - 🌍 Internationalization translations - 🎨 UI/UX optimizations - πŸš€ Performance optimizations - πŸ§ͺ Test cases ### Development Standards - Follow TypeScript strict mode - Use ESLint and Prettier - Write unit tests - Follow Git commit standards - Update related documentation ## πŸ“„ License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. ## πŸ™ Acknowledgments Thanks to all developers who have contributed to this platform! ## πŸ“ž Contact Us - Project homepage: [https://langshift.dev](https://langshift.dev) - Issue feedback: [GitHub Issues](https://github.com/erweixin/langshift.dev/issues) - Feature suggestions: [GitHub Discussions](https://github.com/erweixin/langshift.dev/discussions) --- **Making programming language learning simple and efficient!** πŸš€