Accomplishments
This week, I made a pivot in our web application approach as I migrated our frontend from Django to React. While Django was fine for initial development, we encountered performance issues with the real-time updates required when new images are captured and processed. The server-rendered approach was causing noticeable page reloads that disrupted the user experience. After analyzing these limitations, I implemented a React-based frontend that communicates with our backend API, allowing for seamless updates through WebSockets without requiring full page refreshes.
Additionally, I worked closely with Will and Dhruv on completing the integration pipeline. I assisted in debugging the MQTT communication between the hardware components and our backend services, particularly focusing on ensuring image metadata is properly transmitted and processed. We identified and resolved several edge cases, such as handling connection interruptions and ensuring data integrity throughout the pipeline.
I also dedicated some time to designing and producing the 3D printed housings for the Raspberry Pi Pico and battery pack. Using Fusion 360, I created custom enclosures that optimize for both protection and ergonomics. The battery pack housing was particularly challenging as it needed to balance size constraints. We are in the process of getting this printed.
Schedule
We’re now back on schedule with the React migration actually accelerating our development timeline. The component-based architecture has made it easier to distribute work among team members and iterate quickly on specific features. The integration pipeline is nearly complete, and we’ve begun comprehensive testing of the entire system. The 3D printed housings have also resolved many of the physical integration challenges we were facing.
Plans for next week
For the final week before our demo, I’ll focus on polishing the React frontend with final styling and UX improvement. I’ll also continue assisting with any final adjustments to the 3D printed housings based on testing feedback
Migrating from Django to React required rapidly acquiring new knowledge in several areas. When I encountered performance issues with server-side rendering, I needed to quickly learn React’s component lifecycle and state management approaches. Rather than following a traditional course, I adopted a project-based learning strategy where I rebuilt our key features in React one by one.
Learnings
For learning React, I primarily relied on the official documentation combined with specific problem-solving on Stack Overflow. I found that reading the conceptual documentation first, followed by practical implementation, helped solidify my understanding.
For the 3D modeling work, I had no prior experience with CAD software, so I utilized YouTube tutorials that specifically focused on enclosure design in Fusion 360. I also did some hands-on experimentation, creating prototypes to test dimensions and fitment.