Skip to content
nightrunner91
prepra
Public

About

Интерактивная платформа для подготовки к собеседованиям по React, TypeScript и JavaScript.

nightrunner91.github.io/prepra/

Topics

educationeducational-projectlearninglearning-resourcesnextjsreactreactjstypescript

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository
BranchesTags

Repository files navigation

Prepra

Трек подготовки к техническому собеседованию: от фронтенда к Product Engineer

Prepra - платформа для подготовки к собеседованиям Frontend-разработчика

Version License Astro React Tailwind CSS

Содержание

Обзор проекта

Prepra — это структурированная образовательная платформа для самостоятельной подготовки разработчиков к техническим собеседованиям с трекером прогресса, системой самопроверки и понятным learning roadmap. Это 182 учебные статьи в 13 разделах, лично проверенные автором. Платформа развивается как трек «от фронтенда к Product Engineer»: React-first, с архитектурой, безопасностью, тестированием, производительностью и AI. Разделы по Node.js и базам данных добавляются вместе с контентом. Отдельный режим мок-интервью собирает вопросы из нескольких разделов в один сет и показывает карту слабых тем, а практикум даёт банк задач по базовому JavaScript с автопроверкой и разбором ответов.

Проект построен на связке Astro и React: контент пишется на чистом markdown и рендерится через content collections. Автор занимается текстом, а сайт сам строит роутинг, темы и интерактивные элементы.

Note

Опубликованная версия сайта доступна по адресу https://nightrunner91.github.io/prepra.

Возможности

  • Генерация статического сайта на Astro: быстрые страницы, SEO и минимум клиентского JavaScript.
  • Практикум — 160+ задач по базовому JavaScript: hoisting, замыкания, this, event loop, Map/Set, Big O, приведение типов, промисы и массивы. Фильтры, режим тренировки на 10 задач, разбор ответов и code-задачи с тестами в браузере.
  • Мок-интервью — кросс-раздельный тренажёр к техническому собеседованию: 10 пресетов (React, React Full-stack, Next.js, UI Engineer, AI и др.), настраиваемая длина и сохранение незавершённой сессии.
  • Контент в Markdown через Astro Content Collections с типизированной схемой frontmatter.
  • Интерактивный трекер прогресса на localStorage: отмечай вопросы как "знаю", "частично" или "не знаю".
  • Оверлей с вопросами для самопроверки в конце каждой статьи для active recall.
  • Индикатор прогресса чтения при скролле статьи.
  • Вопрос дня на главной странице для интервального повторения.
  • Тёмная и светлая темы на Tailwind CSS и CSS custom properties.
  • Адаптивный интерфейс с боковой панелью разделов, хлебными крошками и оглавлением.
  • Автоматические проверки качества через Lighthouse CI в каждом pull request.
  • Автоматический деплой на GitHub Pages и preview-окружения для PR.

Практикум

Отдельный раздел /practice — бесплатный банк задач по базовому JavaScript в формате «что выведет код» и code-challenge. Задачи собраны по темам, которые чаще всего спрашивают на технических интервью: hoisting и scope, замыкания, this, event loop, Map/Set, Big O, приведение типов, прототипы, промисы и массивы.

Ключевые возможности:

  • 160+ задач трёх уровней (Junior / Middle / Senior) с фильтрами по теме, сложности, типу и статусу.
  • Разбор каждого ответа — после выбора варианта показывается объяснение и ссылка на соответствующую статью.
  • Режим тренировки — случайный сет из 10 задач с приоритетом нерешённых и проваленных, прогресс по ходу сета и разбор ошибок в конце.
  • Code-задачи с автотестами — редактор прямо в браузере, тесты выполняются в изолированном Web Worker; есть подсказки и эталонное решение.
  • Сохранение прогресса — статусы и количество попыток хранятся в localStorage (prepra:practice:v1), без регистрации.
  • Deep links — выбранная задача фиксируется в URL (/practice?task=closure-counter), ссылкой можно поделиться.

Входы: кнопка «Открыть практикум» в промо-блоке на главной и пункт «Практикум» внизу боковой панели разделов.

Note

