studylull

Inspiration

The inspiration for Studylull came from the late nights we spent studying for exams. Neither of us took study breaks that often (as it usually ended up with a bathroom break or us just starting out work because we had nothing to do). We needed a space to unwind from the stress of exams.

What it does

Our site contains multiple pages that the user can interact with to create a better studying experience, with more emphasis on ways to relax during study breaks. Studylull provides various relaxing activities to occupy study break time and promote healthy studying. The site includes onscreen animations for breathing exercises, interactive jigsaw puzzles, a generator for tasks and fun facts, an embedded Spotify music player, and a distraction-free study page with a timer.

How we built it

We started planning our site with a wireframe created on Figma, which we used to structure the layout of our actual site. We used HTML5 and CSS3 to create the front-end of our site, and used JavaScript for the backend to make our site more dynamic.

Challenges we ran into

We ran into challenges with the breathing animation and syncing the numbers to the changing circle. The animation often lagged or skipped numbers, but we eventually got all parts of it working. Additionally, we ran into issues trying to get the CSS to space elements correctly, which we resolved through trial and error.

Accomplishments that we're proud of

We are proud of the UI design, the animations on the home page, and the Spotify embedded player the most. We also take pride in the jigsaw puzzle, as that was difficult to code at the beginning, but it is now functional.

What we learned

We learned that it’s very important to name variables accordingly with their function and that clean code is key to having an efficient workflow. Additionally, we learned new concepts with CSS animations and made the webpage interactive through the puzzle, which was something we had never done before

What's next for Studylull

In the future, we plan to add more features to Studylull, including pause buttons for the timers and more types of puzzles. Additionally, we hope to add more types of breathing exercises. Lastly, we hope to add more integrations with other apps, such as Google Calendar or Todoist to promote productivity.