Annyeong K-pop 💜, which means "Hello K-pop", was supposed to be a K-pop chatbot but due to time she is more like a hub of information for any K-pop group you enter. Which looks super cute too (^^)
This project grew from an idea I had to combine my love for K-pop and ChatGPT. One night while I was listening to K-pop and chatting with ChatGPT, a song started playing by a K-pop group I was unfamiliar with. Curious, I navigated my way to YouTube and found out the K-pop group's name then running to Google to find out more - as one does with anything they want to learn more about. Although Google did great, and I found out everything I wanted too about the group, I started to wonder, Isn't there a place where I could access all of this information without the multiple searches? And this is how Annyeong K-pop 💜 was born!
This project is essentially your one stop shop of information about any K-pop group you're interested in. Now, instead of having to do multiple searches and jumping between different sites all you have to do on Annyeong K-pop 💜 is type in the group's name and that is it! In an instance you'll get their Korean name, meaning behind their name, fandom name, and debut year, plus a list of their most popular and recent songs all in one place for you to explore!
In the future I hope to add more information about the groups such as biggest achievements, socials, a small "about me" paragraph and their discography. The idea being to use OpenAI's API's to get this information. Along with a AI chatbot that can help answer specific questions the user has about the K-pop group they searched. The vision being ChatGPT but for K-pop.
While building this project I used a variety of technologies for the first time, which was crazy since this was my first hackathon ever and my first time ever stepping into the world of web development. I used HTML, CSS, Tailwind, Javascript and and the YouTube data API to create Annyeong K-pop 💜. I also relied on ChatGPT a lot for this project (I did say I love it lol). It helped me figure out where to host my code and was great at giving me crash courses on HTML, Javascript, and CSS along with creating an API key and actually implementing it in my code.
Although ChatGPT was used a lot I did make sure I left this hackathon with some knowledge as knowledge was the prize, not a working project. I learned how to read HTML, Javascript and CSS code along with their syntaxes. I also learned what tailwind is and how I can use it to save myself a lot of writing and to make my website pretty. Originally I had used Replit AI and just told it what I wanted but after some trial and error I realized I wanted to do this by scratch, with the help of chatGPT of course. I did, however, use the CSS Replit AI code that it generated for my project originally for my final project because of how pretty the website that Replit AI created looks. I did end up tweaking a few things though so that it could be just the way I wanted (as in the colors).
As someone with a background in Java and who hasn't coded in a long time this was honestly, really hard. I was overwhelmed at the beginning of this hackathon due to not knowing anything about web development and thinking I needed to do everything myself, as in without help from ChatGPT. But I am super proud of myself for pushing through, starting (as starting is the hardest part for me) and getting the help I needed because now here we are with a working project and some new knowledge! Even though it isn't the original vision I had for this project I'm still super proud I have something to showcase and say I did. I've never done a project before and for my first time I think I crushed it. And don't worry I did, eventually, end up having fun learning about web development and turning an idea in my head into reality, even if it isn't complete yet.
Built With
- ai
- api
- css
- html
- javascript
- replit
Log in or sign up for Devpost to join the conversation.