Inspiration/Problem
In today's world, everyone has their own preference about their study/relaxation environment. Our team found that we all listen to lofi music while looking at ambient backgrounds in those abundant youtube live streams. These types of environments reduce stress and distractions, resulting in enhanced focus and quality study sessions. However, we all found one issue with these live streams: there is no customizability to the environment. Listening to the same genre of music while looking at the same background can often make people bored and limits the variability in regard to the person's preference. This is where Ambifyy comes in!
What it does
Our solution, Ambifyy, is a web application that allows users to customize their environment with unique backgrounds, sound effects, and music selections. Using . Once users first enter Ambifyy, they can choose a background out of the many options to fit their comforts/wants. After finding a relaxing background, users are taken to another page that provides with more customizability. With the background set on their device, users can choose to add different sound effects (wind, rain, fire, etc) in addition to a dropdown with a soundtrack player. Realizing the importance of customizability, we have implemented many features to give users the perfect experience. Finally, users can fullscreen the website and enjoy their relaxing experience! With Ambifyy, users will create their own environment that provides them with the perfect atmosphere!
How we built it
Our team began by designing the application on a collaborative whiteboard, planning out the website's layout, and finalizing all the features we'd like to add to the application. To build the website, we created a React Application, using HTML/CSS and Bootstrap 5 for the frontend and JS for the backend. For our backgrounds, we used royalty-free 4k GIFS and for the audio clips, we used royalty-free live streams found on Youtube and sound effect websites.
Challenges we ran into
The biggest challenge we first ran into was finding a way to code together in real-time. We knew from the beginning that with all the packages we had installed and the frequent commits we would be making, working through GitHub would prove difficult. Luckily, we found a way to code together using VS Code Liveshare which made our programming experience much more effective and fun.
Accomplishments that we're proud of
We are very proud that we were able to add all the features we initially devised, while significantly improving the look and user-friendliness of the website. We are also happy we were able to expand the website from simply being able to customize your own backgrounds to adding a profile section that transformed the website into a social platform, allowing users to add their own backgrounds and sounds.
What we learned
The most important thing we learned was working with React Apps as no one on our team had worked with React before and we quickly picked up on how to integrate React with tools we were already familiar using such as Routing and Bootstrap. We also learned how to easily collaborate while coding and streamline the creation of our application through the use of external libraries and online sources.
What's next for Ambifyy
In the future, we would like to flesh out the profile section of the app so users can do more with their accounts and also make the website public so we can form a larger user base.
Log in or sign up for Devpost to join the conversation.