تعلم لغة روبي باللغة العربية
Learn Ruby Programming in Arabic
Features • Demo • Getting Started • Tech Stack • Project Structure • Contributing • License
Ruby3araby (روبي عربي) is a free, interactive Ruby programming course designed for Arabic speakers. The entire course runs directly in the browser using Ruby WASM — no installation, no backend, no setup required.
Write, run, and learn Ruby code instantly with comprehensive Arabic explanations, progressive exercises, and real-time feedback.
Interactive code editor with Arabic lessons and instant execution
- 100% Browser-Based — Ruby code executes entirely in the browser via WebAssembly. No server, no installation.
- Arabic-First Content — Complete curriculum written in Arabic with RTL support throughout the interface.
- Interactive Code Editor — Monaco Editor with Ruby syntax highlighting, real-time syntax checking, and keyboard shortcuts.
- Progressive Exercises — Each lesson includes hands-on exercises with expected output validation and progressive hints.
- Progress Tracking — Automatic progress saving to localStorage. Pick up where you left off.
- Dark/Light Themes — Full theme support with system preference detection.
- Mobile Friendly — Responsive design with touch-friendly controls.
- Offline Capable — WASM binary is cached for faster subsequent loads.
| Section | Topics Covered |
|---|---|
| البداية (Getting Started) | Hello World, Comments, Output Methods |
| الأساسيات (Fundamentals) | Variables, Data Types, Operators, Strings, User Input |
| التحكم في التدفق (Control Flow) | Conditionals, Case/When, Ternary Operator |
| الحلقات (Loops) | While, Until, For, Loop Control |
| المجموعات (Collections) | Arrays, Hashes, Ranges, Enumerables |
| الدوال (Methods) | Defining Methods, Return Values, Splat Operators |
| الكتل (Blocks) | Block Syntax, Yield, Procs & Lambdas |
| البرمجة الكائنية (OOP) | Classes, Objects, Inheritance, Modules |
| معالجة الأخطاء (Error Handling) | Begin/Rescue/End, Custom Errors |
| التحديات (Challenges) | FizzBuzz, Calculator, Guessing Game |
- Node.js 18.x or higher
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/yourusername/ruby3araby.git
cd ruby3araby
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 in your browser.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Create optimized production build |
npm run start |
Start production server |
npm run lint |
Run ESLint |
npm run typecheck |
Run TypeScript type checking |
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI library |
| TypeScript 5 | Type safety |
| Ruby WASM | Browser-based Ruby execution |
| Monaco Editor | Code editor (VS Code's editor) |
| Tailwind CSS 4 | Styling with RTL support |
| Shiki | Syntax highlighting for lesson content |
ruby3araby/
├── app/ # Next.js App Router
│ ├── page.tsx # Homepage
│ ├── layout.tsx # Root layout with providers
│ ├── lessons/[section]/[lesson]/ # Dynamic lesson pages
│ ├── glossary/ # Programming terminology
│ └── progress/ # User progress page
│
├── components/ # React components
│ ├── CodePlayground.tsx # Interactive code editor + runner
│ ├── CodeEditor.tsx # Monaco editor wrapper
│ ├── Sidebar.tsx # Course navigation
│ └── ThemeToggle.tsx # Dark/light theme switcher
│
├── lib/ # Core utilities
│ ├── ruby-runner.ts # Ruby WASM singleton service
│ ├── course-loader.ts # Course structure utilities
│ ├── progress.ts # localStorage progress service
│ └── types.ts # TypeScript type definitions
│
├── content/ # Course content
│ ├── course.json # Course structure definition
│ ├── glossary.json # Programming terms glossary
│ └── lessons/ # Markdown lesson files
│ ├── getting-started/
│ ├── fundamentals/
│ ├── control-flow/
│ └── ...
│
└── public/ # Static assets
-
Lazy Loading: The Ruby WASM module (~20MB) is loaded only when the user first runs code.
-
Caching: The WASM binary is cached using the Cache API for instant subsequent loads.
-
Sandboxed Execution: Code runs in an isolated WebAssembly environment with captured stdout/stderr.
-
Input Simulation:
getscalls are simulated using pre-defined input values for exercises.
- Progress is stored in
localStoragewith theruby3araby_prefix - Tracks: completed lessons, last visited lesson, saved code per lesson
- Code auto-saves with 1-second debounce
- Cross-tab synchronization via custom events
Contributions are welcome! Here's how you can help:
- Lesson content lives in
content/lessons/{section}/{lesson}.md - Update
content/course.jsonto register new lessons - Each lesson can include an exercise with:
starterCode: Initial code templateexpectedOutput: Expected output for validationhints: Progressive hints (revealed one at a time)defaultInput: Simulated input forgetscalls
- Follow existing code patterns and naming conventions
- Use TypeScript for all new code
- Ensure RTL compatibility for Arabic content
- Test on both desktop and mobile viewports
- Run
npm run lintandnpm run typecheckbefore submitting
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Additional advanced Ruby topics
- Interactive quizzes
- Certificate of completion
- PWA support for offline access
- Community discussion features
- Video lesson supplements
This project is licensed under the MIT License — see the LICENSE file for details.
- Ruby WASM team for making Ruby run in the browser
- Matz and the Ruby community for creating such an elegant language
- The Arabic developer community for inspiration and feedback
Made with ❤️ for Arabic-speaking developers
روبي عربي — تعلم البرمجة باللغة العربية