Веб-сайт кофейни в скандинавском стиле
В современном городском пространстве кофейни играют важную социальную и культурную роль, становясь не просто местом покупки напитков, но и пространством для общения, отдыха, работы и творчества. Скандинавские кофейни ассоциируются с минимализмом, уютом и атмосферой, где большое значение придаётся визуальной эстетике и пользовательскому опыту.
Данный проект представляет собой полнофункциональный веб-сайт кофейни в скандинавском стиле, разработанный с использованием современного технологического стека React + Node.js + SQLite3. Сайт предоставляет пользователям удобный интерфейс для просмотра каталога продукции, работы с корзиной, чтения блога и взаимодействия с брендом, а администраторам — инструменты для управления контентом и анализа продаж.
Проект реализован в формате SPA (Single Page Application) с клиентской маршрутизацией и REST API.
Изучение и практическое применение технологического стека React, Node.js и SQLite3 для создания профессионального веб-сайта кофейни с акцентом на UI/UX-дизайн и удобство использования.
- анализ предметной области кофейного бизнеса;
- проектирование архитектуры веб-приложения;
- разработка фронтенда на React;
- разработка бэкенда на Node.js;
- проектирование и реализация базы данных SQLite3;
- реализация функциональных модулей:
- каталог товаров;
- корзина;
- блог;
- регистрация и авторизация;
- личный кабинет пользователя;
- панель администратора;
- страница статистики и аналитики;
- тестирование и публикация проекта на GitHub и GitVerse.
В ходе работы использовались следующие методы:
- анализ литературы и онлайн-источников по веб-разработке и UI/UX;
- практическое тестирование React, Node.js и SQLite3;
- проектирование архитектуры приложения и базы данных;
- сравнительный анализ выбранного стека с альтернативными решениями.
- React 19
- Vite
- React Router
- Ant Design
- Tailwind CSS
- Framer Motion
- Axios / Fetch
- Recharts
- Node.js
- Express
- SQLite3
- ESLint
- PostCSS + Autoprefixer
- Git (GitHub, GitVerse)
Проект построен по классической клиент-серверной архитектуре с разделением на фронтенд и бэкенд.
┌────────────────────┐
│ Пользователь │
│ (Web Browser) │
└─────────┬──────────┘
│ HTTP (JSON)
▼
┌────────────────────┐
│ Frontend (React) │
│ ─ SPA приложение │
│ ─ React Router │
│ ─ UI / Анимации │
└─────────┬──────────┘
│ REST API
▼
┌────────────────────┐
│ Backend (Node.js) │
│ ─ Express │
│ ─ API endpoints │
│ ─ Auth / Roles │
└─────────┬──────────┘
│ SQL
▼
┌────────────────────┐
│ SQLite3 Database │
│ ─ users │
│ ─ products │
│ ─ reviews │
│ ─ shops │
│ ─ sales │
│ ─ blog_posts │
└────────────────────┘
my-react-app/
├── public/ # Статические ресурсы
├── src/
│ ├── components/ # Переиспользуемые компоненты
│ ├── pages/ # Страницы приложения
│ ├── router/ # Конфигурация маршрутов
│ ├── services/ # Работа с API
│ ├── styles/ # Глобальные стили
│ └── main.jsx
├── backend/
│ ├── routes/ # API-маршруты
│ ├── database.db # SQLite3 база данных
│ └── server.js
└── README.md
-
В проекте реализована система ролей:
-
user — обычный пользователь;
-
admin — администратор с доступом к панели управления.
-
скандинавская минималистичная эстетика;
-
тёмная цветовая палитра с акцентами;
-
адаптивная верстка (mobile-first);
-
плавные анимации и интерактивные эффекты;
-
высокая читаемость и визуальная иерархия.
Проект размещён и поддерживается на платформах:
-
GitHub
-
GitVerse
Данный проект демонстрирует возможности использования стека React + Node.js + SQLite3 для создания современных, эстетичных и функциональных веб-сервисов для малого бизнеса. Полученные результаты могут быть использованы в качестве практического руководства для разработчиков, заинтересованных в создании сайтов для заведений общественного питания с уникальным визуальным стилем.s