Enhancements

[A7med7x7]

Project Enhancements & Roadmap

This document outlines the essential enhancements for csdecoded to transition from a prototype to a full-scale learning platform.

🚀 High Priority (Essentials)

• Interactive Code Sandboxes: Integrate an in-browser IDE (like Sandpack or WebContainer) for students to execute theory-related code (e.g., building a Lexer in JS).
• Search & Discovery: Implement a global search functionality across courses and lessons using Fuse.js or Algolia.
• User Progress Persistence: Enhance the current local storage system to a backend (Supabase/Firebase) for cross-device syncing.
• Dark/Light Mode Toggle: Allow users to switch themes (the foundations are already in Tailwind, but a toggle component is needed).

🛠️ Technical Debt & DX

• Automated Testing Suite: Expand Vitest coverage to include component testing for the MDX renderers.
• Type-Safe MDX Frontmatter: Ensure all .mdx files follow a strict schema for metadata (authors, reading time, difficulty).
• Image Optimization: Implement a pipeline for generating responsive versions of lesson assets.

🎨 Design & UX

• Custom Illustrations: Replace SVG placeholders with technical diagrams that match the brand's aesthetic.
• Micro-interactions: Add Framer Motion transitions between course transitions for a "premium" feel.
• Newsletter Integration: Add a "Stay Decoded" signup form to the footer.

📈 SEO & Marketing

• Sitemap Generation: Automate sitemap.xml creation on build.
• Course Preview Cards: Generate dynamic OG images for each specific course page using a library like satori.