🧠 DEV Community Support App (DEV MBS) 🤖

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

Intro 🚀

I have been enjoying posting and reading articles on the DEV Community for about half a year. One day, I came up with the idea that it would be more convenient if there were functions working with AI on the DEV Community. At the same time, I found out that there would be the world's largest hackathon by Bolt. So, I made up my mind to make a DEV community support Web App at the hackathon.

I made DEV MBS (DEV Community My Best Supporter) that will help you enjoy DEV Community with cutting edge AI. Here is the video demo.😊 It will "Extract" articles you like, "Summarize" it, and generate "Audio" from the summary.

How to use ✨

The user inputs a keyword they are interested in (up to 4 words). The app will use the DEV Community API and return the top 6 posts for the keyword.

https://developers.forem.com/api/v1#tag/articles/operation/getArticles

The user can select one post and summarize the article using the Gemini API.

https://ai.google.dev/gemini-api/docs/text-generation

Moreover, the user can convert text-to-speech using the Gemini API.

https://ai.google.dev/gemini-api/docs/speech-generation#single-speaker

Since it takes some time to convert to audio, so you can play a mini-game while waiting.

How I built it 🛠️

I used Bolt.new and Vibe Coding to make this App. I made the functions one by one, not all at once, to improve the code quality. First, I input a prompt for the function outline. Next, I input a prompt for the function detail. This way also improved the code quality. Then, I asked AI many times until the function worked as I expected.

Technologies Used

Problem 1 (Summary was low quality) 🤯

At first, I passed the URL directly to the Gemini API and summarized the article. The output was terrible. I tried many kinds of prompts to improve the output, but none of them worked. Next, I passed only the article body of the page to the Gemini API using Cheerio. It worked, and the output quality got better. I think that the noise was reduced because only the body was passed.

Problem 2 (Response of text-to-speech is slow) 🎮

In this app, I am using the Gemini API to convert text to audio. However, the API response is quite slow. If this were a problem with my app, I could try many things to improve the response speed, but the problem comes from an external API, so I cannot do anything about it. Thus, I switched my point of view and thought about how to entertain the user while waiting. First, I thought of making a fun animation, but later thought it would be more fun if there were a mini-game to play while waiting. And so the DEV vs BUG game was born.

How was Bolt.new? 🤖

By using Bolt.new, I could easily enjoy Vibe Coding and make my idea into a real app. Not only chatting with AI, coding and debugging, but Bolt.new can also connect to other services easily. It can make a high-quality program, so from beginner to expert, anyone can enjoy Bolt.new.

Future improvement ideas 💡

The Gemini API can do lots of other things.

1. It can generate images from text, so image generation from an article summary is one idea.

2. I used the text-to-speech function of the Gemini API, and it can change the speaker’s voice. So, adding voice selection would also be fun.

3. The Gemini API can generate music as a new function. So, music generation with the Gemini API might also heighten the user experience.

Acknowledgements 😄

This was my first time joining a hackathon and making a video demo. It was super fun and I would like to join again!

• I got enough Bolt.new free tokens for the hackathon. Thank you for the good chance to try Bolt.new!

• I also thank the DEV community for providing a wonderful platform for developers.

• I thank the Gemini API for offering us a fantastic, state-of-art AI API.

Thank you for reading. Happy AI coding!🤖