Next.js (React)
Быстрая маршрутизация SPA и надежная архитектура одностраничного приложения.
Все проекты
EdTech / GameАвгуст 2023
SkillSphere
Современное геймифицированное веб-приложение для повышения мотивации школьников к изучению географии через визуальные новеллы.
Next.jsReactTailwind CSSFramer MotionRecharts
Урок 1: Топография
Глава 2. Чтение масштаба
150 EXP
Анна Ивановна (Учитель)
Обрати внимание на нижний правый угол карты. Какой масштаб там указан?
1:10000
1:50000
1:100000
+100%
2x
Скорость освоения темы
Интерес
+40%
Мотивация учеников
Успеваемость
+30%
К среднему баллу
100%
Отслеживаемость ошибок
Архитектура
Три ключевых модуля платформы
Проект разделен на логические блоки, каждый из которых решает свою образовательную и бизнес-задачу.
Модуль 1
Лендинг
- Входная точка для новых пользователей
- Премиальный дизайн с элементами glassmorphism
- Плавные анимации появления
- Быстрый переход к игровому процессу
Модуль 2
Визуальная новелла
- Спрайты персонажей (учитель, ученик)
- Сюжетное ветвление в зависимости от ответов
- Эффект «печатающегося текста»
- Возврат к теории при ошибках в заданиях
Модуль 3
Дашборд аналитики
- Сводка KPI: очки, средний балл, ошибки
- Интерактивный график прогресса по месяцам
- Прогресс-бары завершенности тем
- Таблица последней активности и уроков
User Flow
Путь пользователя
От первого знакомства до глубокого анализа собственных успехов.
01
Вход
Ученик заходит на платформу, читает приветствие и переходит в модуль новеллы.
02
Диалог
Изучает материалы в интерактивном формате, читая диалоги с учителем.
03
Взаимодействие
Отвечает на вопросы и работает с визуальными элементами карты.
04
Фиксация
Система записывает результаты, скорость и правильность ответов.
05
Аналитика
Пользователь изучает дашборд и выявляет темы для повторения.
Технологии
Современные инструменты разработки
Использование передового стека для создания бесшовного и красивого интерфейса.
Tailwind CSS
Гибкая верстка компонентов, премиальный дизайн с элементами glassmorphism.
Framer Motion
Микроинтеракции, плавные переходы между сценами и эффекты появления.
Recharts
Отрисовка интерактивной аналитики и графиков в модуле статистики.
Интерфейс
Галерея экранов системы
Учебный процесс и интерфейс в действии.
Интерактивный урок в формате визуальной новеллы