Банк задач лежит в site/src/lib/practice/data/ и не требует сборки контента: чтобы добавить задачу, достаточно дописать объект в файл темы. Валидация id и индексов правильных ответов выполняется при сборке.

Мок-интервью

Отдельный режим самопроверки на странице /interview — кросс-раздельный тренажёр к техническому собеседованию. Вопросы собираются из нескольких разделов сразу, ты отвечаешь вслух и сам оцениваешь каждый ответ («Отлично / Так себе / Плохо»), а в конце получаешь агрегированный результат: счётчики, таблицу по разделам и ссылку на самую слабую тему.

Ключевые возможности:

  • 10 готовых сетов — «Основы веб-разработки», «React-стек», «React Full-stack», «Next.js Full-stack», «Тестирование», «Производительность», «Архитектура и System Design», «AI и LLM», «UI Engineer (React)», «UI Engineer (Vue)».
  • Свой конфиг — выбор разделов, стека (React / Vue / Next.js) и длины интервью (20 / 30 / 50 вопросов).
  • Пропорциональная выборка — основной раздел получает ~70% сета, остальное добирается из смежных тем; финальный шаффл делает каждое интервью уникальным.
  • Продолжение после перезагрузки — незавершённая сессия хранится в localStorage (prepra:interview:*) и восстанавливается без повторной загрузки вопросов.
  • Без таймера и регистрации — только видимый счётчик времени хода интервью.

Входы: промо-блок на главной странице и пункт «Мок-интервью» внизу боковой панели разделов.

Note

Вопросы без ответов не попадают в выборку, но остаются в build-time индексе. Когда в статьях появятся answers, тема автоматически подключается к мок-интервью без изменений кода.

Технологический стек

Категория Технология Назначение
Фреймворк Astro 5 Статическая генерация сайта и content collections
Компоненты React 19 Интерактивные острова (квизы, прогресс, переключатель темы)
Язык TypeScript Типобезопасные компоненты и схемы контента
Стили Tailwind CSS 3 Utility-first адаптивная стилизация
Контент MDX / Markdown Статьи с frontmatter
Анимации GSAP Плавные UI-анимации
Иконки Phosphor Icons Единообразная иконография
Хостинг GitHub Pages Бесплатный статический хостинг с CDN
CI/CD GitHub Actions Сборка, деплой, preview и Lighthouse-проверки

Быстрый старт

Требования

  • Node.js 20 или новее
  • npm (устанавливается вместе с Node.js)

Установка

  1. Клонируй репозиторий:

    git clone https://github.com/nightrunner91/prepra.git
cd prepra

  2. Установи зависимости сайта:

    cd site
npm install

Запуск

Запусти dev-сервер:

npm run dev

Открой http://localhost:8305/prepra в браузере.

Note

Сайт развёртывается по базовому пути /prepra, чтобы соответствовать настройкам деплоя на GitHub Pages.

Использование

Структура проекта

prepra/
├── .github/workflows/       # CI/CD workflow-файлы
│   ├── deploy.yml           # Продакшен-деплой на GitHub Pages
│   ├── lighthouse.yml       # Lighthouse CI в pull request
│   └── pr-preview.yml       # Preview-окружения для PR
├── docs/                    # Исходные markdown-статьи (182)
│   ├── javascript/
│   ├── typescript/
│   ├── html-css/
│   ├── react/
│   ├── nextjs/
│   ├── architecture/
│   ├── api-communication/
│   ├── build-and-deployment/
│   ├── testing/
│   ├── performance/
│   ├── security/
│   ├── ai/
│   └── vue/                 # Vue и Nuxt
├── site/                    # Astro-приложение
│   ├── src/
│   │   ├── components/      # Компоненты Astro и React
│   │   │   ├── interview/   # Мок-интервью
│   │   │   └── practice/    # Практикум: список, карточка, code-раннер
│   │   ├── content/
│   │   │   └── config.ts    # Схемы content collections
│   │   ├── layouts/         # Layout-компоненты
│   │   ├── lib/             # Утилиты (URL, разделы, мок-интервью, задачи)
│   │   │   └── practice/    # Типы, темы, прогресс и банк задач
│   │   ├── pages/           # Роуты Astro (включая /practice и /interview)
│   │   └── styles/          # Глобальные стили и CSS-токены
│   ├── astro.config.mjs
│   ├── tailwind.config.js
│   └── tsconfig.json
├── LICENSE
└── README.md

