RecRoom

our intro page
add your recs page
enter your favorite tv shows and movies
your personalized site!
your shareable tv show recommendations

Inspiration

Friends are constantly asking each other for their book, movie, tv show, and song recommendations, posting question boxes on their Instagram story or to Twitter threads. The media that you consume shapes and defines who you are, and our team wanted to put this on display through our recommendation-sharing site, RecRoom. Inspired by social-forward apps like Beli (restaurant suggestions), Letterboxd, Goodreads, and viral sites like Receiptify and Verse's Internet Bedroom, RecRoom is the shareable, all-in-one hub for the things you call your "favorite".

What it does

Users can visit the RecRoom mobile website and add up to 8 recommendations for three categories — movies, TV shows, and songs — which generates a designed site that you can share with your friends every time they ask you for those recs.

How we built it

Our project was certainly design-oriented and user-forward, given that we had a UX designer on our team. We started out by creating low-fidelity wireframes on Figma, then making high-fidelity designs, and using tips from MHL's Figma Workshop to use Dev Mode to begin building the site with HTML, CSS, and JavaScript. We used node js as a package manager to implement functionality such as TV/movie lookups with the TMDB API, dotenv implementation, and hosting with express.js. We hosted the website on Vercel!

Challenges we ran into

Styling and positioning our elements using HTML and CSS were an extreme challenge. Our engineers, who mainly worked in back end, wanted to dive a bit into front-end to break out of their comfort zone — which they definitely did. Centering, padding, and spacing was difficult to perfect and match up to the Figma mocks, and it took a lot of trial and error to fix. One large issue was figuring out how to pull the images from the databases and put them behind the text in the containers, which repeatedly messed up the layout.

Accomplishments that we're proud of

We’re super thrilled to have finished a first version of our product! We successfully connected the database of movies, TV shows, and songs to the front end code, blending all of our individual work together to create a site that we’re excited for our friends to try. We’re also glad we were able to figure out how to display our top 3 results as a background image and text overlay, which really enhanced the design and emphasized the link between the backend work with databases and front end work with design!

What we learned

RecRoom brought our team several valuable learning experiences. We insisted on getting out of our comfort zone today, coding in languages we weren't used to and taking on the challenge of front-end engineering. Our developers learned how to facilitate the handoff process with a designer and engage in the iterative design-to-dev procedures that followed. Our designer learned how to code in HTML and CSS and saw through the perspective of an engineer, since the mockups were made with the intent of development and being functional.

What's next for RecRoom

Our team, RAMS (Ryan, Angelo, Megan, Sophia) would absolutely love to move forward with this project to include additional features, such as a recommendation section for books, restaurants, and gaming, login/usernames and authentication, and unique URL generation so people can put them in their Instagram bios or LinkTrees! In the future, it would be amazing to build an interactive social feed, add friends, or even integrate an AI chatbot that recommends media for those moments you when you "don't know what to watch"! We're also excited to polish this project and market a v1 version of this site soon to friends, classmates, and the online world in general, as a fun, personalized activity to do on the Internet (like Receiptify or Internet Bedroom!)