Бизнес-задачи, реальные процессы и удобные интерфейсы важнее декоративной сложности.
Junior Frontend / Fullstack разработчик
Андрей
Бадалин.
Разрабатываю коммерческие сайты, дашборды, CRM-инструменты, системы бронирования и веб-приложения для Telegram-ботов.
Обо мне
Учусь через разработку полезных людям продуктов.
Я студент IT-направления и концентрируюсь на практичных веб-приложениях для бизнеса: от понятных маркетинговых сайтов до внутренних дашбордов, CRM-систем и сервисов бронирования.
Я использую AI-инструменты как часть системного процесса разработки, а не как замену инженерным решениям. Архитектуру, тестирование, интеграции и деплой контролирую самостоятельно.
AI ускоряет работу, но ответственность за архитектуру, интеграцию, тестирование и деплой остается на мне.
Компетенции
Сфокусированный набор технологий для создания веб-продукта от интерфейса до деплоя.
Frontend
- HTML
- CSS
- JavaScript
- TypeScript
- React
- Next.js
- Tailwind CSS
Backend
- Node.js
- API Routes
- Vercel Functions
Базы данных / Авторизация
- Supabase
- PostgreSQL
Инструменты
- Git
- GitHub
- Vercel
AI-процесс
- ChatGPT
- Codex
- Claude
- Cursor / Antigravity
Ключевые проекты
Четыре наиболее сильных кейса: они выходят за рамки презентационного интерфейса и показывают бизнес-логику, данные и многошаговые сценарии.
Bot Orders CRM
CRM-процесс, интеграция Telegram и полный жизненный цикл заказа показывают работу с реальным бизнес-сценарием.
Смотреть кейсSales Analytics Dashboard
Сложная структура данных, ключевые показатели и сравнительные графики демонстрируют зрелую работу с аналитическими интерфейсами.
Смотреть кейсBooking Service App
Календарь, доступность слотов, авторизация и управление записями требуют согласованной продуктовой логики.
Смотреть кейсTeam Task Manager
Роли, назначения, статусы и командный прогресс формируют полноценный рабочий процесс со сквозной логикой.
Смотреть кейсПроекты как кейсы
Восемь проектов с конкретной задачей, реализованными функциями, стеком и проверяемыми ссылками на код и демо.
BuildMarket Store
- Задача
- Организовать большой каталог строительных товаров и сделать путь от поиска позиции до оформления заказа понятным на любом экране.
- Ключевые функции
- Поиск по каталогу · Фильтры категорий · Карточки товаров · Корзина · Оформление заказа · Адаптивный интерфейс
- Демонстрирует
- Проектирование e-commerce интерфейсов, работу с состоянием каталога и построение масштабируемых UI-компонентов.
- Next.js
- TypeScript
- Tailwind
- Supabase
Price Tracker Dashboard
- Задача
- Собрать изменения цен в одном интерфейсе, чтобы пользователь быстро замечал тренды и позиции, требующие внимания.
- Ключевые функции
- История цен · Графики динамики · Пороговые уведомления · Сравнение товаров · Фильтрация статусов · Адаптивный дашборд
- Демонстрирует
- Визуализацию данных, интеграцию API и создание информативных аналитических интерфейсов.
- React
- TypeScript
- Charts
- API
Bot Orders CRM
- Задача
- Превратить поток заказов из Telegram-бота в управляемый рабочий процесс для оператора и сохранить контекст по каждому клиенту.
- Ключевые функции
- Воронка заказов · Карточки клиентов · Управление статусами · Поиск и фильтры · Интеграция Telegram · Операционный дашборд
- Демонстрирует
- Сквозную бизнес-логику, моделирование CRM-процессов, работу с базой данных и внешними интеграциями.
- Next.js
- Supabase
- Telegram API
- PostgreSQL
Sales Analytics Dashboard
- Задача
- Представить ключевые показатели продаж так, чтобы динамика выручки, конверсии и каналов считывалась без ручной обработки данных.
- Ключевые функции
- KPI-карточки · Графики продаж · Фильтры периодов · Сравнение каналов · Анализ конверсии · Адаптивные представления
- Демонстрирует
- Информационную архитектуру аналитических продуктов и работу со сложными наборами данных.
- React
- TypeScript
- Recharts
- Tailwind
Booking Service App
- Задача
- Сделать запись на услугу предсказуемой для клиента и управляемой для бизнеса с учётом доступных дат и временных слотов.
- Ключевые функции
- Выбор услуги · Календарь доступности · Выбор временного слота · Авторизация · Управление записями · Валидация формы
- Демонстрирует
- Логику бронирования и календаря, авторизацию, валидацию пользовательского сценария и работу с состояниями доступности.
- Next.js
- Supabase
- Auth
- Vercel
Media Library API App
- Задача
- Объединить поиск по внешнему каталогу и персональные списки в устойчивом интерфейсе с понятными состояниями загрузки и ошибок.
- Ключевые функции
- Поиск по API · Карточки контента · Сохранённые списки · Просмотр категорий · Состояния загрузки · Обработка ошибок
- Демонстрирует
- Интеграцию REST API, управление асинхронными состояниями и опыт разработки на Vue/Nuxt.
- Nuxt 3
- Vue
- TypeScript
- REST API
Animated SaaS Landing
- Задача
- Подать SaaS-продукт через выразительную, но производительную страницу, где анимация поддерживает содержание и не мешает конверсии.
- Ключевые функции
- Адаптивные секции · Контролируемая анимация · Продуктовый сторителлинг · CTA-сценарии · Переиспользуемые компоненты · Оптимизация производительности
- Демонстрирует
- Визуальную реализацию маркетинговых страниц, motion-дизайн и внимание к производительности.
- Next.js
- Motion
- Tailwind
- Vercel
Team Task Manager
- Задача
- Организовать командную работу с задачами, ответственными и приоритетами так, чтобы участники видели актуальный прогресс.
- Ключевые функции
- Авторизация · Ролевой доступ · Назначение задач · Приоритеты и статусы · Командный прогресс · Фильтрация и поиск
- Демонстрирует
- Приложение со сквозной логикой, ролевой моделью, бизнес-состояниями и совместными рабочими процессами.
- React
- Node.js
- PostgreSQL
- Auth
Работа с AI
AI используется как инженерный инструмент ускорения, а не как замена пониманию продукта и ответственности за результат.
AI помогает быстрее создавать прототипы, проводить ревью, рефакторинг и готовить документацию. Архитектуру, проверку поведения, интеграции, деплой и финальные технические решения я контролирую вручную.
- 01Идея
- 02Дизайн
- 03Разработка
- 04Тестирование
- 05Деплой
- 06Документация
Стандарты разработки
Каждый проект оформляется как проверяемая инженерная работа, пригодная для публичного репозитория и воспроизводимого деплоя.
Репозитории GitHub
Исходный код и история изменений доступны для технической оценки.
Деплой на Vercel
Рабочие версии проектов доступны по стабильным публичным ссылкам.
CI в GitHub Actions
Автоматические проверки стиля и сборки помогают не допускать регрессий.
Документация README
Назначение, стек, локальный запуск и деплой документируются в репозитории.
Локализация RU/EN
Пользовательские интерфейсы поддерживают русский и английский языки.
Аудит npm
Зависимости проверяются на известные уязвимости перед завершением работы.
Проверка сборки
Сборка для публикации и TypeScript проверяются до выпуска изменений.
Адаптивный дизайн
Основные сценарии проектируются и проверяются на больших и мобильных экранах.
Для работодателей
Портфолио ориентировано на стартовые позиции, где важны сильная база разработки интерфейсов, продуктовая логика и готовность развиваться в сторону полного цикла веб-разработки.
Мой текущий уровень — junior. Я не заявляю компетенции старшего разработчика, но показываю способность доводить проекты до задокументированного, развернутого и проверяемого результата.
- Junior Frontend Developer
- Junior Fullstack Developer
- Web Developer
- React / Next.js Developer
Давайте создадим полезный продукт.
Рассматриваю junior-позиции, стажировки и небольшие коммерческие проекты.