Front page of the configurator
Here is the structure of the technical task for the front-end specialist, which describes the sequence of stages of the house configurator. It takes into account the logical order of selection and ways of interaction through checkboxes for option selection.
House Configuration - Step 1: Project Selection
1. Types of projects (Filter for selecting the type of house):
• Timber frame houses
• Glulam
• Saunas
• Garden houses
Note: The user selects one of the options, after which the system narrows the search by displaying the relevant projects.
2. Transition to project selection:
• After selecting the type of project, the user sees a list of available options. Projects need to be displayed as cards with an image and basic information (name, short description, price).
• The user selects one project, after which they proceed to the next step of the configurator.
House Configuration - Step 2: Option Selection
This stage will contain the following options for customizing the house. For each category of selection, there is an option to check one or more options where allowed.
This looks like a row of photos, where the user checks under the photos. In some items, 1 or 2 selections are allowed.
1. Window type (Select one option):
• Pine
• Oak
• Pine-Aluminium
2. Interior doors (Select one option):
• Solid
• Hidden Mounting
• None
3. Entrance doors (Select one option):
• Classic
• Pivot
• None
4. Wall filling (Select one option):
• Pir Panel (50 R-value)
• None
5. Cladding of external walls (Select 1-2 options):
• Artificial Stone
• (Shou sugi ban) / Thermal-Processed Plancken
• Stone or Clinker
• None
6. Smart home system (Select one option):
• Standard
• All-inclusive (Advanced)
• None
7. Audio system (Select one option):
• Standard Audio System
• None
8. Heating system (Select one option):
• Heat Pump with Fan Coils and Underfloor Heating
• None
9. Ventilation (Select one option):
• Smart Ventilation
• None
10. Decorative facade lighting (Select one option):
• Yes
• No
11. Kitchen (Select one option):
• MDF Plate with Artificial Stone
• Luxury Kitchen with Solid Wood or Veneer with Marble Countertop
• None
12. Bathrooms (Select one option):
• Full Set in Every Bathroom
• None
13. Roofing (Select one option):
• Faltz roof
• None
Step 3: Review and Confirm Selection
1. After completing the selection of all options, the user can review all selections made in a convenient summary view. For each parameter, the selected option and price (if any) are displayed.
2. The user can adjust any parameters by going back to previous steps or confirm the selection.
Technical requirements for the front-end:
1. Checkboxes: For all options, use checkboxes so that the user can select only one option in each category, except where "none" can be selected.
2. Logical transitions: After selecting each item, there should be a clear logic for transitioning to the next stage without the need for additional confirmations. Use smooth transitions between stages for comfortable navigation.
3. Reactive changes: The system should dynamically display the change in cost depending on the user's selection. The cost of each selection should be clearly marked next to the corresponding option.
4. Data saving: All selections should be saved, and the user should be able to return to them at any stage of the configurator without data loss.
https://skol-systems.com/project/
approximately like this
https://skol-systems.com/project/
приблизно так
-
2 days111 USD
2 days111 USD
Hello!
I am ready to write the configurator according to the specifications. Feel free to contact me.
======
-
1 day22 USD
599 4 0 1 day22 USD
Hello!
I am interested in the project.
I have about 3 years of experience in frontend development.
The final cost and deadlines will be determined after reviewing the technical specifications and design.
Please write to me in private to discuss the details.
I would be happy to collaborate.
Have a nice day!
-
7 days134 USD
3372 55 3 1 7 days134 USD
Good day. Should the front end be implemented in React or native js? Does the design need to be improvised?
-
7 days156 USD
1658 24 0 7 days156 USD
I work as an HTML layout designer. I perform HTML and CSS layout. I specialize in creating responsive websites and landing pages. I am proficient in HTML5, CSS3 (Sass/Less), JavaScript (jQuery). I have experience working with version control systems Git. I am ready to take on projects of any complexity. I speak English, Ukrainian, and Russian.
-
7 days178 USD
3698 111 3 5 7 days178 USD
Hello, Volodymyr!
I propose to implement the frontend using Vue.js or React.js (your choice). This will allow for reactive data processing and quick information display on the screen.
Sincerely, Yuriy
-
7 days178 USD
95572 1271 1 10 7 days178 USD
Hello. I have extensive experience with React/Node.js. Can I see the design?
-
1 day134 USD
4524 20 0 1 day134 USD
Hello,
we are the ITZeyz team specializing in web development. We have an extensive portfolio of work.
We can implement your project turnkey without any problems.
I suggest clarifying all the details in private messages.
Best wishes,
the ITZeyz team
-
7 days176 USD
1565 30 1 7 days176 USD
Hello, Vladimir! I have reviewed the technical assignment. Write to me, I am ready to start working right now.
-
6 days223 USD
4182 198 2 5 6 days223 USD
Good day. I am ready to implement on Laravel, please contact me.
Good day. I am ready to implement on Laravel, please contact me.
-
наступні опції для налаштування будинку
якщо було вибрано не будинок, то перелік опцій буде той самий, чи інший?
-
Volodimir N. Ssystems
все вважатиметься будинками.
сама логіка буде реалізована формулами в CFF плагіні та Google cloud і google sheets. тобто перший і другий крок це просто відфільтрувати щоб звузити користувачу гортання проектів. але вони всі однакові ці проекти тобто кожен проект має свої дані. чи це буде сауна чи будинок обидва вони мають вікна і двері і дах і опалення і тд. Отже відповідь: те саме для всіх
-
Volodimir N. Ssystems
зараз опублікую приблизно вигляд
-
було б чудово.
-
Volodimir N. Ssystems
-
вам надати результат у вигляді файлів чи треба інтегрувати на якусь адмінку?
фільтруваи по винно по якійсь дазі данних, чи буде враховуватись що на момент не вибраного кроку 1 та 2, на сторінку вигружаеться всі картки?
-
*повинно фільтрувати по базі данних чи по тому що є на сторінці?
-
Volodimir N. Ssystems
по базі данних
-
Volodimir N. Ssystems
припустимо є в базі данних 2 сауни , якщо вибрали сауна на першому кроці то на другому кроці вигружено з бд тільки 2 сауни відповідно, якщо вибрано фахверк і їх є в бд 5 шт то відповідно і вивантажує 5 відповідних зображень на другому кроці.
-
а ці сауни, будинки і т.д. це як окремі записи в вордпресс чи це json чи напряму з mysql інформація повинна братися?
-
Volodimir N. Ssystems
повністю все буде з гугл таблиць за допомогою cff api і гугл клауду
-
Volodimir N. Ssystems
сам конфігуратор писати не потрібно треба просто налаштувати стилі і зробити повністю гарний закінчений вигляд а натягнути його на адмінку cff Gcloud і тд то зробить той хто робить всі апі і тд
-
добре, а візуальний вигляд, макет чи посилання на варіант який вам подобається є, чи треба відштовхуватися від вигляду сайту що по посиланню ви надали?
-
Volodimir N. Ssystems
треба щоб було максимально зручно інтуітивно зрозуміло для користувача. цей конфігуратор несе орієнтовно- інформативний характер. вибір який зроблено користувачем повинен бути згенерований в ПДФ з зображеннями і з сумами
-
в будь-якому випадку потрібно бачити який кінцевий вигляд повинен мати результат який потім буде генеруватися в пдф.
-
Current freelance projects in the category HTML & CSS
Mobile version of the websiteHello everyone. We need to redesign the existing mobile version of the website according to the specifications: https://docs.google.com/document/d/1BVV0UGDTEDyZ-EUvFg0RAmEasGKcl6cnK_cBB4Urbko/edit?usp=sharing HTML & CSS, Web Programming ∙ 6 hours 55 minutes back ∙ 35 proposals |
Development of a Minecraft Java Seed Map / Seed Viewer for the websiteDevelopment of Minecraft Java Seed Map / Seed Viewer for the websiteProject Description A browser-based tool Minecraft Java Seed Map / Seed Viewer needs to be developed, which will work on our website and allow the user to enter a seed from Minecraft Java Edition and view an… C & C++, HTML & CSS ∙ 14 hours 50 minutes back ∙ 10 proposals |
Transfer of a small business card website with 58 pages from Joomla 1.5 to Joomla 6There is a small business card website made on Joomla 1.5 with 58 pages (if counted in two languages), which contains small texts with photos. One page has a table. Two pages have PDF files that take up the entire page in a frame. The site is made in two languages with a… Content Management Systems, HTML & CSS ∙ 22 hours 26 minutes back ∙ 32 proposals |
Redesign and relaunch of the Brovchak Family Dental Care clinic websiteRedesign and Relaunch of the Brovchak Family Dental Care Website http://brovchak-clinic.com.ua/ terms of reference from SEO expert https://docs.google.com/spreadsheets/d/17_WyPf3XVpzbuBjpJ7MNFs12QUL-aHv7iIbKudY-IEw/edit?gid=0#gid=0 https://miro.com/app/board/uXjVHXxFvIE=/About… HTML & CSS, Search Engine Optimization (SEO) ∙ 2 days 14 hours back ∙ 65 proposals |
I want to learn how to create websites for CS:GO/CS2I need a mentor who will teach me how to create a CS2/CS:GO server. I want to go through step by step via Discord/Zoom: hosting/VPS, server.cfg, maps, plugins, admin panel, ban system, Discord, website, and statistics. Language: Ukrainian or Russian. HTML & CSS, Web Programming ∙ 2 days 16 hours back ∙ 16 proposals |
Lvov