Tandem | RS Trainer — это платформа для подготовки к техническим собеседованиям и изучения программирования через интерактивную практику.
Мы стремились сделать продукт не только технически качественным, но и действительно удобным, понятным и полезным для обучения.
В приложении реализованы разные форматы тренажеров, чтобы пользователь мог тренировать не только теорию, но и практическое мышление:
- Quiz
- Code Completion
- Async Sorter
- True / False
- Code Ordering
Deploy — https://tandem-iota-puce.vercel.app/
DEMO-video — https://www.youtube.com/watch?v=cu3VCSqAd5A
Больше всего мы гордимся тем, что RS Trainer ощущается как настоящий продукт. Мы думали не о списке технологий, а о конкретном человеке, который садится готовиться к собеседованию: хочет быстро найти нужную тему, выбрать формат, сосредоточиться и не отвлекаться на неудобный интерфейс. Нам удалось совместить практическую ценность и удобство: разные типы заданий, актуальные темы, выбор сложности, drag-and-drop механики, таймеры, вставка кода.
Для нас было важно сделать приложение удобным в реальном использовании, поэтому мы реализовали: мультиязычность, светлую и тёмную темы; адаптивный интерфейс; избранное; фильтры с параметрами в URL, которыми можно делиться; кликабельную статистику с наглядной визуализацией прогресса и быстрыми переходами, а также современные skeleton-состояния загрузки.
Особого внимания заслуживает то, что RS Trainer — это полноценное решение со своей backend-частью, а не интерфейс поверх готового BaaS-решения: серверная логика, API, авторизация с refresh token flow, результаты, статистика и работа с прогрессом проектировались и реализовывались внутри команды — отдельное спасибо нашему бэкендеру Карине.
- Артем — Team Lead • 👮 Chief Unicorn Officer | Diary
- Алексей — Frontend Engineer • 🔮 Alchemist of Languages & Validation | Diary
- Глеб — Frontend Engineer • 🧙♂️ Performance Optimization Wizard | Diary
- Карина — Backend Engineer • 🐉 The Database Goddess | Diary
- Кристина — Frontend Engineer • 🧚♀️ The Fairy of UI | Diary
- Дарья — Best Mentor • 🌟 The Guiding Star
src
│
├── app — Главный компонент приложения, в котором определяется структура и Роутинг
│
├── core
│ ├── api — API-слой
│ ├── assets — Статические ресурсы: изображения, иконки и SVG-файлы
│ ├── components — Папка для всех компонентов приложения
│ ├── configs — Конфигурации и константы
│ ├── errors — Обработка ошибок
│ ├── feature — Модули тренажеров: логика и компоненты по типам заданий
│ ├── i18n — Интернационализация: переводы и настройка локализации
│ ├── mock — Моки для работы в Mock-mode
│ ├── store — Zustand хранилище для управления состоянием
│ ├── theme — Настройки UI-темы
│ ├── types — Общие Types и Interfaces в приложении
│ └── utils — Утилиты и хелперы
│
├── pages
│ ├── Dashboard — Страница с информацией о пользователе и его статистике
│ ├── Library — Страница с выбором квизов и тренажёров для подготовки
│ ├── Login — Страница для логина/регистрации пользователя
│ ├── NotFound — Страница, показываемая при ошибке 404
│ ├── Practice — Страница для практических заданий
│ └── Results — Страница с результатами прохождения тестов
│
├── setupTests.ts — Настройка тестового окружения
├── global.scss — Основные стили для всего приложения
└── main.tsx — Точка входа: инициализация и монтирование приложения| Категория | Технологии |
|---|---|
| Язык | TypeScript, React 19 |
| UI | MUI 7, Emotion, Sass (SCSS) |
| Роутинг | React Router 7 |
| HTTP Client | Axios |
| State Management | Zustand |
| Локализация | i18n |
| Визуализация | @ant-design/plots |
| Drag & Drop | @dnd-kit/react, @dnd-kit/helpers |
| Работа с кодом в UI | react-syntax-highlighter |
| Сборка | Vite 7 |
| Тесты | Vitest, Testing Library, jsdom |
| Качество кода | ESLint, Prettier, lint-staged, Husky |
# Установить зависимости:
npm install
# Запуск в режиме разработки
npm run dev