Introduction

Spaaaces is a cutting-edge web application that harnesses the power of modern web technologies to elevate the interior design experience. By leveraging the capabilities of React, Three.js, and other state-of-the-art libraries, Spaaaces offers a seamless and intuitive platform for users to create, customise, and explore 3D representations of their living spaces, all within the convenience of a web browser.

Technologies

• React - I leveraged this powerful front-end library to build a robust and responsive user interface, ensuring a seamless experience across various devices and platforms.
• Zustand - This lightweight and efficient state management solution allowed me to maintain a predictable and centralised state, simplifying the management of complex application data flows.
• Three.js - A high-performance 3D graphics library which enabled real-time rendering and manipulation of detailed 3D models, bringing virtual living spaces to life.
• React Three Fiber - A React renderer for Three.js which seamlessly integrates 3D graphics capabilities with React's component-based architecture, enabling the creation of highly interactive and visually captivating 3D environments within a web application.
• React Three Drei - A broad collection of helper utilities specifically designed for React Three Fiber, accelerating development and enhancing the app's functionality with pre-built components and abstractions.
• uuid - I employed this library to generate universally unique identifiers (UUIDs), ensuring reliable and efficient identification and tracking of unique elements within the application.

Architecture and Design Decisions

One of the key architectural decisions was the separation of the application into two distinct views: Floorplan View and Design View. This division was driven by the need to provide users with a streamlined and focused experience tailored to each specific task. The Floorplan View offers an intuitive and uncluttered canvas for users to create and manipulate their floor plans with precision, while the Design View immerses them in a richly detailed 3D environment, enabling them to bring their designs to life.

Key Features

Spaaaces features two seamlessly integrated modes: Floorplan View and Design View. The Floorplan View empowers users to effortlessly create custom floor plans on an expansive infinite grid canvas. Once the floor plan is finalised, users can transition to the immersive Design View, where they can bring their vision to life by applying textures to floors and walls, meticulously curating a collection of furniture pieces, and precisely positioning them within the virtual space.

Furthermore, Spaaaces offers the convenience of locally saving and retrieving scenes, enabling users to revisit and refine their designs at any time, as well as the ability to export the entire scene for sharing or archiving purposes.

Technologies

• React - A powerful front-end library I used to build a robust and responsive user interface, ensuring a seamless experience across a diverse range of devices and platforms.
• Framer Motion - Leveraged to infuse the portfolio with smooth animations and seamless transitions.
• Three.js - A high-performance 3D graphics library, used to create the 3D ASCII render of my name.
• React Three Fiber - A React renderer which seamlessly bridges the gap between React's component-based architecture and Three.js's powerful 3D graphics capabilities. Allowed me to incorporate immersive 3D elements into the portfolio with ease and efficiency.

Architecture Considerations

Recognising the ever-evolving nature of a developer's journey, I purposefully designed the project's architecture with scalability and extensibility in mind. As I continue to gain invaluable experience and embark on new endeavors, integrating future works and accomplishments into my portfolio becomes a simple and quick process.

The codebase is meticulously structured, enabling me to effortlessly introduce a new plain HTML document containing project details. Leveraging the power of React's component-based architecture, these additions will be automatically formatted and rendered with a consistent and visually appealing layout.

Furthermore, by leveraging the capabilities of Vercel as the deployment platform, any updates or additions to the codebase are automatically built and deployed, eliminating the need for manual intervention. This streamlined process ensures that my portfolio remains up-to-date, reflecting my latest accomplishments and maintaining a polished, professional presence online.