This week, I wrapped up the project website, which was built using React.js. The site is designed to be clean, responsive, and easy to navigate, with four main sections: a landing page, a course directory, individual course pages, and a location page that includes both an interactive map and a virtual tour. The layout is inspired by UAL’s existing design system to keep things familiar for users—especially prospective students.
The chatbot is built right into the site and always available in the bottom-right corner, so visitors can get course or campus information without switching pages. The chatbot and the Matterport virtual tour are embedded using React hooks and iframes, keeping everything smooth and in one place.
The site is now live on Genezio, and all the key features, virtual tour, chatbot, interactive map, and course details, are fully integrated.
Website: Virtual tour and chatbot embedded and ready to be used.
After finishing that, I shifted gears and started reviewing my thesis and project files to get everything ready for the final submission deadline.
In this final stage of the project, I built a full-stack RAG (Retrieval-Augmented Generation) system that combines content retrieval, semantic search, and natural language generation. The implementation is based on the excellent tutorial Build a Full Stack RAG System with React, Langchain & Node.js by notJust․dev. The tutorial was essential in guiding the architecture and agent design of my chatbot, which is focused on delivering accurate course information.
While the original tutorial is centred around retrieving answers from YouTube transcripts, my implementation adapts the same principles to a different use case: scraping and processing publicly available content from the Creative Computing Institute’’’s website. For step-by-step details, I also referred to the companion Notion guide, which was incredibly helpful throughout the build.
Over the previous weekend, I managed to successfully scan the entire 5th floor of the CCI building using the Matterport Pro 3 camera.
Below is the floor plan showing all the scanned areas.
Start of the scanning process.End of the scanning process.
The scans were uploaded and rendered in the cloud overnight. On Tuesday (06/05/2025), I received access to the high-resolution tour from Lieven, who also gave me editing permissions.
Access to the rendered scan provided via email.
The first step in editing was to check the alignment and make sure the navigation between spaces was smooth and accurate. I then ensured that no brand logos or people were visible in the images. After that, I used the blur tool to cover up some noticeable marks on the walls.
Blurring visible marks on the wall. [1]Blurring visible marks on the wall. [2]
Finally, I added tags and extra information to highlight key areas such as the technical labs, study areas, toilets, and more.
Adding tags to highlight key areas in the scan. [1]Adding tags to highlight key areas in the scan. [2]
Each tag includes a title and description to help users understand its purpose. I also added useful links to certain tags, such as lockers, laptop lockers, printers, and equipment in the Physical Computing and e-Textiles labs. This extra information aim to support not just prospective students exploring the space, but also current students who may be using these services for the first time.
Adding description and helpful links for student locker facilities. Adding description and helpful links for the printer.
After that, I noticed that the tag navigation was jumping randomly from one room to another, which made the experience feel disjointed. Fortunately, the editing system allows you to rearrange the order of the tags. After organising them logically, the final result felt much smoother and intuitive.
Reordering tags to improve tag navigation flow.
After reordering the tags, I explored the highlight feature in Matterport. Highlights offer a quick preview of key areas, allowing users to either begin the tour from these spots or browse through them for a guided overview.
Editing the Physical Computing Lab highlight.Adding a highlight for one of the classrooms.
Below are some of the highlight previews I created for the CCI virtual tour.
Highlight for Physical Computing Lab.Highlight for the Study Areas.Highlight for the kithen.Highlight of the laptop lockers.Highlight of one of the classrooms.
The Matterport platform also enabled the creation of distinct viewing experiences through its multiple-view layer feature. The main tour layer includes all embedded informational tags and interactive features, designed for comprehensive user engagement. For users preferring an unobstructed exploration of the CCI’s digital environment, a ‘No Tags View’ was added. This provides a streamlined virtual tour focused only on the spatial experience, without additional informational overlays.
“Main View” layers.“No tags view” layer.
Here’s the final version virtual tour ~ visit it here.
Here’s a preview of when I tried embedding the tour into a webpage ~ view it here.
In Week 8 (28/04/2025), I presented my final project as part of the formative assessment.
The feedback I received was highly valuable. My supervisor pointed out that I had overlooked the potential disadvantages or limitations related to implementing the course information chatbot. Additionally, they suggested expanding on how the concept could be adapted for other contexts, such as student induction processes or interactive experiences in art galleries. These comments gave me important direction for refining and strengthening the project’s scope and impact.
On Wednesday (30/04/2025), I visited the kit room to check the availability of 360 cameras for creating my virtual tour. While they didn’t have any 360 cameras for loan, the staff informed me that they had a Matterport camera, which had been used the previous summer to scan most of the CCI building. However, the virtual tour was never published because the fifth-floor scan wasn’t completed.
They mentioned that if my scan was successful, they would be happy to include it as part of their official virtual tour. The staff were incredibly supportive and, despite normally not loaning out this equipment to students, they made an exception for my final project, on the condition that the camera stayed within university premises.
On Friday (2/5/25), I had a Matterport induction session with Lieven. During the session, I experimented with the camera, first by placing a few scan points and later adding more to build a fuller virtual walkthrough. You can see both versions of the scan below.
First trial using fewer scan points.Second trial adding more scan points.
Lieven was very helpful throughout the process, offering practical tips and guidance. He showed me how to avoid reflections that could reveal people in mirrors or glass, and advised me to use UAL branding on screens to make the tour look more professional and clean. His feedback really helped improve the quality and visual appeal of the scans.
On Saturday (03/05/2025), I successfully scanned the entire 5th floor of the CCI building using the Matterport Pro 3 camera. Before starting, I took time to clean and tidy up the facilities to make sure everything looked presentable. I began scanning at 2 PM and finished around 5 PM.
Capturing a room during the scanning process.
Originally, the virtual tour was scheduled to be developed after the chatbot. However, once I gained access to the Matterport camera and platform, the process became much quicker than expected. This allowed me to complete the tour earlier and shift my focus to the chatbot afterwards. To reflect this change and stay aligned with upcoming deadlines, I reviewed the initial Gantt chart. The revised version below captures this new timeline and helped me stay on track throughout the project.
