Примеры работ и кейсы по направлению «React»

Стек: - JavaScript - React 18 + Vite 5 - Recharts (area / bar / pie) - CSS Modules - jsPDF + html2canvas - IBM Plex Sans / IBM Plex Mono

Одностраничное погодное приложение с автоопределением локации, живым поиском городов (combobox с подсказками «Город · регион · страна»), текущей погодой, 8-часовым и 5-дневным прогнозом. Построено на React 18 + Vite с CSS Modules и кастомными хуками; данные — Open-Meteo без регистрации и ключей, обратное геокодирование — BigDataCloud, переключатель °C/°F с перезапросом. Реализованы: адаптивный фон, меняющийся по типу погоды (ясный день, ночь со звёздным canvas, дождь, снег, облачность), CSS-анимированные иконки (вращающееся солнце, лунное свечение, дрейфующие облака, падающие капли/снежинки, молния), анимированный счётчик температуры на requestAnimationFrame, frosted-glass карточки с backdrop-blur и staggered-появлением, полная поддержка русского и английского языков (LanguageContext + localStorage). Решает задачу создания имиджевого продукта в портфолио веб-разработчика — демонстрирует уровень работы с UI, анимациями и внешними API без привязки к платным сервисам.

Особенности 🎨 Современный дизайн - красивый и профессиональный интерфейс 📱 Адаптивность - отлично выглядит на всех устройствах 🌙 Темная/светлая тема - переключатель тем с плавными переходами 📊 Интерактивные диаграммы - круговые и радарные диаграммы навыков ⚡ Анимации - плавные анимации при скролле и взаимодействии 🎯 SEO-оптимизация - правильная структура и мета-теги 🚀 Быстрая загрузка - оптимизированная производительность 🛠 Технологии React 18 - современный UI фреймворк TypeScript - типизированный JavaScript SCSS - продвинутые стили с переменными и миксинами Webpack 5 - сборка и оптимизация GitHub Actions - автоматический деплой 📋 Технологии Frontend-разработчика Основной стек HTML5, CSS3 - семантическая верстка, Flex/Grid, адаптивный дизайн JavaScript ES6+ - асинхронность, ООП, функциональное программирование React.js - компоненты, Hooks, Context API, роутинг TypeScript - типизация, интерфейсы, безопасность кода Стилизация и инструменты SCSS/LESS - препроцессоры, переменные, миксины, модули Webpack - сборка, оптимизация, горячая перезагрузка Git - система контроля версий, GitHub Flow Изучаю и применяю Next.js - SSR, SSG, оптимизация производительности Тестирование - Jest, React Testing Library UI/UX - Figma, дизайн-системы, компоненты

Была проведена вёрстка по макету figma, фронтенд на react, использование БД SQLite

Магазин одежды, был сделан на React, а также развёрнут на Docker

Разработал e-commerce сайт с каталогом товаров и карточками продукции. Реализовал адаптивный интерфейс, структуру каталога, UI-блоки для представления ассортимента и удобную навигацию по контенту. Основной упор был на читаемость, визуальную подачу и комфортный пользовательский сценарий.

Разработал промо-сайт для карточной игры Triad Arena. Реализовал адаптивный интерфейс, анимации, визуальные блоки и стилистически цельную подачу проекта. Основной упор был на атмосферу, удобство просмотра контента и современный игровой UI.

Разработал SPA админ-панель на React для работы с таблицами, аналитикой и внутренними разделами системы. Реализовал клиентскую навигацию, интерфейсы для отображения данных, состояния загрузки и интеграцию с API. Основной упор был на удобство работы, скорость интерфейса и понятную структуру приложения.

Разработал интерфейс админ-панели с табличными данными, фильтрацией, сортировкой и поиском. Основной упор был на удобство работы с большим количеством записей, понятную структуру интерфейса, состояния загрузки и адаптивность. Реализовал связку UI с API и пользовательские сценарии для работы с данными.

Разработал модуль оптимизации маршрутов. Реализовал интерфейсы для работы с точками поездки, отображение маршрута на карте, сценарии пересчета порядка точек и интеграцию frontend с backend-логикой оптимизации. Основной упор был на удобный UX, интерактивность и понятную визуализацию результата для пользователя.