Loading...

01/04

Site

Sadovnikov

Sadovnikov - персональный сайт-портфолио. Его главной задачей является возможность показать свой опыт, стэк и проекты потенциальному работодателю. Также, Sadovnikov стал большим учебным проектом, на котором я изучил современную архитектуру full-stack приложений

STACK

NextJS

SASS

React

TypeScript

Caddy

Redux Toolkit

КЛЮЧЕВЫЕ ФУНКЦИИ

Административная панель

Собственная CMS для управления проектами, описаниями, технологиями, метриками, ключевыми функциями и другим контентом без прямого редактирования кода

Редактор контента

Rich-text редактор с визуальным и HTML-режимом, поддержкой форматирования, ссылок, изображений и inline-стилей.

Локализация

Русская и английская версии интерфейса и контента с независимым редактированием переводов для каждого проекта.

Self-hosted аналитика

Интеграция Umami для собственной аналитики посещений и поведения пользователей без рекламных трекеров.

Медиа и файлы

Загрузка и управление изображениями прямо из административной панели с хранением файлов на собственном сервере.

Full-stack инфраструктура

Next.js, PostgreSQL, Prisma и Docker Compose работают как единая система, а Caddy обеспечивает HTTPS и маршрутизацию production-трафика. CI/CD

01 / 06

ОПИСАНИЕ

СЛОЖНОСТИ И РЕШЕНИЯ

Главная сложность Sadovnikov оказалась в том, что по мере развития он перестал быть просто сайтом. Он стал системой с разными типами данных, медиа, локализацией, admin UI и production-окружением.

1
Контент и локализация

Каждый проект имеет RU/EN-контент, а админка должна оставаться удобной при росте объёма данных.

2
Медиа

Изображения загружаются из admin panel, хранятся на сервере и раздаются как отдельные assets.

3
Редактор

Во время заполнения JustBuy я сам стал пользователем своей CMS и понял, что plain textarea недостаточно. Так появился rich-text редактор с visual и HTML-режимами.

4
Production

Docker Compose, PostgreSQL, Prisma, Caddy и self-hosted Umami связаны в одну production-схему на собственном VPS.


При доработке admin panel я впервые использовал AI-агента не только для подсказок, но и для непосредственной реализации части functionality.

Rich-text editor

Требования, UX и границы функции я определял сам. AI-агент использовался для ускорения implementation: он вносил изменения в код, а я проверял результат, тестировал и изучал получившуюся реализацию.

Эту часть я считаю AI-assisted development, а не кодом, полностью написанным мной вручную.

Показатели

Производительность

Скорость и производительность

90/100

Время загрузки

Среднее время загрузки

1.4 s

SEO

Поисковая оптимизация

100/100

Доступность

Lighehouse, A11y

93/100

ЭВОЛЮЦИЯ

Листайте историю проекта

0111

Февраль 2026 г.

Начальный коммит

Первый коммит инициализирует репозиторий базовыми файлами и структурой.

Февраль 2026 г.

Реализация базовых секций

Реализованы базовые секции, такие как Header, Preview, Skill и Stack.

Февраль 2026 г.

Улучшения пользовательского интерфейса

Добавлены интерактивные элементы, такие как эффекты наведения и кнопки переключения языков.

Апрель 2026 г.

Улучшение адаптивного дизайна

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

Апрель 2026 г.

Переход на Next.js

Успешно выполнен переход приложения на фреймворк Next.js.

Апрель 2026 г.

Интеграция анимаций

Интеграция кастомных хуков и компонентов для плавных анимаций по всему сайту.

Апрель 2026 г.

Оптимизация производительности

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

Июнь 2026 г.

Начало разработки бэкенда

Начато разработка бэкенда с использованием моделей базы данных и запросов.

Июль 2026 г.

Система аутентификации

Реализована система аутентификации и защита чувствительных действий.

Июль 2026 г.

Финальная шлифовка и исправление ошибок

Исправлены оставшиеся баги, оптимизирован код и выполнена подготовка к развертыванию.

Август 2026 г.

Завершение юнит-тестирования

Завершено написание комплексных юнит-тестов, охватывающих основные функциональные возможности.