Complete technical reference for LangSteps

Welcome to the official hub-level documentation for the LangSteps platform. This guide provides comprehensive architectural details, deployment strategies, core system functionalities, and guidelines for contributing.

The platform encompasses multiple modules including HTML, CSS, JavaScript, and React, bound together by a unified, glassmorphic design language and state management system.

The LangSteps platform is built on a highly modular, decoupled architecture, allowing each course module to function completely offline while maintaining global state synchronization via the localStorage API.

File Organization Pattern

LangSteps/
├── index.html           # Main Hub Entry
├── style.css            # Global Hub Styles
├── script.js            # Global Logic & Routing
├── developer.html       # You are here (Hub Docs)
├── HTML/                # HTML Course Module
│   ├── index.html
│   └── developer.html   # Module-specific docs
├── CSS/                 # CSS Course Module
├── JS/                  # JavaScript Course Module
└── React/               # React Course Module
                    

To run the platform locally, you simply need a modern web browser. The entire platform is built with vanilla web technologies and supports the file:// protocol seamlessly.

1. Clone the repository: git clone https://github.com/sanskarIN/LangSteps.git
2. Navigate to the folder: cd LangSteps
3. Open Hub: Double-click index.html in the root directory.

Single-File Module Pattern

Each module primarily relies on an index.html file with inline or co-located CSS/JS. This ensures high portability and ultra-fast load times.

State Management (localStorage)

We use a namespaced approach to prevent collisions. Hub settings use hubMasteryTheme, while modules use htmlMastery_data, reactMastery_data, etc.

const HUB_THEME_KEY = 'hubMasteryTheme';

function saveHubTheme(theme) {
    localStorage.setItem(HUB_THEME_KEY, theme);
    document.documentElement.setAttribute('data-theme', theme);
}

function initHubTheme() {
    const saved = localStorage.getItem(HUB_THEME_KEY);
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const theme = saved || (prefersDark ? 'dark' : 'light');
    saveHubTheme(theme);
}
                    

The platform boasts a robust CSS variables architecture. The hub controls light/dark modes, while individual modules may offer up to 25+ unique themes.

• CSS Variables: All colors are defined in the :root selector and mapped to semantic names (e.g., --bg-color, --text-primary).
• Glassmorphism: Achieved using backdrop-filter: blur(12px) and semi-transparent RGBA backgrounds.
• Theme Switching API: Simple DOM manipulation flipping the data-theme attribute on the <html> element.

Modules contain integrated assessment engines. Questions are stored in JSON format, randomized, and scored client-side. Progress is immediately persisted to localStorage.

const quizQuestions = [
    {
        id: "q1",
        topic: "React Hooks",
        question: "Which hook is used for side effects?",
        options: ["useState", "useEffect", "useContext", "useReducer"],
        correctIndex: 1,
        explanation: "useEffect manages side effects like data fetching and subscriptions."
    }
];
                    

The platform implements an integrated Google Translate widget, enabling localization in 75+ languages globally.

Advanced modules may implement direct translation engines via XHR/Fetch depending on the target audience requirements.

An integrated gamification system that tracks user progress across all modules.

• XP System: Earn points by completing sections, passing quizzes, and consistent daily streaks.
• Achievements: Unlock badges for milestones (e.g., "First Module Complete", "Quiz Master").

Press Cmd+K or Ctrl+K to open the global command palette. It features fuzzy search across modules, topics, and quick actions like theme toggling.

(Try pressing Ctrl+K right now!)

All modules include rich code editors and snippet displays. We use standard <pre><code> blocks styled with custom syntax highlighting classes to ensure zero external dependencies.

Ensure the following checklist is met before pushing updates:

1. Verify localStorage state doesn't throw quotas exceeded errors.
2. Test responsive design on mobile (iPhone SE), tablet (iPad), and 4K displays.
3. Validate file:// protocol execution (no CORS issues).
4. Check contrast ratios for accessibility in both light and dark themes.

The platform is a static site. Recommended deployment targets:

• GitHub Pages: Direct deployment from the main branch.
• Vercel / Netlify: Drop the folder structure and let it auto-deploy.
• Offline Distribution: Zip the folder and distribute (works perfectly).

We welcome contributions! Please adhere to the following rules:

• Maintain the pure HTML/CSS/JS architecture. Do not introduce build steps or Node.js dependencies for the core hub.
• Use semantic HTML5 tags.
• Ensure all new UI components are glassmorphic and support data-theme="dark" and "light".

• v2.0.0: Complete architectural rewrite. Introduced glassmorphism, global state, and 4 core modules.
• v1.5.0: Added React Mastery module.
• v1.0.0: Initial launch of HTML & CSS modules.