From 29f3c44fa7ba7bd5aecef4447e4c2b5559c97881 Mon Sep 17 00:00:00 2001 From: OreskaG Date: Fri, 8 May 2026 21:55:28 +0300 Subject: [PATCH 01/21] docs(bootcamp): add possible tasks document for RSS Bootcamp projects --- stage0.5 Bootcamp/Possible tasks.md | 121 ++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 stage0.5 Bootcamp/Possible tasks.md diff --git a/stage0.5 Bootcamp/Possible tasks.md b/stage0.5 Bootcamp/Possible tasks.md new file mode 100644 index 000000000..00a7fc19c --- /dev/null +++ b/stage0.5 Bootcamp/Possible tasks.md @@ -0,0 +1,121 @@ +# RSS Bootcamp — Таски для студентов + +--- + +## 1. Art Quiz +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/art-quiz +**Недель:** 1 +**Описание:** SPA-викторина на знание картин и их авторов — 240 вопросов двух типов, генерируемых из JSON-данных, с таймером, звуком, историей раундов и страницей результатов. +**Технологии:** `OOP / ES6 Classes` · `Webpack` · `LocalStorage` · `CSS Animations` · `Async/Await` · `SPA` + +--- + +## 2. CSS Meme Slider +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/css-meme-slider +**Недель:** 1 +**Описание:** Слайдер с мемами — анимированная смена изображений и подписей реализуется исключительно средствами CSS без единой строки JavaScript. +**Технологии:** `CSS Animations` · `CSS Grid/Flex` · `Responsive Design` · `Pure CSS (no JS)` + +--- + +## 3. Eldritch Horror (CodeJam) +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/eldritch-horror +**Недель:** 1 +**Описание:** Приложение-помощник для настольной игры «Древний Ужас» — реализует сложный алгоритм замешивания колоды мифов с учётом выбранного Древнего, уровня сложности и правил формирования этапов. +**Технологии:** `DOM manipulation` · `Алгоритмы (card shuffling)` · `gh-pages` + +--- + +## 4. JS30 +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/js30/js30.md +**Недель:** 1 +**Описание:** Студент выбирает один из 30 мини-проектов (часы, слайдер, аудиоплеер и др.), воспроизводит его по видео и расширяет обязательным и дополнительным функционалом. +**Технологии:** `DOM Events` · `Web Audio API` · `CSS Animations` · `Canvas API (опционально)` + +--- + +## 5. Minesweeper +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/minesweeper +**Недель:** 2–3 +**Описание:** Полноценный «Сапёр» с адаптивным UI — флаги, цветовая индикация, авто-открытие пустых ячеек, выбор сложности, таймер, таблица рекордов и сохранение партии. +**Технологии:** `DOM generation from JS` · `LocalStorage` · `Game logic` · `Adaptive UI` · `Canvas API (опционально)` + +--- + +## 6. Nonograms +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/nonograms +**Недель:** 2–3 +**Описание:** Браузерная реализация классической головоломки «нонограммы» с несколькими уровнями сложности, таймером, звуком, сохранением прогресса и таблицей рекордов. +**Технологии:** `DOM generation from JS` · `LocalStorage` · `Game logic` · `Adaptive UI` · `ESLint` · `Webpack (рекомендован)` + +--- + +## 7. Momentum +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/momentum/momentum.md +**Недель:** 1 +**Описание:** Аналог Chrome-расширения Momentum — показывает время, дату, приветствие, слайдер фоновых изображений, виджеты погоды и цитаты дня, а также встроенный аудиоплеер. +**Технологии:** `REST API (OpenWeatherMap)` · `Web Audio API` · `LocalStorage` · `Async/Await` · `JS Modules` + +--- + +## 8. Podcast Player +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/podcast-player +**Недель:** 1–2 +**Описание:** Веб-плеер подкастов с поиском через Podcast Index API, страницей эпизодов, аудиоплеером с прогресс-баром и плейлистом, сохраняющим позицию воспроизведения между сессиями. +**Технологии:** `TypeScript` · `REST API (Podcast Index)` · `XML parsing` · `Web Audio API` · `LocalStorage` · `SPA` + +--- + +## 9. Songbird +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird/songbird-2022q3.md +**Недель:** 1 +**Описание:** Викторина для распознавания птиц по голосам — каждый раунд воспроизводит запись птицы, игрок угадывает вид из шести вариантов, набирая очки в зависимости от числа попыток. +**Технологии:** `Web Audio API` · `DOM generation from JS` · `Webpack` · `Adaptive layout` · `JS Modules` + +--- + +## 10. Piskel Clone +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/piskel-clone.md +**Недель:** 2–3 +**Описание:** Браузерный редактор пиксельной анимации — инструменты рисования на canvas, управление кадрами через drag-and-drop, превью анимации и экспорт в GIF/APNG. +**Технологии:** `Canvas API` · `Drag & Drop` · `GIF/APNG export` · `Webpack` · `Jest (unit tests)` · `LocalStorage` · `ESLint (Airbnb)` + +--- + +## 11. Async Race +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/stage2/tasks/async-race/README.md +**Недель:** 2–3 +**Описание:** SPA для управления коллекцией автомобилей — CRUD машин, запуск/остановка двигателей через REST API, анимированные гонки на текущей странице и таблица победителей с сортировкой. +**Технологии:** `TypeScript` · `SPA` · `REST API (fetch)` · `CSS Animations` · `Webpack / Vite` · `ESLint (Unicorn)` + +--- + +## 12. Not Fight Club (CodeJam) +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/notFightClub +**Недель:** 1–2 +**Описание:** Пошаговая боевая игра — создание персонажа с аватаром, выбор зон атаки и защиты, механика критических ударов, лог боя и хранение статистики побед и поражений. +**Технологии:** `DOM generation from JS` · `LocalStorage` · `Game logic` · `Routing (опционально)` · `gh-pages` + +--- + +## 13. Shelter +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/shelter/shelter.md +**Недель:** 3 +**Описание:** Двухстраничный адаптивный сайт приюта для животных по макету Figma — три итерации: фиксированная вёрстка → адаптивность → интерактивность (бургер-меню, попап, карусель, пагинация). +**Технологии:** `Figma` · `Semantic HTML` · `Sass (CSS preprocessor)` · `Adaptive layout` · `DOM manipulation` + +--- + +## 14. Virtual Keyboard +**Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/virtual-keyboard/virtual-keyboard-ru.md +**Недель:** 2 +**Описание:** Экранная виртуальная клавиатура, реагирующая на физическую клавиатуру, с поддержкой двух раскладок (EN + другой язык), анимацией нажатий и выводом ввода в textarea. +**Технологии:** `Keyboard Events API` · `LocalStorage` · `ES6 Classes` · `ESLint (Airbnb)` · `CSS Animations` + +--- + +## 15. HTML Builder +**Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/stage1/tasks/html-builder +**Недель:** 2 +**Описание:** Консольная утилита для сборки статического сайта из HTML-компонентов и CSS-файлов — серия из пяти нарастающих по сложности задач на работу с файловой системой. +**Технологии:** `Node.js` · `fs (File System)` · `Streams` · `Path module` · `Events` From bfd5236b1a8207e8ff836d22bcbcd8016f39b6ca Mon Sep 17 00:00:00 2001 From: OreskaG Date: Fri, 8 May 2026 22:41:45 +0300 Subject: [PATCH 02/21] fix(bootcamp): add line breaks for better readability in Possible tasks document --- stage0.5 Bootcamp/Possible tasks.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/stage0.5 Bootcamp/Possible tasks.md b/stage0.5 Bootcamp/Possible tasks.md index 00a7fc19c..944be74ac 100644 --- a/stage0.5 Bootcamp/Possible tasks.md +++ b/stage0.5 Bootcamp/Possible tasks.md @@ -3,6 +3,7 @@ --- ## 1. Art Quiz + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/art-quiz **Недель:** 1 **Описание:** SPA-викторина на знание картин и их авторов — 240 вопросов двух типов, генерируемых из JSON-данных, с таймером, звуком, историей раундов и страницей результатов. @@ -11,6 +12,7 @@ --- ## 2. CSS Meme Slider + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/css-meme-slider **Недель:** 1 **Описание:** Слайдер с мемами — анимированная смена изображений и подписей реализуется исключительно средствами CSS без единой строки JavaScript. @@ -19,6 +21,7 @@ --- ## 3. Eldritch Horror (CodeJam) + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/eldritch-horror **Недель:** 1 **Описание:** Приложение-помощник для настольной игры «Древний Ужас» — реализует сложный алгоритм замешивания колоды мифов с учётом выбранного Древнего, уровня сложности и правил формирования этапов. @@ -27,6 +30,7 @@ --- ## 4. JS30 + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/js30/js30.md **Недель:** 1 **Описание:** Студент выбирает один из 30 мини-проектов (часы, слайдер, аудиоплеер и др.), воспроизводит его по видео и расширяет обязательным и дополнительным функционалом. @@ -35,6 +39,7 @@ --- ## 5. Minesweeper + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/minesweeper **Недель:** 2–3 **Описание:** Полноценный «Сапёр» с адаптивным UI — флаги, цветовая индикация, авто-открытие пустых ячеек, выбор сложности, таймер, таблица рекордов и сохранение партии. @@ -43,6 +48,7 @@ --- ## 6. Nonograms + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/nonograms **Недель:** 2–3 **Описание:** Браузерная реализация классической головоломки «нонограммы» с несколькими уровнями сложности, таймером, звуком, сохранением прогресса и таблицей рекордов. @@ -51,6 +57,7 @@ --- ## 7. Momentum + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/momentum/momentum.md **Недель:** 1 **Описание:** Аналог Chrome-расширения Momentum — показывает время, дату, приветствие, слайдер фоновых изображений, виджеты погоды и цитаты дня, а также встроенный аудиоплеер. @@ -59,6 +66,7 @@ --- ## 8. Podcast Player + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/podcast-player **Недель:** 1–2 **Описание:** Веб-плеер подкастов с поиском через Podcast Index API, страницей эпизодов, аудиоплеером с прогресс-баром и плейлистом, сохраняющим позицию воспроизведения между сессиями. @@ -67,6 +75,7 @@ --- ## 9. Songbird + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/songbird/songbird-2022q3.md **Недель:** 1 **Описание:** Викторина для распознавания птиц по голосам — каждый раунд воспроизводит запись птицы, игрок угадывает вид из шести вариантов, набирая очки в зависимости от числа попыток. @@ -75,6 +84,7 @@ --- ## 10. Piskel Clone + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/piskel-clone.md **Недель:** 2–3 **Описание:** Браузерный редактор пиксельной анимации — инструменты рисования на canvas, управление кадрами через drag-and-drop, превью анимации и экспорт в GIF/APNG. @@ -83,6 +93,7 @@ --- ## 11. Async Race + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/stage2/tasks/async-race/README.md **Недель:** 2–3 **Описание:** SPA для управления коллекцией автомобилей — CRUD машин, запуск/остановка двигателей через REST API, анимированные гонки на текущей странице и таблица победителей с сортировкой. @@ -91,6 +102,7 @@ --- ## 12. Not Fight Club (CodeJam) + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/tasks/notFightClub **Недель:** 1–2 **Описание:** Пошаговая боевая игра — создание персонажа с аватаром, выбор зон атаки и защиты, механика критических ударов, лог боя и хранение статистики побед и поражений. @@ -99,6 +111,7 @@ --- ## 13. Shelter + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/shelter/shelter.md **Недель:** 3 **Описание:** Двухстраничный адаптивный сайт приюта для животных по макету Figma — три итерации: фиксированная вёрстка → адаптивность → интерактивность (бургер-меню, попап, карусель, пагинация). @@ -107,6 +120,7 @@ --- ## 14. Virtual Keyboard + **Ссылка:** https://github.com/rolling-scopes-school/tasks/blob/master/tasks/virtual-keyboard/virtual-keyboard-ru.md **Недель:** 2 **Описание:** Экранная виртуальная клавиатура, реагирующая на физическую клавиатуру, с поддержкой двух раскладок (EN + другой язык), анимацией нажатий и выводом ввода в textarea. @@ -115,6 +129,7 @@ --- ## 15. HTML Builder + **Ссылка:** https://github.com/rolling-scopes-school/tasks/tree/master/stage1/tasks/html-builder **Недель:** 2 **Описание:** Консольная утилита для сборки статического сайта из HTML-компонентов и CSS-файлов — серия из пяти нарастающих по сложности задач на работу с файловой системой. From 682f9a543b7e204f53b49fc28b1c6469c5c11f39 Mon Sep 17 00:00:00 2001 From: OreskaG Date: Fri, 22 May 2026 17:44:32 +0300 Subject: [PATCH 03/21] feat(bootcamp): copy tasks --- .../stage0.5-tasks.instructions.md | 162 ++++++++++++++++++ stage0.5 Bootcamp/tasks/async-race/README.md | 109 ++++++++++++ .../async-race/functional-requirements.md | 50 ++++++ .../async-race/non-functional-requirements.md | 75 ++++++++ .../tasks/css-meme-slider/README.md | 148 ++++++++++++++++ .../assets/controlsEffects.gif | Bin 0 -> 204045 bytes .../css-meme-slider/assets/fullScreen.gif | Bin 0 -> 1758670 bytes .../css-meme-slider/assets/fullScreenGrid.png | Bin 0 -> 421901 bytes .../css-meme-slider/assets/mobileGrid.png | Bin 0 -> 94386 bytes .../css-meme-slider/assets/mobileView.gif | Bin 0 -> 406242 bytes .../tasks/html-builder/README.md | 24 +++ .../tasks/js30/images/js30-1.jpg | Bin 0 -> 487235 bytes .../tasks/js30/images/js30-2.jpg | Bin 0 -> 281312 bytes .../tasks/js30/images/js30-3.jpg | Bin 0 -> 161095 bytes .../tasks/js30/images/js30-4.jpg | Bin 0 -> 352297 bytes .../tasks/js30/images/js30-5.jpg | Bin 0 -> 151192 bytes .../tasks/js30/images/js30-6.jpg | Bin 0 -> 78973 bytes stage0.5 Bootcamp/tasks/js30/js30-1.md | 40 +++++ stage0.5 Bootcamp/tasks/js30/js30-2.md | 46 +++++ stage0.5 Bootcamp/tasks/js30/js30-3.md | 34 ++++ stage0.5 Bootcamp/tasks/js30/js30-4.md | 41 +++++ stage0.5 Bootcamp/tasks/js30/js30-5.md | 38 ++++ stage0.5 Bootcamp/tasks/js30/js30-6.md | 30 ++++ stage0.5 Bootcamp/tasks/js30/js30.md | 110 ++++++++++++ .../tasks/notFightClub/README.md | 134 +++++++++++++++ .../tasks/podcast-player/README.md | 135 +++++++++++++++ .../assets/details/apple_details.png | Bin 0 -> 1280442 bytes .../assets/details/spotify_details.png | Bin 0 -> 2239427 bytes .../assets/landing/apple_landing.png | Bin 0 -> 5171402 bytes .../assets/landing/spotify_landing.png | Bin 0 -> 3089158 bytes stage0.5 Bootcamp/tasks/shelter/pets.json | 90 ++++++++++ .../shelter/shelter-folder-structure.jpg | Bin 0 -> 19136 bytes .../tasks/shelter/shelter-part1.md | 152 ++++++++++++++++ .../tasks/shelter/shelter-part2.md | 131 ++++++++++++++ .../tasks/shelter/shelter-part3.md | 119 +++++++++++++ stage0.5 Bootcamp/tasks/shelter/shelter.md | 148 ++++++++++++++++ 36 files changed, 1816 insertions(+) create mode 100644 .github/instructions/stage0.5-tasks.instructions.md create mode 100644 stage0.5 Bootcamp/tasks/async-race/README.md create mode 100644 stage0.5 Bootcamp/tasks/async-race/functional-requirements.md create mode 100644 stage0.5 Bootcamp/tasks/async-race/non-functional-requirements.md create mode 100644 stage0.5 Bootcamp/tasks/css-meme-slider/README.md create mode 100644 stage0.5 Bootcamp/tasks/css-meme-slider/assets/controlsEffects.gif create mode 100644 stage0.5 Bootcamp/tasks/css-meme-slider/assets/fullScreen.gif create mode 100644 stage0.5 Bootcamp/tasks/css-meme-slider/assets/fullScreenGrid.png create mode 100644 stage0.5 Bootcamp/tasks/css-meme-slider/assets/mobileGrid.png create mode 100644 stage0.5 Bootcamp/tasks/css-meme-slider/assets/mobileView.gif create mode 100644 stage0.5 Bootcamp/tasks/html-builder/README.md create mode 100644 stage0.5 Bootcamp/tasks/js30/images/js30-1.jpg create mode 100644 stage0.5 Bootcamp/tasks/js30/images/js30-2.jpg create mode 100644 stage0.5 Bootcamp/tasks/js30/images/js30-3.jpg create mode 100644 stage0.5 Bootcamp/tasks/js30/images/js30-4.jpg create mode 100644 stage0.5 Bootcamp/tasks/js30/images/js30-5.jpg create mode 100644 stage0.5 Bootcamp/tasks/js30/images/js30-6.jpg create mode 100644 stage0.5 Bootcamp/tasks/js30/js30-1.md create mode 100644 stage0.5 Bootcamp/tasks/js30/js30-2.md create mode 100644 stage0.5 Bootcamp/tasks/js30/js30-3.md create mode 100644 stage0.5 Bootcamp/tasks/js30/js30-4.md create mode 100644 stage0.5 Bootcamp/tasks/js30/js30-5.md create mode 100644 stage0.5 Bootcamp/tasks/js30/js30-6.md create mode 100644 stage0.5 Bootcamp/tasks/js30/js30.md create mode 100644 stage0.5 Bootcamp/tasks/notFightClub/README.md create mode 100644 stage0.5 Bootcamp/tasks/podcast-player/README.md create mode 100644 stage0.5 Bootcamp/tasks/podcast-player/assets/details/apple_details.png create mode 100644 stage0.5 Bootcamp/tasks/podcast-player/assets/details/spotify_details.png create mode 100644 stage0.5 Bootcamp/tasks/podcast-player/assets/landing/apple_landing.png create mode 100644 stage0.5 Bootcamp/tasks/podcast-player/assets/landing/spotify_landing.png create mode 100644 stage0.5 Bootcamp/tasks/shelter/pets.json create mode 100644 stage0.5 Bootcamp/tasks/shelter/shelter-folder-structure.jpg create mode 100644 stage0.5 Bootcamp/tasks/shelter/shelter-part1.md create mode 100644 stage0.5 Bootcamp/tasks/shelter/shelter-part2.md create mode 100644 stage0.5 Bootcamp/tasks/shelter/shelter-part3.md create mode 100644 stage0.5 Bootcamp/tasks/shelter/shelter.md diff --git a/.github/instructions/stage0.5-tasks.instructions.md b/.github/instructions/stage0.5-tasks.instructions.md new file mode 100644 index 000000000..3e9af7d97 --- /dev/null +++ b/.github/instructions/stage0.5-tasks.instructions.md @@ -0,0 +1,162 @@ +--- +description: "Use when editing, reviewing, or adapting any task in stage0.5 Bootcamp. Contains requirements for task structure, formatting, tone, scoring, and cross-check criteria." +applyTo: "stage0.5 Bootcamp/**" +--- + +# Stage 0.5 Bootcamp — Task Authoring Guidelines + +These rules apply to every task file inside `stage0.5 Bootcamp/tasks/`. When adapting a task from another stage, always bring it in line with all sections below before considering it done. + +--- + +## 1. Language + +- **All task files must be written in English.** +- If the original task is in Russian or mixed language, translate everything — headings, descriptions, criteria, notes, and comments. +- Keep technical terms as-is (e.g. `flexbox`, `async/await`, `cross-check`). + +--- + +## 2. Required File Structure + +Every task `README.md` must contain the following sections **in this order**: + +``` +1. Title (H1) +2. Skills (tags block) +3. Task Description +4. Requirements +5. Scoring Criteria +6. Learning Resources +``` + +### 2.1 Title + +Plain H1 with the task name. No subtitles on the same line. + +```markdown +# CSS Meme Slider +``` + +### 2.2 Skills + +A block directly under the title listing the key skills/topics needed to complete the task. +Use inline code tags for each skill. + +```markdown +## Skills + +`CSS animations` `@keyframes` `transitions` `transform` `z-index` +``` + +### 2.3 Task Description + +Free-form description of what the student needs to build. Clear, concise, in English. + +### 2.4 Requirements + +Functional requirements listed as checkboxes or bullet points. +Group into sub-sections if needed (e.g. _Basic_, _Advanced_). + +### 2.5 Scoring Criteria + +See Section 3 below. + +### 2.6 Learning Resources + +A `## Learning Resources` section at the **very end** of the file. +List links to documentation, articles, or videos that cover the skills needed. +Each link must be a working URL — verify before saving. + +```markdown +## Learning Resources + +- [CSS Animations — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations) +- [CSS Transforms — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) +``` + +--- + +## 3. Scoring Criteria + +- Every task must have a `## Scoring Criteria` section. +- Each criterion must be a bullet point with an explicit point value in **bold** at the end, e.g. `**+10**`. +- Group criteria into logical blocks if there are more than 5 items. +- State the **maximum total score** at the top of the section. +- Include penalty rules if applicable (e.g. broken layout, console errors). + +```markdown +## Scoring Criteria + +**Maximum score: 100 points** + +### Basic Requirements + +- Slider is visible and functional **+20** +- At least 5 slides present **+10** + +### Animations + +- Slide transition uses CSS animation (no JS) **+20** +- Transition duration is between 0.3s and 1s **+10** + +### Penalties + +- JavaScript used for slide switching **-20** +- Console errors **-10** +``` + +--- + +## 4. Links + +- **All links must be verified and working** before the task is considered done. +- Remove or replace any broken, outdated, or stage-specific links (e.g. links pointing to `stage1/`, `stage2/` folders in other repos). +- Prefer MDN, official docs, or well-known resources (css-tricks, javascript.info, web.dev). +- Internal links must use relative paths where possible. + +--- + +## 5. Things to Remove / Replace When Adapting + +When copying a task from another stage, always strip or rewrite the following: + +- Any mention of mentors, mentor review, or mentor scoring +- Deadline / submission date sections +- Links to other stages' Discord channels or streams +- References to `stage0`, `stage1`, `stage2` grading systems +- Russian language text (translate to English) +- Links that point to the old raw GitHub task files (replace with local relative links or verified external URLs) + +--- + +## 6. Examples + +### Skills block — correct + +```markdown +## Skills + +`CSS Grid` `media queries` `BEM` `responsive design` +``` + +### Scoring criterion — correct + +```markdown +- Mobile layout matches the design at 768px breakpoint **+15** +``` + +### Scoring criterion — incorrect (no point value, vague) + +```markdown +- The layout looks good on mobile +``` + +### Learning Resources — correct + +```markdown +## Learning Resources + +- [CSS Grid — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) +- [A Complete Guide to Grid — CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) +``` diff --git a/stage0.5 Bootcamp/tasks/async-race/README.md b/stage0.5 Bootcamp/tasks/async-race/README.md new file mode 100644 index 000000000..4265ddd9d --- /dev/null +++ b/stage0.5 Bootcamp/tasks/async-race/README.md @@ -0,0 +1,109 @@ +# Task "Async Race" + +Your customer has an idea to spend his money. He has hired some engineers who installed radio-controlled equipment :radio: in real cars :car:, to be precise, all of his collection of cars. He is eager to create a kind of drag-racing competition in order to discover which car is the fastest. + +Each radio controller has an HTTP-compatible interface. It lets you start or stop the engine of the car and, of course, enable "driving" mode. + +Your task is to create a [SPA](https://en.wikipedia.org/wiki/Single-page_application) to manage the collection of cars, operate their engines, and show race statistics. + +Previously, development of this application had been started by a Belarusian developer named Dzmitry (and was almost finished). However, his laptop :computer: was stolen by bad guys. Unfortunately, we don't have any sources of UI :disappointed:. Fortunately, he had recorded some [demo](https://youtu.be/sTXtlBLh-Ts) beforehand. Additionally, he had stored the server mock in his [repo](https://github.com/mikhama/async-race-api). + +We found in the latest news that a new company called "The Fast and the Furious" announced the release of a new product that will really blow people's minds. There isn't a lot of information about this product. All we know is that it's about "easier car management than you can imagine." It's exactly what our thieves :supervillain: are up to. They're going to release their product in two weeks. But we can't allow them to do that. We must be first. + +What are you waiting for? Let's start coding! + +## 🎯 Objectives + +- **Create a Single Page Application (SPA)**: Manage a collection of cars, operate their engines, and showcase race statistics in an engaging, interactive SPA. +- **Revive the Project**: Drawing inspiration from a demo video and a server mock, reconstruct the UI and breathe life back into this ambitious project. +- **Outpace the Competition**: Implement the project with speed and efficiency, ensuring we launch before our rivals, showcasing our innovative solution to car management and racing competitions. + +## 🚗 Functional Requirements + +### Basic Structure + +- Two main views: "Garage" and "Winners", each with their name, page number, and a count of items in the database. +- Persistent view state between switches, maintaining user input and pagination. + +### Garage View + +- CRUD operations for cars with "name" and "color" attributes. +- Color selection from an RGB palette with a preview of the car in the chosen color. +- Pagination to display cars (7 per page) and a feature to generate 100 random cars at once. + +### Car Animation + +- Start/stop engine buttons with corresponding animations and handling of engine states. +- Adaptive animations that work on screens as small as 500px. + +### Race Animation + +- A button to start a race for all cars on the current page. +- A reset button to return all cars to their starting positions. +- Display the winner's name upon race completion. + +### Winners View + +- Display winning cars with their image, name, number of wins, and best time. +- Pagination and sorting capabilities by wins and best times. + +## 📜 Non-functional Requirements + +- **No Libraries/Frameworks**: The use of libraries or frameworks such as JQuery, React, Angular, Lodash, Material Design, etc., is strictly prohibited. + - Bootstrap CSS is permitted for **styling purposes** only. + - CSS modules, CSS Preprocessors (`Sass`, `Less`, `Stylus`, `PostCSS`, etc.), CSS in JS libraries (`tailwindcss`, `jss`, `emotion/css`, etc.), `clsx/classnames` package are allowed. + +- **TypeScript Mandatory**: The application must be developed using TypeScript. All method input and output parameters must be typed accurately, and the use of explicit or implicit "any" type, type assertions (`foo as BarType`) and non-nullability assertions (`y!`) is not allowed. +- **Modular Architecture**: Clear separation of concerns between API interaction, UI rendering, and state management. +- **SPA Implementation**: Entire content generated via TypeScript, utilizing Vite/Webpack or similar for bundling. +- **Code Quality**: Adhere to the [Unicorn](https://www.npmjs.com/package/eslint-plugin-unicorn) ESLint configuration, with functions limited to 40 lines and avoidance of magic numbers/strings. + +## 🛠️ Technical Implementation + +- Implement CRUD operations for cars using the provided server mock. +- Design UI elements for car management and race controls. +- Utilize fetch for server communication, and handle promises for asynchronous tasks. +- Create animations for car movements using JavaScript and CSS. +- Ensure responsiveness and compatibility across different devices and browsers. + +## 📚 Resources + +- [Server Mock Repo](https://github.com/mikhama/async-race-api) +- [Demo Video](https://youtu.be/sTXtlBLh-Ts) +- [Color Palette Tool](https://www.colorspire.com/rgb-color-wheel/) +- [SPA Wikipedia](https://en.wikipedia.org/wiki/Single-page_application) + +## 🔄 Evaluation + +- Your work will be evaluated based on functional and non-functional requirements. +- The UI must be deployed for review, with a server instance running for functionality tests. +- Pay close attention to details in the implementation, as bugs and deviations from the requirements can impact your score. + +## Requirements to commits, PR and repo + +[Stage 2 requirements](https://rs.school/docs/en/pull-request-review-process) +NB: for mentor's check - submit link to PR, for cross-check - submit link to deploy. + +## Cross-check + +- Max score: **215**. +- UI should be deployed to gh-pages, netlify or some similar service and the link shared via RS App. +- Reviewer should clone [repo with a server](https://github.com/mikhama/async-race-api.git) and keep the server running during functionality review. +- Task should be scored in accordance with [Functional requirements](./functional-requirements.md). You can find score points near each requirement. +- If some bugs were found then the next fees should be withdrawn: + - (**-30**) Major bug (implemented functionality works, but after some manipulations it breaks down, and there are some unexpected errors in the browsers' console). + - (**-10**) Minor bug (implemented functionality works, but after some manipulations it behavior changes, like button does not become enabled after changing some state, but there are not any errors in the browser's console). +- **Note:** When you push the "start engine button" and then the "stop engine button" or the "start race button" and "reset race button" and repeating this operation again and again as a mad man sometimes you can see an error with the status codes "404" or "429". Officially it is not a bug. + +## Mentor's review + +- Max score: **190**. +- Task should be scored in accordance with [Non-functional requirements](./non-functional-requirements.md). You can find score points near each requirement. + +## FAQ + +You can find answers and questions in this document: + + +Link to Q&A live-stream recording: + diff --git a/stage0.5 Bootcamp/tasks/async-race/functional-requirements.md b/stage0.5 Bootcamp/tasks/async-race/functional-requirements.md new file mode 100644 index 000000000..741eeaab5 --- /dev/null +++ b/stage0.5 Bootcamp/tasks/async-race/functional-requirements.md @@ -0,0 +1,50 @@ +# Evaluation Criteria for "Async Race" + +This document outlines the detailed criteria for the evaluation of the "Async Race" Single Page Application (SPA) development task. Your challenge is to create an engaging SPA that allows users to manage a collection of cars, operate their engines, and view race statistics. + +## Total Points: 215 + +## 🏁 Basic Structure (85 points) + +### 1. View Configuration (30 points) + +- **Two Views (10 points):** Implement two primary views: "Garage" and "Winners". +- **Garage View Content (5 points):** The "Garage" view must display its name, the current page number, and the total number of cars in the database (how many car user has in his garage). +- **Winners View Content (5 points):** The "Winners" view should similarly display its name, the current page number, and the total count of records in the database (how many records the winners table contains). +- **Persistent State (10 points):** Ensure the view state remains consistent when navigating between views. This includes preserving page numbers and input states. For example, page number shouldn't be reset, input controls should contain that they contained before switching, etc. + +### 2. Garage View Functionality (55 points) + +#### Car Management (45 points) + +- **CRUD Operations (20 points):** Enable users to create, update, and delete cars, and display the list of cars. A car has two attributes: "name" and "color". For "delete"-operation car should be deleted from "garage" table as well as from "winners". +- **Color Selection (10 points):** Allow color selection from an RGB palette ([like here](https://colorspire.com/rgb-color-wheel/)), displaying the selected color on the car's image along with its name. +- **Management Buttons (5 points):** Provide buttons near each car's image for updating its attributes or deleting it. +- **Pagination (10 points):** Implement pagination for the "Garage" view, displaying 7 cars per page. + +#### Car Generation (10 points) + +- **Random Car Creation (10 points):** There should be a button to create random cars (100 cars per click). Name should be assembled from two random parts, for example "Tesla" + "Model S", or "Ford" + "Mustang" (At least 10 different names for each part). Color should be also generated randomly. + +## 🚗 Car Animation (50 points) + +- **Engine Control Buttons (10 points):** Place start/stop engine buttons near each car's image. +- **Start Engine Animation (20 points):** User clicks to the engine start button -> UI is waiting for car's velocity answer -> animate the car and makes another request to drive. In case api returned 500 error car animation should be stopped. +- **Stop Engine Animation (10 points):** User clicks to the engine stop button -> UI is waiting for answer for stopping engine -> car returned to it's initial place. +- **Button States (5 points):** Start engine button should be disabled in case car is already in driving mode. As well as stop engine button should be disabled when car is on it's initial place. +- **Responsive Animation (5 points):** Ensure car animations are fluid and responsive on screens as small as 500px. + +## 🏎️ Race Animation (35 points) + +- **Start Race Button (15 points):** Implement a button to start the race for all cars on the current page. +- **Reset Race Button (10 points):** Create a button to reset the race, returning all cars to their starting positions. +- **Winner Announcement (10 points):** After some car finishes first user should see the message contains car's name that shows which one has won. + +## 🏆 Winners View (45 points) + +- **Display Winners (15 points):** After some car wins it should be displayed at the "Winners view" table. +- **Pagination for Winners (10 points):** Implement pagination for the "Winners" view, with 10 winners per page. +- **Winners Table (10 points):** The table should include columns for the car's №, image, name, number of wins, and best time in seconds. If the same car wins more than once the number of wins should be incremented while best time should be saved only if it's better than the stored one. +- **Sorting Functionality (10 points):** Allow users to sort the table by the number of wins and best time, in ascending or descending order. + +These criteria are designed to assess your application's functionality, user interface, and interaction with a server mock. Good luck with your development! diff --git a/stage0.5 Bootcamp/tasks/async-race/non-functional-requirements.md b/stage0.5 Bootcamp/tasks/async-race/non-functional-requirements.md new file mode 100644 index 000000000..958187dcd --- /dev/null +++ b/stage0.5 Bootcamp/tasks/async-race/non-functional-requirements.md @@ -0,0 +1,75 @@ +# Mentor Evaluation Criteria for "Async Race" SPA Development + +Mentors will evaluate the "Async Race" Single Page Application (SPA) based on the following non-functional requirements. These criteria focus on the application architecture, coding standards, and best practices. The total potential deduction for not meeting these requirements is **-200%**, indicating the critical importance of adherence to these standards. + +## Total Points: 190 + +## 🏗️ Application Architecture (40 points) + +- **Modular Design (40 points):** The application should be clearly divided into logical modules or layers, such as API interaction, UI rendering, and state management. Consultation with a mentor on the architecture before implementation is advised. + +## 📜 Dynamic Content Generation (30 points) + +- **JavaScript-Generated HTML Content (30 points):** All HTML content must be dynamically generated using JavaScript, with the `` tag containing only a single `