Important

Контент статей хранится в /docs, а не внутри Astro-проекта. Схема content collections в site/src/content/config.ts загружает markdown-файлы из ../docs/{section}.

Добавление новой статьи

  1. Создай markdown-файл в нужном разделе /docs, например:

    docs/react/server-components.md

  2. Добавь обязательный frontmatter в начало файла:

    ---
title: "React Server Components"
section: react
description: "Как серверные компоненты уменьшают клиентский бандл и упрощают загрузку данных."
order: 12
tags: ["rsc", "nextjs", "server-components"]
questions:
  - Какую проблему решают React Server Components?
  - Чем серверные компоненты отличаются от клиентских?
  - Когда использовать директиву 'use client'?
---

  3. Запусти dev-сервер и открой /prepra/react/react-server-components/, чтобы проверить статью.

Добавление задачи в практикум

  1. Открой файл нужной темы в site/src/lib/practice/data/, например closures.ts.
  2. Добавь объект в массив: id, topic, title, difficulty, kind: "choice", prompt, code, options, answer (индекс с нуля), explanation, article.
  3. Для задачи с кодом используй kind: "code", starter, entry, tests, solution и hints. Тесты выполняются в браузерном Web Worker.
  4. Запусти npm run build — при сборке проверяются уникальность id и корректность индексов правильных ответов.

Доступные команды

Все команды выполняются из директории site/.

Команда Описание
npm run dev Запустить Astro dev-сервер на порту 8305
npm start Псевдоним для npm run dev
npm run build Собрать статический сайт в site/dist
npm run preview Локальный предпросмотр продакшен-сборки
npm run astro Запустить Astro CLI напрямую

Конфигурация

Ключевые конфигурационные файлы:

  • site/astro.config.mjs — настройки Astro: output: 'static', site, base: '/prepra', интеграции и темы Shiki.
  • site/tailwind.config.js — токены темы Tailwind, кастомные цвета, шрифты и плагин типографики.
  • site/tsconfig.json — пути TypeScript и настройки JSX.
  • site/src/content/config.ts — схема Zod и определения content collections для всех 13 разделов.
  • site/lighthouserc.js — пороговые значения Lighthouse CI и целевые URL.

Note

Для локальной разработки и продакшен-сборки не требуются переменные окружения. Прогресс сохраняется в localStorage браузера и не синхронизируется с бэкендом.

Разработка

  1. Убедись, что ты находишься в директории site/.
  2. Запусти npm run dev для локального сервера.
  3. Редактируй компоненты в site/src/components/, layout в site/src/layouts/ или статьи в /docs.
  4. Astro dev-сервер автоматически перезагружает изменения.

Tip

Перед созданием pull request запусти npm run build, чтобы заранее отловить ошибки TypeScript или схемы контента.

Деплой

Проект использует GitHub Actions для непрерывного деплоя:

Workflow Триггер Назначение
deploy.yml Push в main или ручной запуск Сборка и деплой сайта на GitHub Pages
lighthouse.yml Pull request в main Запуск Lighthouse CI и проверка порогов качества
pr-preview.yml События pull request Деплой preview-URL для каждого PR

Продакшен-сайт размещён по адресу https://nightrunner91.github.io/prepra.

Лицензия

Этот проект распространяется под лицензией GNU Affero General Public License v3.0 (AGPL-3.0).

Important

AGPL-3.0 требует, чтобы любой публично развёрнутый модифицированный вариант проекта также публиковал свой исходный код. Подробности — в файле LICENSE.

Сделано с ❤ nightrunner91

About

Интерактивная платформа для подготовки к собеседованиям по React, TypeScript и JavaScript.

nightrunner91.github.io/prepra/

Topics

educationeducational-projectlearninglearning-resourcesnextjsreactreactjstypescript

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Contributors

Languages