Интерактивная платформа для подготовки к фронтенд-собеседованию
- Обзор проекта
- Возможности
- Мок-интервью
- Технологический стек
- Быстрый старт
- Использование
- Конфигурация
- Разработка
- Деплой
- Лицензия
Prepra — это структурированная образовательная платформа для самостоятельной подготовки frontend-разработчиков к техническим собеседованиям с трекером прогресса, системой самопроверки и понятным learning roadmap. Это более 170 учебных статей в 15 разделах, лично проверенных автором. Платформа охватывает всю современную frontend-разработку — от основ JavaScript до AI/LLM. Отдельный режим мок-интервью собирает вопросы из нескольких разделов в один сет и показывает карту слабых тем.
Проект построен на связке Astro и React: контент пишется на чистом markdown и рендерится через content collections. Автор занимается текстом, а сайт сам строит роутинг, темы и интерактивные элементы.
Note
Опубликованная версия сайта доступна по адресу https://nightrunner91.github.io/prepra.
- Генерация статического сайта на Astro: быстрые страницы, SEO и минимум клиентского JavaScript.
- Мок-интервью — кросс-раздельный тренажёр к техническому собеседованию: 9 пресетов (React, Vue, Next.js, Nuxt, AI и др.), настраиваемая длина и сохранение незавершённой сессии.
- Контент в Markdown через Astro Content Collections с типизированной схемой frontmatter.
- Интерактивный трекер прогресса на
localStorage: отмечай вопросы как "знаю", "частично" или "не знаю". - Оверлей с вопросами для самопроверки в конце каждой статьи для active recall.
- Индикатор прогресса чтения при скролле статьи.
- Вопрос дня на главной странице для интервального повторения.
- Тёмная и светлая темы на Tailwind CSS и CSS custom properties.
- Адаптивный интерфейс с боковой панелью разделов, хлебными крошками и оглавлением.
- Автоматические проверки качества через Lighthouse CI в каждом pull request.
- Автоматический деплой на GitHub Pages и preview-окружения для PR.
Отдельный режим самопроверки на странице /interview — кросс-раздельный тренажёр к техническому собеседованию. Вопросы собираются из нескольких разделов сразу, ты отвечаешь вслух и сам оцениваешь каждый ответ («Отлично / Так себе / Плохо»), а в конце получаешь агрегированный результат: счётчики, таблицу по разделам и ссылку на самую слабую тему.
Ключевые возможности:
- 9 готовых сетов — «Основы веб-разработки», «React-стек», «Vue-стек», «Next.js Full-stack», «Nuxt Full-stack», «Тестирование», «Производительность», «Проектирование», «AI и LLM».
- Свой конфиг — выбор разделов, стека (React / Vue / Next.js / Nuxt) и длины интервью (20 / 30 / 50 вопросов).
- Пропорциональная выборка — основной раздел получает ~70% сета, остальное добирается из смежных тем; финальный шаффл делает каждое интервью уникальным.
- Продолжение после перезагрузки — незавершённая сессия хранится в
localStorage(prepra:interview:*) и восстанавливается без повторной загрузки вопросов. - Без таймера и регистрации — только видимый счётчик времени хода интервью.
Входы: кнопка «Пройти мок-интервью» в Hero на главной, промо-блок на главной странице и пункт «Мок-интервью» вверху боковой панели разделов.
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-проверки |
-
Клонируй репозиторий:
git clone https://github.com/nightrunner91/prepra.git cd prepra -
Установи зависимости сайта:
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-статьи (177+)
│ ├── javascript/
│ ├── typescript/
│ ├── react/
│ ├── vue/
│ ├── nextjs/
│ ├── nuxt/
│ ├── testing/
│ ├── performance/
│ ├── architecture/
│ ├── state-management/
│ ├── api-communication/
│ ├── build-and-deployment/
│ ├── security/
│ └── ai/
├── site/ # Astro-приложение
│ ├── src/
│ │ ├── components/ # Компоненты Astro и React
│ │ ├── content/
│ │ │ └── config.ts # Схемы content collections
│ │ ├── layouts/ # Layout-компоненты
│ │ ├── lib/ # Утилиты (URL, разделы, парсер readme, мок-интервью)
│ │ ├── pages/ # Роуты Astro (включая /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}.
-
Создай markdown-файл в нужном разделе
/docs, например:docs/react/server-components.md -
Добавь обязательный frontmatter в начало файла:
--- title: "React Server Components" section: react description: "Как серверные компоненты уменьшают клиентский бандл и упрощают загрузку данных." order: 12 tags: ["rsc", "nextjs", "server-components"] questions: - Какую проблему решают React Server Components? - Чем серверные компоненты отличаются от клиентских? - Когда использовать директиву 'use client'? ---
-
Запусти dev-сервер и открой
/prepra/react/react-server-components/, чтобы проверить статью.
Все команды выполняются из директории 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 для всех 15 разделов.site/lighthouserc.js— пороговые значения Lighthouse CI и целевые URL.
Note
Для локальной разработки и продакшен-сборки не требуются переменные окружения. Прогресс сохраняется в localStorage браузера и не синхронизируется с бэкендом.
- Убедись, что ты находишься в директории
site/. - Запусти
npm run devдля локального сервера. - Редактируй компоненты в
site/src/components/, layout вsite/src/layouts/или статьи в/docs. - 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