docs: update README to include Tailwind CSS support and enhance clarity

Author: nextlevelshit

README.md

@@ -1,28 +1,32 @@
 ![Code Crispies Logo](./public/android-chrome-192x192.png)
 # Code Crispies
 
-An interactive platform for learning CSS through practical challenges.
+An interactive platform for learning CSS and Tailwind CSS through practical challenges.
 
 ## 📚 Overview
 
-Code Crispies is a web-based learning platform designed to help users master CSS through hands-on exercises. The application presents a series of progressive challenges organized into themed modules, allowing learners to build their skills step by step while receiving immediate feedback.
+Code Crispies is a web-based learning platform designed to help users master CSS and Tailwind CSS through hands-on exercises. The application presents a series of progressive challenges organized into themed modules, allowing learners to build their skills step by step while receiving immediate feedback.
 
 ### Key Features
 
-- **Interactive Lessons**: Learn CSS concepts through practical, hands-on challenges
+- **Interactive Lessons**: Learn CSS and Tailwind concepts through practical, hands-on challenges
+- **Dual Mode Support**: Switch between CSS and Tailwind CSS learning modes
 - **Progressive Difficulty**: Modules are structured to build skills gradually from basic to advanced
-- **Real-Time Feedback**: Get immediate validation on your code solutions
+- **Real-Time Feedback**: Get immediate validation on your code solutions with comprehensive feedback
 - **Progress Tracking**: Your learning progress is automatically saved in the browser
-- **Visual Preview**: See the results of your CSS code in real-time
-- **Comprehensive Modules**: Cover various CSS topics in organized learning paths
+- **Visual Preview**: See the results of your code in real-time with live preview
+- **Comprehensive Modules**: Cover various CSS and Tailwind topics in organized learning paths
+- **Schema-Validated Lessons**: All lessons follow a strict JSON schema for consistency
 
 ## 🛠️ Technical Stack
 
 - Pure JavaScript (ES Modules)
 - HTML5 & CSS3
 - Vite for bundling and development
-- Vitest for testing
+- Vitest for testing with coverage reporting
+- JSON Schema validation for lesson structure
 - Local Storage for progress persistence
+- whatwg-fetch polyfill for compatibility
 
 ## 🚀 Getting Started
 
@@ -33,7 +37,7 @@ Code Crispies is a web-based learning platform designed to help users master CSS
 
 ### Installation
 
-0. NVM (optional) 
+0. NVM (optional)
    ```bash
    nvm use
    ```
@@ -61,105 +65,139 @@ Code Crispies is a web-based learning platform designed to help users master CSS
 
 ### Available Scripts
 
-- `npm run dev` - Start the development server
+- `npm start` - Start the development server (alias for `npm run dev`)
+- `npm run dev` - Start the development server with host binding
 - `npm run build` - Build for production
-- `npm run preview` - Preview the production build locally
-- `npm run test` - Run tests
+- `npm run preview` - Preview the production build locally with debug mode
+- `npm run test` - Run tests once
 - `npm run test.watch` - Run tests in watch mode
 - `npm run test.coverage` - Run tests with coverage report
-- `npm run format` - Format source code with Prettier
+- `npm run format` - Format source code with Prettier (includes config files)
 - `npm run format.lessons` - Format lesson JSON files with Prettier
 
 ## 📖 Usage Guide
 
 ### How to Use Code Crispies
 
-1. **Select a Module**: Choose a learning module from the Progress menu
-2. **Read the Challenge**: Each lesson includes an objective and task instructions
-3. **Write CSS Code**: Enter your CSS solution in the editor
-4. **Run Your Code**: Click the "Run" button (or press Ctrl+Enter) to test your solution
-5. **Review Feedback**: Get immediate feedback on your solution
-6. **Progress**: Move to the next lesson once your solution is correct
+1. **Select a Module**: Choose a learning module from the available options
+2. **Choose Mode**: Select between CSS or Tailwind CSS learning mode (if applicable)
+3. **Read the Challenge**: Each lesson includes a description, task instructions, and learning objectives
+4. **Write Code**: Enter your CSS or Tailwind solution in the editor
+5. **Run Your Code**: Click the "Run" button (or press Ctrl+Enter) to test your solution
+6. **Review Feedback**: Get comprehensive feedback with validation messages
+7. **Progress**: Move to the next lesson once your solution passes all validations
 
 ### Keyboard Shortcuts
 
 - `Ctrl+Enter` - Run your code
-- `Tab` - Insert two spaces (for indentation)
+- `Tab` - Insert appropriate indentation
 
 ## 🧩 Project Structure
 
 ```
 code-crispies/
-├── public/             # Static assets
+├── coverage/          # Test coverage reports
+├── docs/              # Documentation files (multilingual)
+├── lessons/           # JSON lesson definitions
+├── public/            # Static assets and PWA manifests
+├── schemas/           # JSON Schema definitions
+│   └── code-crispies-module-schema.json
 ├── src/
-│   ├── config/         # Configuration files
-│   │   └── lessons.js  # Module and lesson definitions
-│   ├── helpers/        # Helper utilities
+│   ├── config/        # Configuration files
+│   │   └── lessons.js # Module and lesson loading logic
+│   ├── helpers/       # Helper utilities
 │   │   ├── renderer.js # UI rendering functions
 │   │   └── validator.js # Code validation logic
 │   ├── impl/
 │   │   └── LessonEngine.js # Core lesson processing logic
-│   ├── app.js          # Main application entry point
-│   ├── index.html      # Main HTML template
-│   └── main.css        # Global styles
-├── tests/              # Test files
-│   ├── setup.js        # Test configuration
-│   └── *.test.js       # Test files
-├── vite.config.js      # Vite configuration
-└── vitest.config.js    # Vitest configuration
+│   ├── app.js         # Main application entry point
+│   ├── index.html     # Main HTML template
+│   └── main.css       # Global styles
+├── tests/             # Test files
+│   ├── setup.js       # Test configuration
+│   └── unit/          # Unit tests
+├── vite.config.js     # Vite configuration
+└── vitest.config.js   # Vitest configuration
 ```
 
 ## 📝 Adding New Lessons
 
