Modero Cafe

logo
dark mode
light mode

Inspiration

We wanted to create the Modero Café because as college students, we spend most of our time on our computers studying and working on projects. We knew that we loved using apps, websites, and playlists that aided us when studying, but we wanted to make a website that not only helped us when completing projects but incentivized us to log on and use it more.

What it does

The Modero Café is a website that allows you to listen to music, keep track of tasks using a todo list, as well as use highly effective study methods like the Pomodoro technique to improve your productivity and efficiency as students. https://vimeo.com/789509433/0da8efc6e3

How we built it

We used HTML, CSS, and Javascript to create our project. We started out by determining what components we wanted to include in our study hub. We then added elements such as a gaming component where users can accumulate points as they study. There is also the option of a to-do list to keep track of assignments and a timer to track study time. The user can change the mode from light to dark. If they are feeling a little discouraged to study, they can click the espresso button on the top right and a recognized quote by a notable woman will appear. These quotes are randomized with each click. We also embedded a Spotify playlist of lofi-music to make studying more enjoyable and efficient because in our experience as students, lofi music has helped us work with more intent.

Challenges we ran into

We ran multiple challenges as we progressed. The most notable challenge was getting different components of the website to interact with the user and the other features. We had trouble with debugging as we had some last-minute errors.

Accomplishments that we're proud of/What we Learned

As beginning hackers, we learned how to create a project from start to finish from scratch in a concise amount of time. We are also beginners to javascript, as we had only created basic, static HTML sites with CSS styling. Learning how to add interactive elements to our project really elevated the feel of our user experience. We also had a bug in our To Do List where the cloned task divs that appear in the list section wouldn't disappear when pressing the "trash" icon. Fixing that bug took a lot of effort and when we finally fixed, it, brought our project together.

What's next for Modero Cafe

We want to expand the Modero Café to be able to have users log into their own accounts so that they can save all their progress and customizations that they earned for their café. We also want to add more customizable features to the café so that the users can choose to add more drinks to their café menu as well as a bakery. Eventually, we would also want to add more story elements to the website with customizable characters, and pets to make your experience in the website more interactive and immersive. To further create a more immersive experience with the café, we soon want to improve the website by making the café 3D with animations for the characters and objects within the website.