HomePlanner

HomePlanner is an interactive web application developed by AVADA MEDIA team, designed for visual and functional design of residential interiors in two-dimensional space. The configurator allows the user to visually model the structure of the future home, manage architectural elements and select interior solutions with the ability to instantly estimate the cost and area of the project.

Aims and objectives of the project

HomePlanner is designed as a tool for private users, designers and developers seeking to obtain a quick and visually accurate layout of the future home without the need to use complex CAD programs. The application is aimed at ease of use while maintaining deep functionality and configuration flexibility.

Main functionality

Home Planner provides a wide range of possibilities for modeling living space:

• Designing a house: The user can create multi-storey structures by adding the required number of floors and planning the arrangement of rooms with any shape and area.
• Placement of architectural elements: Intuitively add and customize windows, doors, and the choice of floor coverings – laminate or tile. This allows you to evaluate the visual appearance of the interior at different stages of the design process.
• Furnishings: The built-in library includes dozens of pieces of furniture and furnishings in a variety of styles, colors and textures. You can choose from living room, kitchen, bedroom, bathroom, dining area, and more, including chairs, beds, sofas, tables, bathroom fixtures, lighting, vases, and more.
• Realistic visualization: Using HTML5 Canvas and PixiJS, the configurator provides smooth rendering of the scene and dynamic updating of elements without loss of performance. All user actions are accompanied by instant graphical feedback.
• Project Parameter Calculation: During the design process, the user is shown the total floor area of the dwelling and the build cost is automatically calculated, including the selected materials and furnishings.

HomePlanner is created using a modern frontend stack:

• HTML, SCSS, JavaScript – basic interface technologies that provide adaptability and cross-browsing.
• HTML5 Canvas and PixiJS – a bundle that allows to realize high-performance 2D rendering and interactivity at the level of native applications.
• The use of SASS/SCSS allowed for a scalable and modular style architecture that flexibly adapts to functionality growth.

The application is fully functional in the browser, requires no installation and can be adapted to any device – from desktops to mobile tablets.

Result

The result is a flexible and intuitive tool that can meet the needs of a wide audience – from the end user to architecture and design professionals. Home Planner allows to visualize ideas, plan costs and make decisions in the early stages of design.

The project demonstrates AVADA MEDIA’s expertise in the development of highly interactive web applications, UI/UX design, as well as the ability to work with Canvas and PixiJS-based graphics engines to create professional digital solutions for real estate and interior design.