KimBOPChronicles

Initial Splashscreen with cute animation
Onboarding Topic Selection
Our High Level Architecture
DALL-E's best attempt
Latest Finance News Modal
Latest Education News Modal
Our Suno Generation Page

🚀 Inspiration:

Did you know that 86% of U.S. adults get news from digital devices, but 39% actively avoid news sometimes or often? In today’s fast-paced world, staying informed is harder than ever.

Staying informed is harder than ever. With endless articles, constant notifications, and scrolling feeds, people spend hours trying to catch up on current events yet many still miss the most important stories. How can we make staying informed faster, more engaging, and maybe even fun?

Think about it: How often do we waste time trying to multitask, browsing the news on our phones while brushing our teeth or commuting, only to miss key updates? Many solutions out there require either your full attention or intricate setups, but they don’t fit into our daily routines.

That’s where KimBopChronicles was born—a project designed to turn the top news of the day into music, making it easier than ever to stay updated while doing something else. Inspired by the rolled rice dish kimbap, which wraps up different ingredients in a neat, bite-sized package, we wrap up the news into a 2+ minute song, with a dash of flavor from your favorite music genre. It also helps that there's rice in it :)

🎶 What It Does:

KimBopChronicles is your personalized audio news summary generator!

Users pick their favorite topics (up to 5) and select a music genre.
The app retrieves the top 5 articles from the past day on those topics.
Our backend summarizes these articles, creates lyrics from the summaries, and generates a custom 2+ minute song for each topic.
Along with the song, the app generates a relevant avatar that sings your news in the chosen genre.

Whether you're interested in finance, tech, or world events, KimBopChronicles delivers the news in an engaging, educational, and personalized format—all set to music!

🛠️ How We Built It:

Frontend: Built using Next.js, the responsive webapp handles user preferences, allowing users to choose topics and genres.
Backend: The FastAPI Python backend pulls top articles from a news aggregator API, summarizes and processes the content, and generates song lyrics.
- Text Processing: Using various LLMs (like Groq and Llama 3.1), we summarize and clean the content.
- Music Generation: The summaries are then converted into lyrics, and a relevant song is created using a music-generating API.
- Avatar Creation: We use Pollinations.ai to generate an avatar that fits the song’s genre and topic.
All generated content is sent back to the frontend for display.

🚧 Challenges We Ran Into:

Fickle API Responses: Debugging failures with minimal feedback was time-consuming.
Duo Queuing: With just two people, it was a challenge to handle the workload across multiple technologies.
New Frameworks: Both Next.js and FastAPI were new to us, and learning to integrate these while building a cohesive product was tricky.
State Management: Our initial state management design caused refactoring issues later in development.
Prompt Engineering: Ensuring the output of the LLMs was semi-deterministic and relevant required a lot of trial and error.
Debugging Multiple Points: Managing various moving parts (LLMs, APIs, front/back end) meant debugging at multiple levels.

🏆 Accomplishments We're Proud Of:

Clear High-Level Architecture: We built a solid plan for frontend-backend interaction from the start, which made integration smoother.
Aesthetic UI: The clean, lofi-inspired UI complements the playful nature of KimBopChronicles.
Progress Despite Distractions: We managed to build a functioning product despite starting late and even having a KBBQ break with friends!

📚 What We Learned:

LLMs Can Be Unpredictable: Working with multiple LLMs taught us that even small prompt changes can yield drastically different outputs.
Team Size Matters: With just two developers, we could've benefited from more hands on deck.
Better Error Handling: We realized the importance of designing for more graceful error handling when using various APIs.

🔮 What's Next for KimBopChronicles:

Parallelized API Calls: Speed up generation times by making more efficient backend calls.
Better User Experience: Refine the frontend to offer more intuitive interactions and smoother performance.
Native Mobile App: Expand into mobile platforms for on-the-go audio summaries.
More Customization: Allow users to select cadence, sentiment, or even specific voices (reporter style, casual style, etc.).
Expanded Features: Add more musical genres and fine-tune song structures.
More In-Depth Summaries: Allow users to dive deeper into a topic if they want more information on certain articles.

💻 Tech Stack:

Frontend: Next.js, Typescript, TailwindCSS
Backend: FastAPI, Python, Pydantic
APIs/Tools: Pollinations.ai (Avatar generation), Groq API, Llama 3.1 (LLM), News Aggregator API, Suno API (music generation)
Hosting: Vercel (Frontend), Python Spoofing Browser Session for Suno API