import { ArticleTooltip } from '@/components/Project/mdx' import { ArticleImage } from '@/components/Project/mdx' import { Column } from '@/components/Project/mdx' import { CustomComponent } from '@/components/Project/mdx' Pomo.rhythm is a Spotify playlist generator made for enthusiasts. With Pomo.rhythm, you can create personalized playlists that mix genres sequentially to match your focus and break sessions. ## Why I Made This I often use Pomodoro Technique when working from home and listen to music while working. This method aims to boost efficiency and the sense of accomplishment through task breakdown and short periods of intense focus. However, for me, the greatest benefit is helping me maintain productivity without burning out through the switch between focused work and breaks. Rhythmic music like EDM or pop music is ideal for breaks. It makes me want to sway and even sing along—perfect for refreshing both the mind and body during rest periods. However, it's not ideal when focusing (at least for me personally). For deep work, I prefer the gentle tones of lo-fi beats. **"What if the music I listen to syncs with my Pomodoro sessions?"** No tool works like that currently. So... why not make one for myself? ## Shaping the Idea Making a new player with built-in Pomodoro timing and auto-switching seemed promising but somewhat challenging due to music copyright issues. Another idea was to create an iOS shortcut linking a timer with the Music app, but experimentation proved it unsuitable for such multi-stage automation. Then I found an inspiring tweet: Inspired by this tweet} /> The tweet says: @nishuang created a specially designed work playlist with a subtle peak every 25 minutes, naturally dividing time like a pomodoro. An idea came up: What if, instead of focusing on automation, I could easily create a playlist tailored to Pomodoro sessions? This solution would also allow others to create similar playlists. Leveraging the platform's built-in capabilities for playlist generation offers the simplest implementation and best user experience. Spotify's Free Plan and sufficient API capabilities (track recommendations, playlist creation) made it the ideal choice. I decided to build a web app using the Spotify API. Its initial version will keep as simple as possible. It won't include features for manual song selection or adjustable session lengths. Users only need to input a seed (genre, artist, or track) for each session type (focus, short break, long break). The app then utilizes Spotify's recommendation system to select songs based on these seeds. Finally, it uses duration calculations and sequencing logic to generate a complete, tailored playlist in the user's Spotify account. ## Design Time to name it! This product combines music with the Pomodoro Technique, so I started with music-related words like tempo, sound, melody, etc. Initially, I thought of merging "Tempo" with "Pomodoro" to create "Temporo," but it didn't quite click. Then, inspired by Perfume's catchy song "Polyrhythm," I decided to name it "Pomorhythm." It has a nice rhythm and rolls off the tongue nicely—I quite like it. The Pomodoro Technique alternates between focus and break periods. To represent these phases visually, I chose blue for focus and vibrant orange for breaks. I then created a mixed gradient of these colors as the main background. I then created a mixed gradient as the website background. I also applied these two colors to the title to make it pop. The other UI elements are mainly input fields, select menus, and lists. I experimented with a semi-transparent style to make them blend with the background. The result is harmonious, and I'm quite pleased with it. I also used "VCR OSD Mono" font to add a retro player vibe. ## Implementation Thanks to Spotify's API, retrieving a list of recommended tracks based on user input is quite simple, and its response is really fast! The key challenge is selecting a batch of tracks that fit the desired duration of each Pomodoro session. To solve this, I iterate through the recommendation list to select tracks until their combined duration closely matches the target session length. I also introduced a tolerance range to avoid situations where the selected batch of tracks cannot exactly match the required duration. Finally, we add all these tracks to the user's newly created playlist in the order of Pomodoro sessions. Here's the tech stack I used for this project: - **Frontend:** Next.js 13 - **Authentication:** Next-Auth - **Styling:** Tailwind CSS - **Animation:** Framer Motion - **Hosting:** Vercel - **Analytics:** Plausible Oh, by the way, I later integrated the OpenAI API, using its free quota for experimentation. Users can describe their desired music scenario in natural language, and the system uses both OpenAI and Spotify APIs to generate corresponding song recommendations. ## Final Steps Launching the app for public use requires submitting application materials to Spotify for review (otherwise, only whitelisted users can access it). These materials include details on the app's target audience, its integration with Spotify, and monetization plans. The review process takes about 1–2 weeks, and my first attempt failed. It's crucial to follow Spotify's [design guidelines](https://developer.spotify.com/documentation/design), which dictate requirements such as including the Spotify logo and links to relevant content on Spotify's platform alongside any metadata, cover art, or audio content. After the application was finally approved, I announced the launch on [Twitter](https://twitter.com/muvich3n/status/1647813236740194304). ## After Launch The launch received enthusiastic responses, with both friends and strangers offering congratulations. Some users even switched their primary music player to Spotify specifically to use this product. Users also provided valuable feedback and suggestions: - Include a brief intro before the first session to help users get into the right mindset. - Increase the contrast between focus and break sessions such as using distinctive beats. - Offer multiple playlist options instead of a single choice. - Add a "back" button to allow users to modify their selections after making them. - Implement a built-in player with a display showing Pomodoro session progress. - Enhance user guidance, as some found the interface confusing. Some of these suggestions were completely unexpected, and I appreciate users who invested time sharing their thoughts and feedback. This feels special, and I really love it. Surprisingly, perhaps due to the simple OpenAI integration, Pomorhythm was featured in some AI tool directories. Some investors even reached out to discuss the product. This far exceeded my expectations, considering it was just a small project I'd created to meet my own needs. ## Have Fun! Building something you need is fascinating. With minimal resources—just the cost of a custom domain (which could even be skipped)—I could bring an idea to life that resonates with others. I'm really looking forward to bringing my next ideas into reality and seeing them used by people from every corner of the world. [Try it now.](https://pomorhythm.vercel.app)

Yiyang/i˥˩.jɑŋ˧˥/

Why I hide the macOS menu bar