{"id":28240558,"url":"https://github.com/nextlevelshit/code-crispies","last_synced_at":"2025-06-12T08:31:36.388Z","repository":{"id":293126713,"uuid":"983030543","full_name":"nextlevelshit/code-crispies","owner":"nextlevelshit","description":"An interactive platform for learning CSS through practical challenges","archived":false,"fork":false,"pushed_at":"2025-06-11T00:20:57.000Z","size":1316,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-11T01:29:04.683Z","etag":null,"topics":["css","dhbw-stuttgart","didactics","html","javascript","learning","web-engineering"],"latest_commit_sha":null,"homepage":"https://nextlevelshit.github.io/code-crispies/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextlevelshit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-13T19:12:11.000Z","updated_at":"2025-06-10T21:46:09.000Z","dependencies_parsed_at":"2025-06-01T21:32:26.894Z","dependency_job_id":"6fdf2165-7c79-4c64-b128-f0f8ad02bed4","html_url":"https://github.com/nextlevelshit/code-crispies","commit_stats":null,"previous_names":["nextlevelshit/code-crispies"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nextlevelshit/code-crispies","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fcode-crispies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fcode-crispies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fcode-crispies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fcode-crispies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextlevelshit","download_url":"https://codeload.github.com/nextlevelshit/code-crispies/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextlevelshit%2Fcode-crispies/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259429786,"owners_count":22856130,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dhbw-stuttgart","didactics","html","javascript","learning","web-engineering"],"created_at":"2025-05-19T04:11:28.351Z","updated_at":"2025-06-12T08:31:36.382Z","avatar_url":"https://github.com/nextlevelshit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Code Crispies Logo](./public/android-chrome-192x192.png)\n# Code Crispies\n\nAn interactive platform for learning CSS and Tailwind CSS through practical challenges.\n\n## 📚 Overview\n\nCode 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.\n\n### Key Features\n\n- **Interactive Lessons**: Learn CSS and Tailwind concepts through practical, hands-on challenges\n- **Dual Mode Support**: Switch between CSS and Tailwind CSS learning modes\n- **Progressive Difficulty**: Modules are structured to build skills gradually from basic to advanced\n- **Real-Time Feedback**: Get immediate validation on your code solutions with comprehensive feedback\n- **Progress Tracking**: Your learning progress is automatically saved in the browser\n- **Visual Preview**: See the results of your code in real-time with live preview\n- **Comprehensive Modules**: Cover various CSS and Tailwind topics in organized learning paths\n- **Schema-Validated Lessons**: All lessons follow a strict JSON schema for consistency\n\n## 🛠️ Technical Stack\n\n- Pure JavaScript (ES Modules)\n- HTML5 \u0026 CSS3\n- Vite for bundling and development\n- Vitest for testing with coverage reporting\n- JSON Schema validation for lesson structure\n- Local Storage for progress persistence\n- whatwg-fetch polyfill for compatibility\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js (v18 or higher recommended)\n- npm (v8 or higher recommended)\n\n### Installation\n\n0. NVM (optional)\n   ```bash\n   nvm use\n   ```\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/nextlevelshit/code-crispies.git\n   cd code-crispies\n   ```\n\n2. Install dependencies:\n   ```bash\n   npm i\n   ```\n\n3. Start the development server:\n   ```bash\n   npm start\n   ```\n\n4. Open your browser and navigate to:\n   ```\n   http://localhost:1312\n   ```\n\n### Available Scripts\n\n- `npm start` - Start the development server (alias for `npm run dev`)\n- `npm run dev` - Start the development server with host binding\n- `npm run build` - Build for production\n- `npm run preview` - Preview the production build locally with debug mode\n- `npm run test` - Run tests once\n- `npm run test.watch` - Run tests in watch mode\n- `npm run test.coverage` - Run tests with coverage report\n- `npm run format` - Format source code with Prettier (includes config files)\n- `npm run format.lessons` - Format lesson JSON files with Prettier\n\n## 📖 Usage Guide\n\n### How to Use Code Crispies\n\n1. **Select a Module**: Choose a learning module from the available options\n2. **Choose Mode**: Select between CSS or Tailwind CSS learning mode (if applicable)\n3. **Read the Challenge**: Each lesson includes a description, task instructions, and learning objectives\n4. **Write Code**: Enter your CSS or Tailwind solution in the editor\n5. **Run Your Code**: Click the \"Run\" button (or press Ctrl+Enter) to test your solution\n6. **Review Feedback**: Get comprehensive feedback with validation messages\n7. **Progress**: Move to the next lesson once your solution passes all validations\n\n### Keyboard Shortcuts\n\n- `Ctrl+Enter` - Run your code\n- `Tab` - Insert appropriate indentation\n\n## 🧩 Project Structure\n\n```\ncode-crispies/\n├── coverage/          # Test coverage reports\n├── docs/              # Documentation files (multilingual)\n├── lessons/           # JSON lesson definitions\n├── public/            # Static assets and PWA manifests\n├── schemas/           # JSON Schema definitions\n│   └── code-crispies-module-schema.json\n├── src/\n│   ├── config/        # Configuration files\n│   │   └── lessons.js # Module and lesson loading logic\n│   ├── helpers/       # Helper utilities\n│   │   ├── renderer.js # UI rendering functions\n│   │   └── validator.js # Code validation logic\n│   ├── impl/\n│   │   └── LessonEngine.js # Core lesson processing logic\n│   ├── app.js         # Main application entry point\n│   ├── index.html     # Main HTML template\n│   └── main.css       # Global styles\n├── tests/             # Test files\n│   ├── setup.js       # Test configuration\n│   └── unit/          # Unit tests\n├── vite.config.js     # Vite configuration\n└── vitest.config.js   # Vitest configuration\n```\n\n## 📝 Adding New Lessons\n\nLessons are defined in JSON format following the schema in `schemas/code-crispies-module-schema.json`. Each module includes comprehensive lesson definitions with validation rules.\n\n### Module Structure\n\n```json\n{\n  \"id\": \"unique-module-id\",\n  \"title\": \"Module Title\",\n  \"description\": \"Detailed description of module content and purpose\",\n  \"mode\": \"css\", // or \"tailwind\"\n  \"difficulty\": \"beginner\", // \"intermediate\" or \"advanced\"\n  \"lessons\": [\n    // Lesson objects...\n  ]\n}\n```\n\n### Lesson Structure\n\n```json\n{\n  \"id\": \"unique-lesson-id\",\n  \"title\": \"Lesson Title\",\n  \"description\": \"Detailed lesson description and concepts\",\n  \"mode\": \"css\", // Optional override for module mode\n  \"task\": \"Specific task instructions for the student\",\n  \"previewHTML\": \"\u003cdiv\u003eHTML for preview\u003c/div\u003e\",\n  \"previewBaseCSS\": \"/* Base styles for preview */\",\n  \"sandboxCSS\": \"/* Additional sandbox styles */\",\n  \"initialCode\": \"/* Starting code for student */\",\n  \"solution\": \"/* Optional solution code */\",\n  \"previewContainer\": \"container-id\",\n  \"validations\": [\n    {\n      \"type\": \"contains\", // \"contains_class\", \"not_contains\", \"regex\", \"property_value\", \"syntax\", \"custom\"\n      \"value\": \"expected-content\",\n      \"message\": \"Feedback message for validation failure\",\n      \"options\": {\n        \"caseSensitive\": false\n      }\n    }\n  ]\n}\n```\n\n### Validation Types\n\n- **contains**: Check if code contains specific text\n- **contains_class**: Check if HTML contains specific CSS class\n- **not_contains**: Ensure code doesn't contain specific text\n- **regex**: Validate against regular expression pattern\n- **property_value**: Validate specific CSS property values\n- **syntax**: Check for valid CSS syntax\n- **custom**: Custom validation logic\n\n## 🧪 Testing\n\nThe project uses Vitest for comprehensive testing with coverage reporting. Tests are organized in the `tests/unit/` directory.\n\nRun tests:\n```bash\nnpm run test\n```\n\nRun tests in watch mode:\n```bash\nnpm run test.watch\n```\n\nGenerate coverage report:\n```bash\nnpm run test.coverage\n```\n\nCoverage reports are generated in the `coverage/` directory with detailed HTML reports.\n\n## 🚢 Deployment\n\nTo build the project for production:\n\n```bash\nnpm run build\n```\n\nThe output will be generated in the `dist/` directory, which can be deployed to any static web server.\n\nFor GitHub Pages deployment, the configuration is already set up with the base path `/code-crispies/`.\n\nPreview the production build locally:\n```bash\nnpm run preview\n```\n\n## 🌐 Internationalization\n\nThe project supports multilingual documentation in the `docs/` directory:\n- English documentation (`en-*.md`)\n- German documentation (`de-*.md`)\n\n## 🤝 Contributing\n\nContributions are welcome! Please ensure all lessons follow the JSON schema validation.\n\n1. Fork the repository\n2. Create your feature branch (`git switch -c feature/amazing-feature`)\n3. Add/modify lessons following the schema in `schemas/code-crispies-module-schema.json`\n4. Format your code: `npm run format` and `npm run format.lessons`\n5. Run tests: `npm run test`\n6. Commit your changes (`git commit -m 'Add some amazing feature'`)\n7. Push to the branch (`git push origin feature/amazing-feature`)\n8. Open a Pull Request\n\n### Adding New Lessons\n\nWhen adding new lessons:\n1. Create or modify JSON files in the `lessons/` directory\n2. Ensure they validate against the schema\n3. Test thoroughly with various validation scenarios\n4. Update documentation if needed\n\n## 📄 License\n\nCopyright (c) 2025 Michael Czechowski. Licensed under the [./LICENSE](WTFPL).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextlevelshit%2Fcode-crispies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextlevelshit%2Fcode-crispies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextlevelshit%2Fcode-crispies/lists"}