-это интерактивное веб-приложение для создания, прохождения и управления викторинами. Проект разработан с использованием современного стека технологий и демонстрирует навыки full-stack разработки, работы с TypeScript и управления состоянием в React. Это один из моих пет-проектов, созданный для демонстрации умения разрабатывать адаптивные и удобные приложения с надежным бэкендом.
- Создание и редактирование викторин: Пользователи могут создавать и редактировать вопросы с вариантами ответов, данные сохраняются в MongoDB.
- Прохождение викторин: Интерактивный интерфейс для ответа на вопросы с навигацией и отображением результатов.
- История прохождений: Результаты викторин сохраняются в локальном хранилище браузера, с визуализацией прогресса.
- Адаптивный дизайн: Приложение построено с использованием Bootstrap для комфортной работы на любых устройствах.
- Типобезопасный код: Полностью типизировано с помощью TypeScript на фронтенде и бэкенде, что повышает надежность и масштабируемость.
- Фронтенд: React, TypeScript, React Router, Bootstrap, React Bootstrap Icons
- Бэкенд: Node.js, Express, TypeScript, MongoDB (Mongoose)
- Инструмент сборки: Vite
- Дополнительно: ESLint, Prettier, Nodemon
Ниже представлены скриншоты приложения, демонстрирующие интерфейс на веб- и мобильных устройствах:
| Главная страница (веб) | Редактировать тест (веб) | Главная страница (мобильная) | Прохождение теста (мобильная) |
|---|---|---|---|
 |
 |
 |
 |
-
Склонируйте репозиторий:
git clone git@github.com:AnastasiyaGuryanova/quiz.git
-
Перейдите в папку проекта:
cd quiz-app -
Установите зависимости:
npm install
-
Настройте MongoDB:
- Создайте файл .env в корне проекта, используя шаблон из .env.example, и укажите строку подключения MongoDB Atlas в переменной MONGODB_URI.
- Убедитесь, что MongoDB запущен локально, или используйте MongoDB Atlas.
-
Запустите бэкенд:
npm run server
-
Запустите бэкенд:
npm run dev