Цели проекта
Создать современный и функциональный веб-сайт для строительной фирмы, который:

1. Представляет услуги компании.
2. Показывает портфолио реализованных проектов.
3. Обеспечивает возможность обратной связи с клиентами.
4. Предоставляет простой и интуитивно понятный интерфейс для пользователей.

Функциональные требования Frontend (пользовательская часть)

1. Главная страница:

• Привлекательный дизайн с анимациями.
• Информация о компании и преимуществах.

1. Каталог услуг:

• Подробное описание каждой услуги.
• Фильтрация по категориям.

1. Портфолио проектов:

• Галерея выполненных работ.
• Подробная информация о каждом проекте.

1. Контактная форма:

• Обратная связь с возможностью прикрепления файлов.
• Интеграция с Google Maps для отображения офиса компании.

1. Адаптивность:

• Оптимизация под мобильные устройства и планшеты.

Backend (серверная часть)

1. Управление контентом:

• Админ-панель для добавления и редактирования услуг, проектов, отзывов.

1. Обработка форм:

• Сохранение заявок в базе данных.
• Уведомления на почту администратора.

1. Аутентификация:

• Регистрация и авторизация для сотрудников компании.

1. API:

• REST API для связи между фронтендом и бэкендом.

1. Хранение данных:

• Сохранение изображений в облаке или на сервере.

Технологический стек Frontend

• React: Для создания компонентов и реализации интерактивности.
• Tailwind CSS: Для быстрой стилизации.
• Vite: Для сборки проекта.

Backend

• Node.js + Express: Для создания API.
• PostgreSQL: Для хранения данных.
• Sequelize: ORM для работы с базой данных.
• JWT: Для аутентификации пользователей.

DevOps

• Docker: Для контейнеризации приложения.
• NGINX: Веб-сервер для раздачи статики и проксирования запросов.
• AWS S3: Для хранения изображений.
• GitHub Actions: Для CI/CD.

Этапы реализации
1. Сбор требований

• Провести интервью с заказчиком для уточнения пожеланий.
• Создать список функциональных требований.

2. Проектирование

• Разработать макеты страниц (Figma).
• Спроектировать структуру базы данных.
• Составить схему API.

3. Разработка
Frontend:

• Настроить проект на React.
• Создать основные страницы и маршруты.
• Реализовать адаптивный дизайн.

Backend:

• Настроить сервер на Express.
• Реализовать REST API для работы с услугами, проектами и заявками.
• Настроить подключение к базе данных.

4. Тестирование

• Написать юнит-тесты для компонентов и API.
• Провести тестирование UX/UI на реальных пользователях.

5. Развертывание

• Настроить сервер (например, на AWS или DigitalOcean).
• Развернуть приложение с помощью Docker.

Результаты

1. Современный веб-сайт с интуитивно понятным интерфейсом.
2. Возможность редактирования контента через админ-панель.
3. Повышение конверсии за счет удобной формы обратной связи и отображения портфолио.
4. Автоматизация обработки заявок.