Study with Nature

Study with Nature is a responsive web app that was created with the purpose of improving users' productivity and focus with the calming sounds of nature and a built-in Pomodoro Timer.

Check out the app here!

Features

• This project was originally built using HTML, CSS, and Vanilla JavaScript. It has since been refactored and now uses React, Next.js, and TailwindCSS.
• Responsive Media Player with play, pause, skip, and volume control functionality
• Pomodoro Timer with the capability to customize a study schedule with defined study and break sessions
• Dynamic background colors generated with each audio selection, which was implemented using color quantization, more specifically using the Median Cut Algorithm, to dynamically create background gradients based on the selected audio’s cover image

Installation

1. Clone this repo locally
2. Run any local web server
3. Open app in a browser via the generated localhost link
4. Ta-da! App should be running locally in your chosen browser.