Приложение для читающих. Помнит, что прочитал, показывает движение в текущей книге и помогает не забыть то, что хочу прочитать.
Как появился проект
В нашей семье любят читать. Нам захотелось фиксировать время чтения, понимать сколько времени уходит на каждую книгу, оставлять заметки, оценивать и загружать конкретную обложку. Но подходящего решения так и не нашли. Поэтому решили создать свое.
Интерфейс и решения
Что читаю сейчас
Я открываю приложение и сразу вижу, где остановился. Беру в руку книгу, стартую таймер и начинаю читать.
Пока читаю
Приложение отслеживает время чтения. Если мне нужно срочно отлучиться — нажимаю на паузу. Так сессия не прервется. А когда закончил, нажимаю на стоп. Приложение спрашивает: «сколько страниц прочитано?» Я ввожу цифру, и прогресс обновляется.
Прогресс по каждой книге
У каждой книги своя карточка: дневник сессий по датам, заметки, а для текущей книги — скорость чтения и сколько примерно сессий осталось до конца.
Прочитанное
Прочитанные книги собраны по месяцам. Листаю и вспоминаю: вот что читал в марте, вот что в мае.
Месяц можно сохранить картинкой и поделиться. Картинку рисует сам код на Canvas.
Общий прогресс
Календарь показывает активные дни, и дни когда не читал. А интенсивность цвета зависит от количества сессий - чем больше садился читать, тем будет темнее цвет.
Огонёк показывает текущий стрик: сколько дней подряд не пропускаю чтение.
На чем сделано
Интерфейс — React 18, TypeScript, Vite
Стиль — Tailwind CSS, Material Design 3
Локальное хранилище — IndexedDB через idb
Облако — Supabase: PostgreSQL, Auth, RLS; свой движок синхронизации
Офлайн и установка на телефон — PWA, Workbox
Картинки для шеринга — Canvas API
Инфраструктура — Docker Compose: локальный стек Supabase (PostgreSQL, GoTrue, PostgREST, Kong)
Качество — Vitest, Testing Library