Приложение для викторины в Next JS и Redis


Quiza

Quiza — это онлайн-платформа, с помощью которой организаторы, администраторы или даже преподаватели могут создавать и планировать тесты для своих учеников. Ученики, в свою очередь, могут войти в систему, пройти запланированные тесты и сразу же получить результаты.

Организаторы викторины могут сделать викторину закрытой, чтобы только студенты, имеющие уникальный код викторины, могли зарегистрироваться и принять участие в викторине.

Скриншоты 📸

Домашняя страница

Вход

Присоединиться к закрытой викторине с помощью кода

Прохождение викторины

Обзорное видео 🎥

Вот короткое видео, которое объясняет, как работает приложение викторины

Как это работает 🤔

Организатор или преподаватель сначала регистрируется в нашем приложении. После этого он/она может войти в систему. Организатор может создать новую викторину, запланировать время, когда викторина будет доступна ученикам, а также выбрать, будет ли викторина частной или публичной.

Публичная викторина позволяет любому студенту зарегистрироваться и принять участие в викторине.
В закрытой викторине ученик может принять участие в викторине только при наличии уникального кода викторины.

После создания викторины организатор добавляет в нее новые вопросы и варианты правильных ответов.
После отправки вопросы сохраняются в базе данных Redis.

Студент также может создать учетную запись в quiza и войти в систему. Студент может зарегистрироваться на новую викторину, а также отказаться от участия в существующей викторине.
Студент может просматривать все публичные викторины и записываться на них, а также записываться на частные викторины, используя уникальный код викторины.

После того как студент зачислен, он может приступить к прохождению теста. Студент нажимает кнопку «Старт», бэкенд подтверждает, что тест открыт, бэкенд извлекает все вопросы для теста и сохраняет их в Redis Cache. Затем пользовательский интерфейс перенаправляет студента на страницу прохождения теста.

Студент начинает отвечать на вопросы с заданным временем.
Как только студент отправляет вопросы, бэкенд создает оценку для студента.

Бэкенд также сохраняет все ответы в базе данных Redis.

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

Приложение имеет приватную таблицу лидеров для каждого теста независимо от количества попыток каждого ученика.

Как оно было создано ⚙

Quiza построена с использованием Next JS, который является фреймворком для библиотеки React JS. Next JS используется для управления фронтендом, а также серверной стороной благодаря своим удивительным возможностям рендеринга на стороне сервера.

В Next JS мы используем преимущества динамической маршрутизации для маршрутизации различных страниц во фронтенде UI, а также на стороне сервера при управлении маршрутами api.

В проекте мы использовали ряд сторонних библиотек для ускорения разработки и повышения безопасности авторизации.

При разработке пользовательского интерфейса мы использовали Chakra-UI для создания внешнего интерфейса, SWR — библиотеку для получения данных на стороне клиента. SWR использовалась в основном для получения данных из api (бэкенда), который в свою очередь получал данные из базы данных Redis.

Для аутентификации приложения использовался Next-Auth, решение для аутентификации для Next JS. Next-Auth использовался для управления сеансами входа пользователей как во фронтенде, так и в бэкенде, позволяя только аутентифицированным пользователям выполнять некоторые действия в веб-приложении.

Что касается базы данных, наше приложение использовало базу данных Redis в качестве основной базы данных для хранения информации о пользователях и тестах. Для взаимодействия с базой данных Redis мы использовали Redis-OM, библиотеку Node JS для Redis, которая позволяет хранить объекты JSON в базе данных Redis. Она также предоставляет доступ к родным командам redis-cli, таким как сохранение кэша в redis напрямую, что было довольно удобно при хранении вопросов в кэше Redis, когда студент проходит тест и отмечает правильные ответы студента.

Категория представления: MERN Mavericks

  • Используйте Redis в api (backend) для добавления кэширования и расширенных возможностей поиска с помощью модулей JSON и Search.
  • Используйте Redis в качестве основной базы данных вместо MongoDB.

Используемые языки

JavaScript (Next JS)

Ссылка на код

VinGitonga / quiza_redis

Quiza — это онлайн-платформа для проведения викторин, где вы можете создавать и практиковать викторины

Quiza

Quiza — это онлайн-платформа, с помощью которой организаторы, администраторы или даже преподаватели могут создавать и планировать контрольные работы для своих учеников. Ученики, в свою очередь, могут войти в систему и пройти запланированные тесты.

Главная страница

Присоединиться к частной викторине с помощью кода

Участие в викторине

Вот короткое видео, которое объясняет, как работает приложение для викторин

Как это работает

Организатор или преподаватель сначала регистрируется в нашем приложенииПосле этого он/она может войти в систему. Организатор может создать новую викторину и запланировать время, когда в ней смогут принять участие ученики, а также определить, является ли викторина закрытой или открытой.

В случае публичной викторины любой ученик может зарегистрироваться и принять участие в викторине, в случае частной викторины ученик может зарегистрироваться на викторину только при наличии уникального кода викторины.

После создания викторины организатор добавляет в нее новые вопросы и варианты с правильными ответами…

Посмотреть на GitHub
  • Ознакомьтесь с Redis OM, клиентскими библиотеками для работы с Redis как многомодельной базой данных.
  • Используйте RedisInsight для визуализации данных в Redis.
  • Подпишитесь на бесплатную базу данных Redis.

Оцените статью
devanswers.ru
Добавить комментарий