Гайд

О проекте

Личный курс английского. Один пользователь, ноль аккаунтов, всё в браузере. Сделан как pet-проект — отрабатывал дизайн-систему, App Router и интеграцию с разными LLM через один OpenAI-совместимый клиент.

Открыть курс →Попробовать чат с AI

Принципы

Минимум кода

Меньше кода — меньше того, что может сломаться. Никаких ORM, библиотек состояния, формовых хелперов. React + Tailwind + localStorage.

Без бэкенда

Всё хранится в браузере пользователя. Деплой одной кнопкой на Vercel, нет серверного состояния и платежей за БД.

Один пользователь

Это не SaaS, это личный курс. Никаких аккаунтов, регистраций, общего доступа. Свобода интерфейса без UX-компромиссов под массового пользователя.

Дизайн-система

Шесть переиспользуемых компонентов (Card, Button, StatCard, ProgressBar, SpeakButton, Heatmap) и одна палитра. Цвета, отступы, скругления — единые везде.

Что внутри

AI-репетитор (Hermes)

Чат с языковой моделью через OpenAI-совместимый API. Можно подключить Mistral, OpenRouter, Ollama локально — всё одной формой настроек. Системный промпт настроен на роль терпеливого репетитора уровня A2–B1.

app/practice/page.tsx, lib/chat.ts

Карточки с интервальным повторением

Простая SRS-логика без таймштампов: что отметил «знаю» — уходит в конец очереди. Перезагрузка страницы сохраняет приоритет. Озвучка через Web Speech API.

app/cards/page.tsx, components/SpeakButton.tsx

Чтение с popover-переводом

Текст разбивается регуляркой на токены. Клик по слову — поповер появляется рядом со словом (а не внизу), Esc и клик-вне закрывают. Незнакомое слово сохраняется в общий словарь одним нажатием.

app/reading/page.tsx

Тренажёр написания

Показывается русский перевод — набираешь английский. Enter проверяет и переходит дальше. Прогресс пишется в общий heatmap.

app/typing/page.tsx

Грамматика по темам

660 упражнений по 100+ грамматическим темам, включая C1: инверсия, mixed conditionals, mandative subjunctive, cleft sentences, formal expressions, фразовые глаголы (60+), словообразование, идиомы, коллокации, hedging language, деловой английский. Фильтруется по уровню пользователя. На входе — экран выбора темы. Правильный ответ подсвечивается зелёным, неверный — розовым, объяснение в выделенном блоке.

app/grammar/page.tsx, data/default-exercises.json

Словарь с фильтрами

1400+ слов по 80+ темам, с уровнями A1–C1. Фильтры по статусам, поиск по строке, форма добавления своих слов. Статус подсвечивается светящейся точкой.

app/dictionary/page.tsx

Прогресс с heatmap

Тепловая карта 35 дней (как GitHub contributions), распределение словаря стек-баром, серия активных дней. Считается из обычного массива записей `DailyProgress` в localStorage.

app/progress/page.tsx, components/Heatmap.tsx

Стек

Next.js 16

App Router, Turbopack, Server + Client Components.

TypeScript

Строгие типы, никаких any. Типы доменной модели в lib/types.ts.

Tailwind v4

@theme inline для шрифтов next/font, без tailwind.config.* — настройка прямо в CSS.

next/font

Inter (UI) и JetBrains Mono (английские слова) с display: swap и кириллицей.

localStorage

Версионирование контента через DEFAULTS_VERSION. Прогресс не теряется при обновлении дефолтов.

Web Speech API

Озвучка без зависимостей и API-ключей. Деградирует молча, если в браузере нет голоса.

OpenAI-compatible chat

Один универсальный клиент для Mistral, OpenRouter, Ollama, vLLM. Настройки в localStorage.

Структура

app/
├── page.tsx           — лендинг
├── about/             — этот гайд
├── dashboard/         — приветствие, KPI, витрина
├── practice/          — чат с AI
├── cards/             — карточки SRS
├── typing/            — тренажёр написания
├── reading/           — чтение с поповером
├── grammar/           — упражнения по темам
├── dictionary/        — словарь, фильтры, поиск
├── progress/          — heatmap и статистика
├── layout.tsx         — шрифты, шапка, мета
└── globals.css        — палитра, градиент, keyframes

components/             — Card, Button, Nav, StatCard,
                          ProgressBar, SpeakButton, Heatmap
lib/                    — storage.ts, chat.ts, speech.ts, types.ts
data/                   — default-words.json (1400+, A1–C1),
                          default-texts.json (145, A1–C1),
                          default-exercises.json (660, A1–C1)

Как запустить локально

git clone <repo>
cd englishteacher
npm install
npm run dev
# open http://localhost:3000

Для чата с AI зайди в /practice → Настройки и впиши свой ключ от Mistral / OpenRouter / Ollama. Ключ хранится только в твоём браузере.

Деплой на Vercel

01Запушь репозиторий на GitHub.
02На vercel.com → New Project → выбери репо.
03Vercel сам определит Next.js. Никаких env-переменных не нужно — бэкенда нет.
04Готово. Каждый push в main = новый деплой.