RE cod

• 

  Home Page

• 

  Settings

• 

  Code Studio

• 

  Categories

• 

  Challenges

Inspiration

Learning to code or trying out web templates can often be overwhelming for beginners due to complex setup environments. We were inspired to create a seamless, all-in-one interactive platform that allows developers and students to browse templates, test code instantly, and learn without friction.

What it does

Our project RE-cod is an interactive web development studio and template library. Key features include:

• Interactive Studio: A live code editor where users can write, run, and preview HTML/CSS/JS code in real-time.
• Template Library: A organized catalog of coding templates and components ready to use.
• Multi-language Support: Full localization supporting English, Arabic, French, and Spanish.
• Error Inspector & Utility Tools: Built-in error checking and custom display settings (Dark/Light themes).

How we built it

We built the application using core web technologies to ensure high performance and zero dependency overhead:

• HTML5 & CSS3: Responsive UI layout, supporting both LTR and RTL directions.
• JavaScript (ES6+): Dynamic theme switching, language toggling, and interactive playground logic.
• CodeMirror Integration: Integrated locally to power the code editor with syntax highlighting and live feedback.

Challenges we ran into

Integrating a fully functional code editor with live preview and local library setups without relying strictly on external CDNs required careful DOM manipulation and isolated preview handling. Handling multi-language direction (RTL/LTR) seamlessly across complex UI elements was also a rewarding challenge.

Accomplishments that we're proud of

• Successfully delivered a clean, responsive, and fully localized developer environment.
• Integrated a smooth live preview system that provides immediate visual feedback.

What we learned

We deepened our knowledge in client-side state management, multi-language internationalization (i18n), and localizing third-party developer tools like CodeMirror.

Built With

• codemirror
• css3
• html5
• javascript