SmartSolTech Website
Современный PWA сайт для SmartSolTech с админ-панелью, управлением портфолио, интеграцией с Telegram ботом и калькулятором стоимости услуг.
🚀 Особенности
- Современный дизайн: Отзывчивый интерфейс с анимациями и современным UI/UX
- PWA: Прогрессивное веб-приложение с поддержкой офлайн-режима
- Админ-панель: Управление портфолио, услугами, медиа-контентом и настройками сайта
- Интеграция с Telegram: Подключение к Telegram боту для уведомлений
- Калькулятор стоимости: Интерактивный калькулятор расчета стоимости услуг
- Система аутентификации: Безопасная авторизация с JWT токенами
- Загрузка файлов: Оптимизация изображений и управление медиа-контентом
- SEO оптимизация: Настроенные мета-теги и структурированные данные
🛠️ Технологии
Backend
- Node.js - Серверная платформа
- Express.js - Веб-фреймворк
- MongoDB - База данных
- Mongoose - ODM для MongoDB
- JWT - Токены аутентификации
- bcrypt - Хеширование паролей
- Multer - Загрузка файлов
- Sharp - Обработка изображений
Frontend
- EJS - Шаблонизатор
- Tailwind CSS - CSS фреймворк
- AOS - Библиотека анимаций
- Font Awesome - Иконки
- Service Worker - PWA функциональность
Дополнительно
- node-telegram-bot-api - Интеграция с Telegram
- Nodemailer - Отправка email
- Helmet - Безопасность
- express-rate-limit - Ограничение запросов
📦 Установка
- Клонирование репозитория
git clone <repository-url>
cd sst_site
- Установка зависимостей
npm install
- Настройка переменных окружения
cp .env.example .env
Отредактируйте файл .env с вашими настройками:
NODE_ENV=development
PORT=3000
# Database
MONGODB_URI=mongodb://localhost:27017/smartsoltech
# Security
SESSION_SECRET=your-super-secret-session-key
JWT_SECRET=your-super-secret-jwt-key
# File Upload
UPLOAD_PATH=./uploads
MAX_FILE_SIZE=10485760
# Email Configuration
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password
# Telegram Bot (Optional)
TELEGRAM_BOT_TOKEN=your-telegram-bot-token
# Admin Account
ADMIN_EMAIL=admin@smartsoltech.kr
ADMIN_PASSWORD=change-this-password
- Инициализация базы данных
npm run init-db
- Запуск в режиме разработки
npm run dev
Сайт будет доступен по адресу: http://localhost:3000
🗂️ Структура проекта
sst_site/
├── models/ # Модели данных (MongoDB)
│ ├── User.js
│ ├── Portfolio.js
│ ├── Service.js
│ ├── Contact.js
│ └── SiteSettings.js
├── routes/ # Маршруты API
│ ├── index.js
│ ├── auth.js
│ ├── contact.js
│ ├── calculator.js
│ ├── portfolio.js
│ ├── services.js
│ ├── media.js
│ └── admin.js
├── views/ # Шаблоны EJS
│ ├── layout.ejs
│ ├── index.ejs
│ ├── calculator.ejs
│ └── partials/
├── public/ # Статические файлы
│ ├── css/
│ ├── js/
│ ├── images/
│ ├── manifest.json
│ └── sw.js
├── middleware/ # Промежуточное ПО
├── scripts/ # Служебные скрипты
│ ├── init-db.js
│ ├── dev.js
│ └── build.js
├── uploads/ # Загруженные файлы
├── server.js # Главный файл сервера
├── package.json
└── README.md
📋 Доступные команды
# Разработка
npm run dev # Запуск в режиме разработки с hot reload
# Продакшн
npm start # Запуск в продакшн режиме
npm run build # Сборка для продакшна
# База данных
npm run init-db # Инициализация БД с тестовыми данными
# Тестирование
npm test # Запуск тестов (пока не реализовано)
🔐 Админ-панель
После инициализации базы данных вы можете войти в админ-панель:
- URL:
http://localhost:3000/admin - Email:
admin@smartsoltech.kr(или из .env) - Пароль: Указанный в .env файле
Возможности админ-панели:
- Управление портфолио проектами
- Редактирование услуг и их стоимости
- Загрузка и управление медиа-файлами
- Просмотр и управление контактными формами
- Настройки сайта и SEO
- Управление пользователями
🤖 Интеграция с Telegram
Для настройки Telegram бота:
- Создайте бота через @BotFather
- Получите токен бота
- Добавьте токен в
.envфайл:TELEGRAM_BOT_TOKEN=your-token - Перезапустите сервер
Бот будет отправлять уведомления о:
- Новых контактных формах
- Заказах через калькулятор
- Новых комментариях
💰 Калькулятор стоимости
Интерактивный калькулятор позволяет клиентам:
- Выбрать тип услуги
- Указать дополнительные параметры
- Получить примерную стоимость
- Отправить заявку на расчет
Настройки калькулятора можно изменить в админ-панели.
🔒 Безопасность
Проект включает следующие меры безопасности:
- Хеширование паролей с bcrypt
- JWT токены для аутентификации
- Защита от CSRF атак
- Ограничение количества запросов
- Валидация входных данных
- Безопасные HTTP заголовки
📱 PWA функции
- Установка на устройство
- Офлайн работа
- Push уведомления
- Фоновая синхронизация
- Адаптивные иконки
- Splash screen
🚀 Деплой
Для продакшна:
- Сборка приложения
npm run build
- Настройка сервера
- Установите Node.js и MongoDB
- Настройте переменные окружения
- Настройте прокси-сервер (nginx)
- Запуск
cd dist
npm install --production
npm start
Docker деплой:
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
🤝 Участие в разработке
- Форкните репозиторий
- Создайте ветку для фичи (
git checkout -b feature/AmazingFeature) - Сделайте коммит (
git commit -m 'Add some AmazingFeature') - Отправьте в ветку (
git push origin feature/AmazingFeature) - Откройте Pull Request
📝 Лицензия
Этот проект лицензирован под MIT License - подробности в файле LICENSE.
📞 Поддержка
Если у вас есть вопросы или проблемы:
- Email: info@smartsoltech.kr
- GitHub Issues: Create Issue
- Telegram: @smartsoltech
🙏 Благодарности
- Express.js - За отличный веб-фреймворк
- MongoDB - За гибкую базу данных
- Tailwind CSS - За удобный CSS фреймворк
- AOS - За красивые анимации
SmartSolTech - Умные решения для вашего бизнеса 🚀
Description
Languages
EJS
58%
JavaScript
36.9%
CSS
5.1%