Ultra | 3D playground prototype



https://ultra.varvara.ca/

❔ About

The "Ultra" Prototype is a personal project where I explored the implementation of real-time multi-user collaboration for a 3D playground. With a weekend to spare, I embarked on the journey to bring to life some of the ideas that were discussed during a product ideation session with a leading tech company specializing in creating 3D development platforms and tools for building interactive, immersive experiences across various industries. The project demonstrates my ability to quickly prototype and test assumptions in code.

🔻 Goals:

➕ test the feasibility of a multi-user interactive UI with basic functionality of manipulating 3D objects in the limited timeframe of one weekend

➕ allow users to see other live collaborators' cursors, to rotate and change the color of 3D objects, updating the state for all collaborators in real-time

➕ utilize and learn the capabilities of existing libraries and frameworks in order to build the features in the shortest possible time

🌏 Why:

As a software developer with a curious and creative mindset, I have always been passionate about exploring new technologies and testing ideas through prototyping. When presented with the opportunity to experiment with a real-time multi-user interactive UI, I couldn't resist the challenge. This project allowed me to expand my skillset and showcase my ability to quickly learn and adapt to new technologies.

🍔 Tech Stack

The Ultra Prototype was built using the following technologies:

• React: A popular JavaScript library for building user interfaces, chosen for its component-based approach and strong developer community.
• Create React App: A boilerplate for quickly starting React projects, selected for its simplicity and pre-configured setup that accelerates development.
• React Three Fiber: A React renderer for Three.js, a 3D library, picked for its seamless integration with React.
• Zustand: A lightweight state management library for React, chosen for its minimalistic approach, documentation and ease of use, streamlining the state management process.
• Socket.io: A JavaScript library for real-time web applications, picked for its ability to simplify real-time communication between clients and the server.
• Express: A minimal and flexible Node.js web application framework for the back end, selected for its fast development process.

⏯ Final result

The outcome of this project is a functional prototype that demonstrates a basic 3D multi-user playground that was built and deployed in one weekend. The page features a single 3D object that rotates according to mouse movement, and its color can be changed by users. These changes are reflected in real-time for all users currently browsing the page. The focus of the project was to only test the feasibility of building such a playground, hence the minimum feature set and basic UI design. Access the desktop-only prototype at https://ultra.varvara.ca/. To fully experience the multi-user aspect of the prototype, please share the link with a friend and try it out together.

For the development team: My main focus for this project was to explore multi-user collaboration, something I had never done before. Although there is room for code improvement, I am proud of the progress made in just a couple of evenings. You can review the code on GitHub: https://github.com/varvarakronberg/ultra

💛 Conclusion

I hope that my Ultra Prototype serves as a source of inspiration and a testament to my passion for pushing the boundaries of my knowledge and skills in software development. I am eager to continue exploring new technologies and implementing working solutions in future projects.

👇 Links

🔗Try it yourself HERE. 🖥 Review code HERE.

👩‍💻 Have a coding project to solve -> Let's connect.

Thank you for reading! 💚