diff --git a/README.md b/README.md index fcef5d4..4226f02 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,32 @@  # 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": "