Адаптивный сайт с простой админкой (React + Node.js)
Создать адаптивный сайт с простой админкой для самостоятельного добавления контента — фото, видео, звука, текста, таблиц цен.
Цель — иметь универсальный шаблон, который легко обновлять без знания программирования.
Технологии
Frontend: React + TypeScript (адаптивная верстка, базовая SEO-структура).
Backend: Node.js + Express.
База данных: MongoDB или PostgreSQL.
Админка: упрощенная форма с полями “загрузить фото, видео, текст, таблицу цен”.
Языки сайта
Польский (основной).
Украинский.
Белорусский.
Структура сайта
1. Главная страница
Анимированный баннер (3 слайда с фото или видео).
4 кликабельных блока услуг (фото, короткий текст, кнопка “Подробнее”).
Блок “Контакты” — карта, телефон, email.
Отдельное приложение/кнопка для перехода в WhatsApp.
Меню: Главная, Услуги, Галерея фото, Галерея видео, Статьи, Контакты.
2. Страница услуги
Название, короткое описание.
Возможность добавления фото, видео, звука (не обязательно для каждой страницы).
Текстовый блок с описанием и таблицей цен.
Место для калькулятора стоимости (отображается только если добавлено).
Календарь бронирования — синхронизация с личным календарем (Google или аналог).
3. Галерея работ
Галерея фото — сетка с возможностью просмотра в увеличенном формате.
Галерея видео — видеофайлы или YouTube-embed.
4. Статьи
Список публикаций с превью (изображение, короткое описание).
Полная страница статьи с медиа (фото, видео, звук).
5. Контакты
Карта, телефон, email.
Кнопка “Написать в WhatsApp” — открывает чат.
Форма “Заказать звонок”.
Иконки соцсетей.
Технические требования
Один пользователь с доступом к админке.
Поддерживаемые форматы файлов:
Фото — JPEG, PNG
Видео — MP4, YouTube-embed
Звук — MP3
Место для калькулятора автоматически скрывается, если он не добавлен.
Минималистичный дизайн, чистый белый фон, плавные переходы, без избыточных анимаций.
Форма обратного звонка и страница благодарности (Thank-you page)
На сайте должна быть форма “Заказать звонок” с полями: Имя, Телефон, Сообщение (необязательно).После успешной отправки формы открывается новое окно (отдельная страница) с сообщением благодарности — thank-you page.
Эта страница используется для отслеживания конверсий Google Ads.
1. Админка
Один пользователь с полным доступом.
Возможность редактировать, удалять и предварительно просматривать все добавленные медиа и тексты.
Сохраняется история изменений контента (опционально, для безопасности).
2. Календарь бронирования
Синхронизация с Google Calendar.
Автоматическое блокирование занятых дат и времени.
Возможность редактировать или удалять бронирование в админке.
3. Форма обратного звонка
Поля: Имя, Телефон, Сообщение (необязательно), дата/время (необязательно).
Заявки сохраняются в базе данных и дублируются на email администратору.
Дополнительные интеграции: опционально WhatsApp или SMS.
4. Медиa
Поддерживаемые форматы: Фото — JPEG, PNG; Видео — MP4 или YouTube embed; Аудио — MP3.
Максимальный размер файлов: Фото — 10 МБ, Видео — 50 МБ, Аудио — 20 МБ.
Автоматическое уменьшение размера фото для быстрого загрузки.
5. Калькулятор
Место для калькулятора отображается только при наличии.
Логика: зависимость цены от количества и опций.
Админ может редактировать формулы и цены через панель.
6. Мультиязычность
Три языка: польский (основной), украинский, белорусский.
Админка позволяет редактировать все тексты и медиа для каждого языка.
7. Дизайн
Минималистичный шаблон с белым фоном.
Плавные переходы и базовая анимация баннера.
Полная адаптивность: мобильные, планшеты, десктоп.
8. SEO и производительность
Базовое SEO: meta-теги, заголовки, URL.
Оптимизация медиа для быстрого загрузки.
9. Интеграции
Кнопка WhatsApp открывает чат.
Страница благодарности для отслеживания конверсий Google Ads.
Интеграция Google Analytics для статистики.
10. Хостинг / деплой
Развертывание на любом Node.js-хостинге.
SSL сертификат, базовое резервное копирование.
Буду рад, если дочитаете это до конца и зададите вопросы.
-
97 3 0 1 Привет!
Я увидел ваш проект, и он мне интересен. У меня есть опыт как в аутсорсинге, так и в продуктовой разработке, и я отлично работаю в команде.
🔥 Мои ключевые навыки:
✅ Разработка SPA и веб-приложений
✅ Оптимизация производительности
✅ Ведение и поддержка проектов
✅ Качественный и чистый код
… 💻 Технологии: HTML, CSS, JavaScript, React, Vue, Git
Если вам важно качественное и надежное решение – готов обсудить детали. Можно связаться здесь или в удобном формате.
Что думаете? Буду рад сотрудничеству!
-
1098 5 0 Здравствуйте, готов взяться за работу.
Цена будет в 20 000 грн
И предлагаю сделать на nest next js что бы сам сайт был быстрее.
Доведем его до зеленых зон
Пишите, буду рад сотрудничать
-
15075 32 0 1 Добрый день!
Я Валентин из Arctic Web. Мы занимаемся IT-консалтингом и полным циклом разработки: от UX/UI дизайна до веб и мобильной разработки и интеграций. Готовы взять ваш проект в работу и поделиться примерами похожих кейсов в личных сообщениях.
С уважением,
Arctic Web Team
Freelancehunt
-
835 7 0 1 Добрый день, Роман.
Готов разработать сайт с админкой под ключ на React.
Цена за час от 15$. Могу ли я увидеть ТЗ для оценки?
Предлагаю обсудить детали проекта.
Работаем с WP, MOdx, Laravel, Yii2, React.
Пример Лендингов: https://docs.google.com/document/d/1m5oHbYvSOTMHqEXjKGqMKzEg3WWxHvKDlWf2khixjpE/edit
Пример Сайта компании: https://docs.google.com/document/d/1OIlJKvV--oUgndLV_7gvUSJf5RbsZ4i0CWdGedhuRtE/edit?usp=sharing
Пример Интернет магазина: https://docs.google.com/document/d/1QqchaqJbq-4Clxm1BULy2aj7tEoaNQNNi0j_qhJ8x7E/edit?usp=sharing
… Примеры Битрикс: https://docs.google.com/document/d/1vqJK7r6Ryxm4J3HQ7YSmuljOYAfMyJr8mr0wA76WJcA/edit?usp=sharing
-
605 2 0 Дочитав уважно 👍
Перед оценкой хотел уточнить несколько моментов, чтобы сразу спроектировать оптимальную структуру (и не сделать «лишнего» в бэкенде или админке):
🔹 Админка — нужно ли, чтобы она имела drag-and-drop для медиа/таблиц, или достаточно обычных форменных полей с загрузкой файлов?
🔹 Калькулятор — должен ли он быть только текстовым (например: количество × цена), или с формулами и полями выбора (тип услуги, опция, скидка)?
🔹 Google Calendar — синхронизация односторонняя (только показать занятые даты) или двусторонняя (создавать события в Google при бронировании)?
… 🔹 SEO-структура — нужна ли возможность редактировать мета-теги (title/description) в каждой языковой версии через админку?
🔹 Мультиязычность — три отдельных URL (например /pl, /ua, /by) или автопереключатель по языку браузера?
🔹 Хостинг — планируете разворачивать на своем сервере (VPS/Ubuntu) или желательно сделать деплой на готовом Node-хостинге типа Render или Vercel + Mongo Atlas?
🔹 Дизайн-макеты — они уже готовы в Figma, или нужно помочь с UI-системой (баннеры, таблицы, стили форм)?
После ответов я смогу оценить точный стек, объем работ и предложить поэтапный план реализации 💡
-
12618 63 1 Роман, доброго дня.
В чём главная задача сайта? Если нужно SEO от Гугла и GPT, предлагаю взять Next вместо Реакта, также по админке эти вопросы, для чего делать с нуля, можно взять Strapi.
Есть вопросы к формулам, уточните формулы их структуру, и тогда смогу сказать, можно ли будет их изменять в админке, возможно, вы имели в виду изменять параметры, которые есть в формуле, то это без проблем.
-
1212 7 0 Привет 👋
Я Руслан, full-stack разработчик с опытом создания адаптивных сайтов и админ-панелей на Node.js + React + TypeScript + MongoDB / PostgreSQL.
В вашем проекте вижу четкую логику, которую могу реализовать под ключ:
– backend на Node.js + Express с REST API, авторизацией, email-уведомлениями и интеграцией с Google Calendar;
– frontend на React + TypeScript с мультиязычностью (польский / украинский / белорусский) и адаптивным дизайном;
– удобная админка для самостоятельного добавления фото, видео, звука, таблиц цен;
– форма “заказать звонок” с thank-you страницей для Google Ads, интеграция с WhatsApp, Google Analytics и SEO-оптимизацией.
… Имею опыт создания подобных CMS-систем с возможностью расширения функционала (бронирование, калькулятор, статистика).
GitHub: github.com/RuslanZotsenko22
Готов обсудить детали проекта, сроки и стоимость — уверен, что смогу создать именно тот универсальный шаблон, который вы описали.
-
2041 21 0 Добрый день, хотел бы поработать над вашим проектом, стек реакт монго нест, у меня много написанного и протестированного кода, плюс у меня много шаблонов. Буду рад сотрудничеству.
-
9972 117 0 Здравствуйте.
Я разработчик NodeJS. Готов взяться. Пишите, обсудим.
-
556 1 0 Привет! 😉
Могу создать адаптивный сайт с простой админкой, чтобы вы могли самостоятельно добавлять фото, видео, аудио, тексты и таблицы цен без знания программирования.
Предлагаю реализацию на React + TypeScript для фронтенда и Node.js + Express для бэкенда, с базой данных MongoDB или PostgreSQL. Админка будет максимально простой и интуитивной: загрузка медиа, текста, таблиц цен, редактирование и предварительный просмотр.
Особенности:
Мультиязычность: польский (основной), украинский и белорусский; возможность редактирования текстов и медиа для каждого языка.
…
Медиа: фото, видео (MP4/YouTube), аудио (MP3) с ограничением размера и автоматической оптимизацией.
Калькулятор стоимости: отображается только при наличии, администратор может редактировать формулы и цены.
Календарь бронирования: синхронизация с Google Calendar, автоматическая блокировка занятых дат.
Форма обратного звонка и страница благодарности для отслеживания конверсий Google Ads, интеграция WhatsApp.
SEO и скорость: базовые meta-теги, заголовки, URL, оптимизация медиа.
Дизайн: минималистичный, белый фон, плавные переходы, полная адаптивность.
Бюджет ориентировочно 35000–45000 грн, срок выполнения – до 25 дней с учетом тестирования и интеграций.
Чтобы лучше понимать ваши приоритеты, хотела бы уточнить:
Калькулятор стоимости должен поддерживать сложные формулы с несколькими опциями, или достаточно базовой логики «количество × цена»?
Нужно ли, чтобы медиа сразу оптимизировалось при загрузке, или можно делать это пакетно через админку?
Буду рада сотрудничеству!
-
166 Добрый вечер! Готов взяться за ваш проект, работаю с этим стеком, можем обсудить все детали.
Актуальные фриланс-проекты в категории Javascript и Typescript
Разработка WebGL/Three.js сцены с генерацией и экспортом 3D (snapshot) из анимированного шейдераОписание объекта:Проект представляет собой дизайнерский стол, выполненный в форме реалистичного, глубокого водоворота (центральная воронка, которая плавно переходит из широкой горизонтальной столешницы в тонкую изящную ножку). Суть задачи:Требуется WebGL / Creative Coding… Javascript и Typescript, Веб-программирование ∙ 18 часов 14 минут назад ∙ 19 ставок |
Поддержка и развитие сайта клининговой компании
906 UAH
Ищу веб-разработчика / веб-мастера для долгосрочной поддержки и развития сайта клининговой компании. Сайт: https://donely.ca О проекте DoneLy Home Services — компания по предоставлению услуг уборки в Канаде, которая активно развивается и расширяет географию работы. Ищу… Javascript и Typescript, Веб-программирование ∙ 2 дня 20 часов назад ∙ 59 ставок |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 3 дня 21 час назад ∙ 27 ставок |
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 5 дней 11 часов назад ∙ 35 ставок |
Разработка платформы AM Mobility (автосервис, парковка, страхование, аренда автомобилей)
257 282 UAH
Ищем команду или опытного Full Stack разработчика для создания MVP платформы AM Mobility. AM Mobility — это единая цифровая экосистема для автомобилистов, объединяющая в одном приложении и веб-платформе: парковку; автосервис; шиномонтаж; автомойку; аренду автомобилей;… Javascript и Typescript, Веб-программирование ∙ 10 дней 18 часов назад ∙ 119 ставок |