-Lessons are defined in JSON format in the `lessons.js` file. Each lesson includes:
+Lessons are defined in JSON format following the schema in `schemas/code-crispies-module-schema.json`. Each module includes comprehensive lesson definitions with validation rules.
 
-- Title and description
-- Task instructions
-- HTML content for the preview area
-- CSS prefix and suffix (the code before and after the user's input)
-- Validation criteria
+### Module Structure
 
-Example lesson structure:
+```json
+{
+  "id": "unique-module-id",
+  "title": "Module Title",
+  "description": "Detailed description of module content and purpose",
+  "mode": "css", // or "tailwind"
+  "difficulty": "beginner", // "intermediate" or "advanced"
+  "lessons": [
+    // Lesson objects...
+  ]
+}
+```
+
+### Lesson Structure
 
-```js
+```json
 {
-  id: "selector-basics",
-  title: "CSS Selectors Basics",
-  description: "Learn to select and style HTML elements",
-  lessons: [
+  "id": "unique-lesson-id",
+  "title": "Lesson Title",
+  "description": "Detailed lesson description and concepts",
+  "mode": "css", // Optional override for module mode
+  "task": "Specific task instructions for the student",
+  "previewHTML": "<div>HTML for preview</div>",
+  "previewBaseCSS": "/* Base styles for preview */",
+  "sandboxCSS": "/* Additional sandbox styles */",
+  "initialCode": "/* Starting code for student */",
+  "solution": "/* Optional solution code */",
+  "previewContainer": "container-id",
+  "validations": [
     {
-      title: "Element Selectors",
-      description: "Style HTML elements using element selectors",
-      taskDescription: "Make all paragraphs red",
-      html: "<p>This is a paragraph</p><p>This is another paragraph</p>",
-      cssPrefix: "/* Write your CSS below */\n",
-      cssSuffix: "",
-      validationCriteria: {
-        type: "regex",
-        pattern: "p\\s*{\\s*color\\s*:\\s*red\\s*;?\\s*}"
+      "type": "contains", // "contains_class", "not_contains", "regex", "property_value", "syntax", "custom"
+      "value": "expected-content",
+      "message": "Feedback message for validation failure",
+      "options": {
+        "caseSensitive": false
       }
     }
-    // More lessons...
   ]
 }
 ```
 
-## 🧪 Testing
+### Validation Types
+
+- **contains**: Check if code contains specific text
+- **contains_class**: Check if HTML contains specific CSS class
+- **not_contains**: Ensure code doesn't contain specific text
+- **regex**: Validate against regular expression pattern
+- **property_value**: Validate specific CSS property values
+- **syntax**: Check for valid CSS syntax
+- **custom**: Custom validation logic
 
-The project uses Vitest for testing. Tests are located in the `tests/` directory.
+## 🧪 Testing
 
-Run tests with:
+The project uses Vitest for comprehensive testing with coverage reporting. Tests are organized in the `tests/unit/` directory.
 
+Run tests:
 ```bash
 npm run test
 ```
 
-Generate coverage report:
+Run tests in watch mode:
+```bash
+npm run test.watch
+```
 
+Generate coverage report:
 ```bash
 npm run test.coverage
 ```
 
+Coverage reports are generated in the `coverage/` directory with detailed HTML reports.
+
 ## 🚢 Deployment
 
 To build the project for production:
@@ -172,16 +210,38 @@ The output will be generated in the `dist/` directory, which can be deployed to
 
 For GitHub Pages deployment, the configuration is already set up with the base path `/code-crispies/`.
 
+Preview the production build locally:
+```bash
+npm run preview
+```
+
+## 🌐 Internationalization
+
+The project supports multilingual documentation in the `docs/` directory:
+- English documentation (`en-*.md`)
+- German documentation (`de-*.md`)
+
 ## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+Contributions are welcome! Please ensure all lessons follow the JSON schema validation.
 
 1. Fork the repository
 2. Create your feature branch (`git switch -c feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
+3. Add/modify lessons following the schema in `schemas/code-crispies-module-schema.json`
+4. Format your code: `npm run format` and `npm run format.lessons`
+5. Run tests: `npm run test`
+6. Commit your changes (`git commit -m 'Add some amazing feature'`)
+7. Push to the branch (`git push origin feature/amazing-feature`)
+8. Open a Pull Request
+
+### Adding New Lessons
+
+When adding new lessons:
+1. Create or modify JSON files in the `lessons/` directory
+2. Ensure they validate against the schema
+3. Test thoroughly with various validation scenarios
+4. Update documentation if needed
 
 ## 📄 License
 
-Copyright (c) 2023 Michael Czechowski. Licensed under the [./LICENSE](WTFPL).
+Copyright (c) 2025 Michael Czechowski. Licensed under the [./LICENSE](WTFPL).