HACKBEANPOT 2023 -- ROOMMATE HUB https://devpost.com/software/roommate-hub?ref_content=user-portfolio&ref_feature=in_progress
Created by : Ananya Radhakrishnan Hamsini Malli Grace Fleming Mahek A Khushi Patel Anvitha Nekkanti
Our project is a roommate hub web application which is a space for roommates to organize their data. It contains a calendar to keep track of events, a grocery budget list which computes how much each roommate owes based on the groceries they need, a spotify playlist, contacts, and sprites. These sprites are icons that are specialized to each roommate, they can be creatures/plants that grow as the roommates become closer and grow in their relationship. They can gain points by completing chores, making calendar events, paying any money owed, or simply by adding/using the roommate spotify. For now, these icons were coded by using react and the MUI component library after being drawn by one of our front-end developers, but in the future, we hope to use an animation library to animate our sprites and have them grow as they gain points.
We coded our project using React, JavaScript, TypeScript, HTML and CSS. Most of our members didn’t have much experience with these languages so we were able to learn as we went along, and use mentor guidance. Our front end developers developed wireframes by using Figma and Adobe Illustrator for the design of some components/sprites.
We started by brainstorming many ideas, from a heartbeat tracker that would wake up a user when their heart beat was higher, to a BeReal for food to help users who forget to eat. We sketched out our ideas on a whiteboard, and thought about the languages/components we would use. We decided on the roommate-hub app because we believed that it would be the most feasible in the timeframe we had, as well as be more interactive and useful. Our next step was designing the data structure of our project and planning a timeline. We were hoping to use databases for the back-end so we wanted to learn more about the following frameworks: MongoDB, postman, express, mongoose, and django. Our first challenge was deciding what languages/framework we should use, and how we would be able to learn and use these on our own. After discussing with many mentors, we decided to focus on the front-end, as we heard that it would be very difficult to incorporate these for an app that should be more interactive and front-end heavy. However, in the future we plan to create a user authentication mechanism and store each roommate in a database so they are able to access the web app on their end. We had some challenges along the way, especially regarding Git merge conflicts. We were able to resolve these by using mentor guidance and resources. We were also navigating Material User Interface library, but were able to incorporate components that were the most similar to our figma design.
Our team gained a lot of experience in multiple new languages and applications, such as Git and React, as well as the experience of working in a team. Many members’ only experiences with teamwork was 2-person partner-programming, and having a larger group of 6 made it both convenient and challenging to create a project. We learned how to “divide and conquer” multiple aspects of our project in smaller teams, and then come together to merge all of the sections together. We split our team into front-end and back-end developers, but we found that constant communication between the groups was key, especially since they work together to make a viable product. We found this to be a good balance of independent work, like sticking to a timeline and overcoming challenges in the code, and teamwork, in the combining of each section and teaching each other how our code works.
We wanted the project to be designed as we had designed the Figma project initially, however we weren’t able to achieve all of our goals in the 48 hours. In the future, we would better implement the Price Splitter to be divided into multiple categories, show the total costs for each roommate, and display the receipts for grocery trips. We also planned to create a login for each roommate as a security and personalization feature. Additionally, the idea of the sprites would be improved upon and the points system would be implemented as encouragement for each roommate to use their hub. We would love for this to be used for roommate groups as a centralized hub for planning events and tracking finances, so we hope to host this as a web-app in the future.