Full-stack разработка
31 439 UAHНужен full-stack разработчик, который свободен для дел и не захочет сразу разбогатеть на этом проекте.
Это мой тестовый сайт:
readyhome.ge
прототип которого я хочу сделать (не имею в виду дизайн). В футере русс.яз, заполните опросник и перейдите на конфигуратор.
Вот описание сайта:
Пользователь:
Заполняет параметры объекта.
Выбирает стиль интерьера.
Конфигурирует материалы и элементы отделки по помещениям.
Получает предварительную стоимость ремонта и инженерных систем.
Платформа должна визуально напоминать современный конфигуратор/конструктор с логикой интернет-магазина.
1. Пошаговый конфигуратор
Конфигуратор состоит из 5 этапов:
Параметры объекта
Выбор стиля
Конфигурация интерьера
Инженерные системы
Результат и итоговая стоимость
На всех этапах отображается:
текущая стоимость ремонта
базовая стоимость
стоимость материалов
инженерия
дополнительные опции
итоговая сумма
2. Этап «Выбор стиля»
Пользователь выбирает готовый стиль интерьера.
Примеры:
Скандинавский
Лофт
Неоклассика
Для каждого стиля:
изображение
название
краткое описание
Стили должны управляться из админки.
3. Этап «Конфигурация интерьера»
Главный экран платформы.
Логика
Пользователь выбирает помещение:
гостиная
спальня
кухня
санузел
студия
После выбора помещения открывается конфигуратор материалов и элементов.
4. Витрина материалов
Справа отображается витрина товаров и материалов.
Для каждого товара:
изображение
название
бренд
производитель
размер
цвет
цена
При клике товар увеличивается в popup.
Товары выводятся по категориям:
стены
пол
потолок
освещение
двери
плинтуса
сантехника
радиаторы
выключатели и т.д.
Для каждого типа помещения свой набор категорий.
5. Логика выбора
Пользователь может:
выбрать материал
заменить материал
отключить отдельные элементы
добавлять дополнительные опции
При изменении материалов стоимость пересчитывается автоматически.
6. Инженерные системы
Отдельный этап с:
базовым инженерным пакетом
дополнительными инженерными опциями
Примеры:
теплый пол
кондиционирование
видеонаблюдение
защита от протечек
умный дом
Часть опций входит в базовую стоимость.
7. Итоговый экран
Выводится:
общая стоимость
разбивка стоимости
выбранный стиль
параметры объекта
список материалов
инженерные системы
дополнительные опции
Также:
кнопка оставить заявку
кнопка сохранить расчет
возможность отправки менеджеру
8. Админ-панель
Необходима возможность управления:
стилями
товарами
категориями
ценами
коэффициентами калькуляции
инженерными пакетами
дополнительными опциями
Все основные значения должны редактироваться без участия программиста.
Для такого конфигуратора база данных должна строиться не как обычный сайт, а как структура e-commerce + параметрический калькулятор.
Иначе при добавлении материалов, формул и стилей система быстро сломается.
Главный принцип:
разделить систему на 5 независимых модулей
1. проекты пользователей
2. каталог материалов
3. конфигурация интерьера
4. инженерные пакеты
5. калькуляция
---
1. Общая архитектура базы
Правильная схема должна выглядеть так:
USERS
PROJECTS
PROJECT_ROOMS
PROJECT_BATHROOMS
STYLES
STYLE_ROOMS
STYLE_DEFAULT_MATERIALS
PRODUCTS
PRODUCT_CATEGORIES
PRODUCT_ATTRIBUTES
PROJECT_SELECTED_PRODUCTS
ENGINEERING_PACKAGES
ENGINEERING_OPTIONS
PROJECT_ENGINEERING
PRICE_RULES
PRICE_COEFFICIENTS
Это модульная архитектура.
---
2. Таблица USERS
Пользователи системы.
users
-----
id
name
phone
created_at
Пользователь может иметь несколько проектов.
---
3. Таблица PROJECTS
Основная сущность.
projects
--------
id
user_id
property_type (apartment / house)
frame_type (white / black)
total_area
balcony_area
balcony_tiles
gas_available
kitchen_type
rooms_count
bathrooms_count
base_price_S
status (draft / calculated / ordered)
created_at
Это ядро проекта.
---
4. Таблица PROJECT_ROOMS
Комнаты создаются динамически.
project_rooms
-------------
id
project_id
room_type
(living_room
bedroom
studio
kitchen
bathroom
balcony)
area
Пример:
Гостиная — 44 м²
Спальня — 16 м²
Кухня — 24 м²
---
5. Таблица STYLES
Три базовых стиля.
styles
------
id
name
description
preview_image
Пример:
1 Scandinavian
2 Loft
3 Neoclassic
---
6. Таблица STYLE_DEFAULT_MATERIALS
Материалы по умолчанию для стиля.
style_default_materials
-----------------------
id
style_id
room_type
category_id
product_id
Пример:
Scandinavian
room: bedroom
floor: oak laminate
Это позволяет автоматически заполнять конфигуратор.
---
7. Таблица PRODUCT_CATEGORIES
Категории материалов.
product_categories
------------------
id
name
room_scope
Пример:
Walls
Accent wall
Floor
Doors
Lighting
Switches
Radiators
Plinth
Cornice
---
8. Таблица PRODUCTS
Все товары из гипермаркета.
products
--------
id
category_id
name
brand
manufacturer
price
unit
(m2
piece)
image
description
Пример:
Ламинат дуб
$18
m2
---
9. Таблица PRODUCT_ATTRIBUTES
Характеристики товара.
product_attributes
------------------
id
product_id
attribute_name
attribute_value
Пример:
цвет
размер
толщина
---
10. Таблица PROJECT_SELECTED_PRODUCTS
Товары выбранные пользователем.
project_selected_products
-------------------------
id
project_id
room_id
category_id
product_id
quantity
calculated_price
Например:
project 12
room bedroom
floor laminate
price = 620$
---
11. Таблица ENGINEERING_PACKAGES
Базовая инженерия.
engineering_packages
--------------------
id
name
included
price
Пример:
Electrical wiring
included
Leak protection
included
---
12. Таблица ENGINEERING_OPTIONS
Дополнительные опции.
engineering_options
-------------------
id
name
price
unit
(piece / project)
Пример:
air conditioner installation
$220
---
13. Таблица PROJECT_ENGINEERING
Что выбрал пользователь.
project_engineering
-------------------
id
project_id
engineering_option_id
quantity
price
---
14. Таблица PRICE_RULES
Формулы калькуляции.
price_rules
-----------
id
rule_name
room_type
category_id
formula
Пример:
floor_laminate
(area * (price + 2))
---
15. Таблица PRICE_COEFFICIENTS
Постоянные P.
price_coefficients
------------------
id
name
value
Пример:
balcony_tile = 75
laminate_underlay = 2
tile_glue = 10
tile_glue_heated = 21
---
16. Таблица BASE_PRICE_S
Базовые цены.
base_prices
-----------
id
area_min
area_max
price_S
Пример:
20-30 = S1
30-40 = S2
40-55 = S3
---
17. Как работает калькулятор
Алгоритм:
1 пользователь вводит площадь
2 система выбирает S
3 добавляет коэффициенты P
4 добавляет выбранные материалы
5 добавляет инженерные опции
---
18. Почему эта архитектура правильная
Она решает три проблемы.
1. легко добавлять материалы
Без изменения кода.
---
2. легко менять формулы
Через админку.
---
3. легко добавлять новые стили
---
19. Как выглядит связь таблиц
users
↓
projects
↓
rooms
↓
selected_products
↓
products
↓
categories
И отдельно
engineering
---
20. Самая важная рекомендация
Не хранить формулы в коде.
Хранить в таблице:
price_rules
Иначе через год система станет неуправляемой.
Рекомендуемый стек проекта (можно приемлемые альтернативы):
Frontend:
React
Next.js
TypeScript
Tailwind CSS
---------
Backend:
NestJS (Node.js)
TypeScript
---------
База данных:
PostgreSQL
----------
Хранение изображений материалов:
Amazon S3 или Cloudflare R2
----------
Админка:
React + готовая внутренняя CMS или
Strapi (если нужен быстрый запуск)
-----------
Авторизация
JWT
------------
Хостинг:
VPS (Hetzner) или
DigitalOcean
-
full-stack разработчик, который свободен для дел и не захочет сразу разбогатеть на этом проекте - 👍👍👍
-
Огооо, лютоо!
-
Какой срок реализации проекта?
-
Актуальные фриланс-проекты в категории Javascript и Typescript
Верстка React/Tailwind компонента для друка бланка А4Необходимо исправить UI/UX дизайн и геометрию одного React-компонента (шаблон клинической карты для печати в PDF) Весь функционал, массивы данных и логика уже написаны и работают — нужна чисто косметика, правильные отступы и позиционирование элементов с помощью Tailwind CSS… HTML и CSS верстка, Javascript и Typescript ∙ 6 часов 1 минута назад ∙ 43 ставки |
Ищу опытного Full Stack разработчика для создания SaaS-сервиса для интернет-магазинов.Идея сервиса: Клиент загружает ссылку на свой товарный фид (XML или CSV). Сервис автоматически получает товары, берет их фотографии и создает новые рекламные изображения по готовым шаблонам: цена, скидка, логотип, акционные плашки и т.д. Также в сервисе должен быть простой… Javascript и Typescript, Веб-программирование ∙ 1 день 3 часа назад ∙ 74 ставки |
Разработка WebGL/Three.js сцены с генерацией и экспортом 3D (snapshot) из анимированного шейдераОписание объекта:Проект представляет собой дизайнерский стол, выполненный в форме реалистичного, глубокого водоворота (центральная воронка, которая плавно переходит из широкой горизонтальной столешницы в тонкую изящную ножку). Суть задачи:Требуется WebGL / Creative Coding… Javascript и Typescript, Веб-программирование ∙ 1 день 23 часа назад ∙ 29 ставок |
Поддержка и развитие сайта клининговой компании
906 UAH
Ищу веб-разработчика / веб-мастера для долгосрочной поддержки и развития сайта клининговой компании. Сайт: https://donely.ca О проекте DoneLy Home Services — компания по предоставлению услуг уборки в Канаде, которая активно развивается и расширяет географию работы. Ищу… Javascript и Typescript, Веб-программирование ∙ 4 дня 1 час назад ∙ 63 ставки |
Разработка сайта по ТЗ на FramerНеобходимо сделать сайт по этим параметрам, что в ТЗ https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Назовите реальный рейд на основе этого дизайна HTML и CSS верстка, Javascript и Typescript ∙ 5 дней 2 часа назад ∙ 28 ставок |