Cabin Connect

flight information page
main entertainment page

Inspiration

Have you ever gotten onto a long flight alone? Are you too shy to talk to the strangers next to you? Are you a CS major who only interacts with others through discord or twitch chats? Well we have a solution for you. Imagine an infotainment system on a plane where you can, not only watch movies, but you can watch them with others.

What it does

This infotainment system provides an exceptional user experience through the ability to not only stream movies, but also host watch parties on a plane. Gone are the days where you have to watch your movies alone if you don’t bring friends on a flight. Now, with cabin connect you can host a watch party with the other people on your flight, featuring a real time chat feature and video syncing. Additionally, an infotainment system can’t be called an INFOtainment system without a bit of information on the flight. Our application also features a 3d rendering of the globe with the plane’s flight path plotted on top with the current progress of the trip displayed through an image of the plane on the path.

How we built it

We built our frontend with Astro.js and Svelte. We took advantage of the MovieDB.org to get a list of all the movies available on our website as well as metadata (parental conduct, release date, etc.) and the Youtube API to fetch trailers for movies since we couldn’t potentially show actual movies. We stored data pertaining to users, comments and watch parties in MongoDB. We also incorporated Gemini to empower our app with movie recommendations for the user. We used Blender and three.js to map out the trip on 3D globe on our flight info page.

Challenges we ran into

One of the biggest challenge that we ran into was most likely the steep learning curve for the freshman on the team because they were using techniques that were foreign to them for the most part. The other main challenge was getting the YouTube API to play nicely with the rest of the program, and work as intended while allowing us to sync the videos of different people in a watch party.

Accomplishments that we're proud of

Accomplishments that we are most proud of would be how we were able to create a full stack web application with 3-D renderings, functioning API calls, data base usage, and user input within a mere 24 hours even with two inexperienced freshman. Additionally, we were able to style the webpage to the best of our abilities with eye catching aesthetics and colorful buttons.

What we learned

We learned about a very useful coding platform in VScode called Live Share where many people can work together, practically on the same computer similar to google docs. Furthermore, we also learned how to apply svelte and threlte (three.js framework for svelte) in order to make a bulk of the website. We learned about the different challenges of creating a user experience that updates in real time with constant input from the the users, and finally, we learned how to work as a teamsvelte and grow as software developers.

What's next for Cabin Connect

Next steps for cabin connect would be to implement it in large scale companies such as American Airlines. This would greatly benefit the user experience because they would have an upgraded infotainment system, and they would be able to watch movies with others or even their own loved ones in case they are seated separately.