Room-Me was created for Gracehacks Hackathon 2022
Nishan Lama, Pichy Jumpholwong, Marina Lee, Zephyr Jones
We were inspired by thinking of problems students have at this school, and one of the biggest problems is the housing crisis. Students who were attending school during the pandemic, being away from home, and overall struggling with housing find it tough to find compatible roommates to apply to housing with. Thus, we decided to create Room-Me to combat that unfortunate situation.
This website, Room-Me, allows students to create an account and input their information in order to be matched with other UCSC students to figure out who they can become roommates with them.
We first began a google doc to list out possible ideas we want on our website. We then searched for color palettes and references that we could possibly include. Then, we created a Figma prototype and made separate pages corresponding to the different pages we would have on our website. Each page on Figma has it’s own functionality, text, colors, art, etc. Having this on Figma allowed us to easily know what we needed to program. After, we created the HTML/CSS in Repl.it starting with the skeleton so that when everything was implemented we could easily styilize it. In terms of teh art, it was created through Procreate (using a finger) because we did not have an Apple Pencil.
We later began developing our website by having functions through the implementation of user’s being able to log in through their Google account. This meant switching over to Visual Studio Code so that we were able to access this function. Functions in all files would allow users to click buttons to go to following pages or a new landing page.
We faced lots of challenges such as making the website compatible for mobile devices as when the screen size changed on a phone, the text and images would overlap which was not readable. Initially, we also were going to use Atom or Visual Studio Code (prior to switching), but because a member spilled a drink on their laptop, we wanted them to somehow be able to still collaborate therefore we decided to begin our project on Repl.it. Additionally, coming up with an idea in general was difficult as we did not want to spend the entire time brainstorming and designing. If we had more time, we would definitely list out all ideas and discuss them into more detail, however, with only 24 hours, we had to stick with an idea fast. If we did have time, we would have brainstormed ideas that empowers people and picked a project that can be improved aside from what may already exist in another form within 24 hours.
Overall, we are proud of the amount we have in general. With 24 hours, or even less considering the fact that we have to create a video, we are proud that we got text, fonts, and colors in that were able to be clear and easy to look at.
In terms of technicality, we learned that creating our own art was the best way to go as it allowed us not to waste time trying to find images that matched our idea that was free to use. Instead, we created our own art in Procreate which helped us further develop other palette in the website. We also learned that because we wanted students to create an account using their google account, collaborating in Visual Studio Code would be easier as it allowed for that usage.
Hopefully, we can further implement a better matching algorithm by adding more filters and possible interests prior to matches occurring. That way, more accurate results can occur and students can meet people who have similar interests and personalities as them.
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openTo create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.