diff --git a/README.md b/README.md index fcef5d4..4226f02 100644 --- a/README.md +++ b/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: - -```js +```json { - id: "selector-basics", - title: "CSS Selectors Basics", - description: "Learn to select and style HTML elements", - lessons: [ - { - title: "Element Selectors", - description: "Style HTML elements using element selectors", - taskDescription: "Make all paragraphs red", - html: "

This is a paragraph

This is another paragraph

", - cssPrefix: "/* Write your CSS below */\n", - cssSuffix: "", - validationCriteria: { - type: "regex", - pattern: "p\\s*{\\s*color\\s*:\\s*red\\s*;?\\s*}" - } - } - // More lessons... + "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 + +```json +{ + "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": "
HTML for preview
", + "previewBaseCSS": "/* Base styles for preview */", + "sandboxCSS": "/* Additional sandbox styles */", + "initialCode": "/* Starting code for student */", + "solution": "/* Optional solution code */", + "previewContainer": "container-id", + "validations": [ + { + "type": "contains", // "contains_class", "not_contains", "regex", "property_value", "syntax", "custom" + "value": "expected-content", + "message": "Feedback message for validation failure", + "options": { + "caseSensitive": false + } + } + ] +} +``` + +### 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 + ## ๐Ÿงช Testing -The project uses Vitest for testing. Tests are located in the `tests/` directory. - -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). \ No newline at end of file +Copyright (c) 2025 Michael Czechowski. Licensed under the [./LICENSE](WTFPL). \ No newline at end of file