🎨🧩 Rosetta Code Hub

Interactive Programming Visualizations - Where Code Meets Art

Rosetta Code Hub is an ambitious portfolio project transforming classic programming problems from Rosetta Code into stunning, interactive visualizations. Learn algorithms, data structures, and computational thinking through immersive visual demonstrations.

🚧 Project Status: Actively in development | Progress: 100 visualizations completed 🎉 | Goal: 1000+ problems from Rosetta Code

Documentation • Roadmap • Featured Visualizations

---

✨ Fitur Utama

🎯 Interactive Visual Learning

• 100 Programming Problems visualized! 🎉
• Each visualization is unique and hand-crafted with care
• Real-time animations showcasing algorithm execution step-by-step
• Beautiful UI with smooth transitions and micro-interactions
• Touch-friendly controls for mobile learning

🎨 Premium Design System

• Dark Mode with vibrant neon accents and glassmorphism
• Carefully curated color palette using advanced CSS techniques
• Responsive layouts (mobile-first, 320px - 2560px+)
• Custom animations with Motion (Framer Motion successor)

🧩 Diverse Problem Categories

• Mathematical Puzzles: 9 Billion Names of God, Achilles Numbers, Almkvist-Giullera Formula, Bernstein Basis Polynomials
• Game Simulations: 15 Puzzle, 21 Game, 24 Game, 100 Prisoners Problem
• Cellular Automata: Abelian Sandpile Model with neon toppling effects
• String Processing: Anagrams, Anadromes, Abbreviations, Best Shuffle
• Algorithm Visualization: Binary Search, ABC Correlation, Aliquot Sequences, Bifid Cipher
• Cryptography: Bifid Cipher with Spy/Secret Agent theme, ADFGVX Cipher

🚀 Performance-First Architecture

• Code Splitting with lazy-loaded routes and components
• Lightning-fast development with Vite
• Type-safe codebase with TypeScript
• Optimized for 60fps animations

📱 Accessible & User-Friendly

• Keyboard navigation support
• WCAG-compliant color contrast
• Touch targets minimum 44x44px
• Intuitive filtering and tagging system

---

🏗️ Arsitektur Sistem

graph TB
    subgraph "Client Layer"
        A[React 19 SPA]
        B[Interactive Visualizations]
        C[Motion Animations]
    end
    
    subgraph "Routing & State"
        D[React Router DOM]
        E[Component State Management]
    end
    
    subgraph "Build & Development"
        F[Vite Build Tool]
        G[TypeScript Compiler]
    end
    
    subgraph "Styling System"
        H[Tailwind CSS v4]
        I[CSS Variables]
        J[Glassmorphism UI]
    end
    
    A --> D
    A --> B
    B --> C
    D --> E
    F --> G
    A --> H
    H --> I
    I --> J

Loading

---

🚀 Quick Start

Prerequisites

• Bun v1.0+ (recommended) or Node.js 20+
• Modern browser with ES2020+ support

Installation

# Clone the repository
git clone https://github.com/feb027/rosetta-hub.git
cd rosetta-hub

# Install dependencies
bun install

# Run development server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

The app will be available at http://localhost:5173

---

📦 Tech Stack

Frontend

• React 19.2 - Latest React with concurrent features
• TypeScript 5.9 - Type-safe JavaScript
• Tailwind CSS v4 - Modern utility-first CSS framework
• Motion 12 - Next-gen animation library (Framer Motion successor)
• React Router DOM 7 - Declarative routing
• Lucide React - Beautiful consistent icon set
• React Tooltip - Accessible tooltip components

Build Tools

• Vite 7 - Lightning-fast build tool and dev server
• ESLint 9 - Code quality and consistency
• TypeScript ESLint - TypeScript linting rules

Development

• Bun - Ultra-fast JavaScript runtime & package manager (optional)
• Hot Module Replacement (HMR) for instant feedback
• Source maps for debugging

---

📖 Dokumentasi

Project Structure

rosetta-hub/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── visualizations/  # Problem-specific visualizations
│   │   ├── FloatingNav.tsx  # Navigation bar
│   │   ├── Footer.tsx       # Footer component
│   │   └── ...
│   ├── pages/               # Route pages
│   │   ├── HomePage.tsx     # Problem gallery
│   │   ├── ProblemDetailPage.tsx
│   │   ├── AboutPage.tsx
│   │   └── ChangelogPage.tsx
│   ├── problems/            # Problem metadata & solutions
│   │   ├── 100-doors/
│   │   ├── abelian-sandpile/
│   │   └── ...
│   ├── constants/           # App configuration
│   ├── hooks/              # Custom React hooks
│   ├── types/              # TypeScript definitions
│   └── utils/              # Helper functions
├── public/                 # Static assets
└── index.html             # Entry HTML

Adding New Problems

Want to add a new visualization? Check out our guide:

📝 Adding Tags Guide
📝 Rosetta Code Integration

---

🎨 Design Philosophy

Visual Excellence

Every visualization is designed to be educational AND beautiful:

• Neon & Glassmorphism: Modern aesthetics with depth and glow effects
• Micro-animations: Smooth transitions that guide attention
• Color Psychology: Strategic use of color to convey meaning
• White Space: Breathing room for visual clarity

User Experience

• Progressive Disclosure: Show complexity gradually
• Immediate Feedback: Visual responses to every interaction
• Discoverability: Clear affordances and intuitive controls
• Consistency: Unified design language across all problems

---

🗺️ Roadmap

🎯 The Ambitious Goal

This is an ongoing portfolio project with a bold vision:

• 📊 Current Progress: 50+ visualizations completed
• 🎯 Milestone 1: Reach 100 visualizations → Deploy live demo
• 🚀 Ultimate Goal: Visualize all 1000+ problems from Rosetta Code
• 💪 Commitment: Continuous development even after reaching 100 problems

"Transform code into art, one visualization at a time."

---

🤝 Contributing

Contributions are welcome! Whether it's:

• 🐛 Bug reports
• 💡 Feature suggestions
• 🎨 New visualizations
• 📝 Documentation improvements
• 🌍 Translations

Commit Convention

We follow Conventional Commits:

feat: add binary tree traversal visualization
fix: correct animation timing in sandpile
docs: update installation instructions
style: improve glassmorphism effects
refactor: extract color utilities
perf: optimize large grid rendering

Code Style

• TypeScript: Strict mode enabled
• React: Functional components with hooks
• Formatting: 2-space indentation
• Naming: camelCase for functions, PascalCase for components
• Linting: ESLint with React rules

---

🐛 Troubleshooting

Issue: Animations are laggy

Solution: Enable hardware acceleration in your browser settings, or toggle performance mode (coming in v1.1).

Issue: Build fails with TypeScript errors

# Clear cache and reinstall
rm -rf node_modules bun.lockb dist
bun install
bun run build

Issue: Vite dev server won't start

Solution: Check if port 5173 is in use. You can specify a different port:

bun run dev -- --port 3000

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Rosetta Code - For the amazing collection of programming problems
• Motion - For the powerful animation library
• Tailwind CSS - For the incredible styling framework
• Lucide - For the beautiful icon set
• The open-source community for inspiration and tools

---

👨‍💻 Author

feb027

• GitHub: @feb027
• Portfolio: feb027.dev (coming soon)

---

Made with 💙 and ✨ by feb027

Transform code into art, one visualization at a time.

⭐ Star this repo • 🐛 Report Bug • 💡 Request Feature