GrowBeets

Inspiration

The inspiration behind GrowBeets stemmed from our shared interest in plants and including a music element in the project. We heard about the studies done with sound frequencies and their influence on plant growth and wanted to use that to personalize the experience.

What It Does

GrowBeets is a web app that enhances the gardening experience by creating a 10-song playlist based on the sound frequency that best suits the plant's growth. Users input the plant they are growing, and the app utilizes the OpenAI API to determine the optimal frequency for that plant. It then generates a Spotify playlist featuring songs that align with that frequency.

How We Built It

We built GrowBeets using React for the frontend, combined with Tailwind CSS and TypeScript for styling and formatting. For the backend, we utilized the Spotify API to create the playlists, and the OpenAI API helped us select plant frequency preferences. We also used Cline to assist in the project setup and debug issues along the way.

Throughout the hackathon, we divided our focus between functionality and UI design to bring our idea to life.

Challenges we ran into

Getting Spotify API authentication to work properly: It took some time to figure out how to properly authenticate our app with Spotify and get all the required tokens to create/access playlists. Styling and alignment issues: We faced difficulties with centering elements and adjusting padding. Thankfully, we were able to use Cline and Gemini for assistance, which helped us improve the layout. Embedding Spotify player: Getting the Spotify embed to work with the correct syntax was tricky, but after reviewing documentation from other projects, we adapted it to our needs. Hosting on GoDaddy: We also encountered challenges while trying to host the project, but we had to sacrifice this idea for time.

Accomplishments that we're proud of

Overcoming challenges with API authentication and functionality, while gaining valuable knowledge throughout the journey. Bringing a design to life that feels like we could see on a professional site. Getting to work our hobbies into our academic and professional lives. Finishing out our first hackathon proud of our work.

What we learned

We learned how to set up and work in a React environment, store API keys securely, and retrieve/handle JSON data in a more complex way than we had in our classes. We also gained a better understanding of overall API integration, handling authentication, and how to style more freely. Overall, this experience fostered our skills in full-stack development.