This is a submission for the KendoReact Free Components Challenge.

What I Built

The English translation of Khabar Suno is "Listen News." This news website features content in both English and Hindi, and you can change the language according to your preference. Additionally, if you're in a hurry, there is a feature that allows you to listen to all the latest news in just one minute.

Demo

👨‍💻 Repository:

GitHub logo shivamarora1 / Khabar-suno

Read and Listen latest news in english and hindi language.

The English translation of Khabar Suno is "Listen News." This news website features content in both English and Hindi, and you can change the language according to your preference. Additionally, if you're in a hurry, there is a feature that allows you to listen to all the latest news in just one minute.

Running Project

npm run dev
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000 with your browser to see the result.






https://khabar-suno.vercel.app/



Image description

Image description

Image description

KendoReact Experience

I used the following components for this mini project:

  1. Button
  2. Icon
  3. Skeleton
  4. Card
  5. Tooltip
  6. Typography
  7. Drop Down List
  8. AppBar
  9. Drawer
  10. Dialog Box

Coming from a backend development background, I found it very easy to learn how to develop a frontend UI using KendoReact. The component documentation is thorough and well-written. You can find a wide range of components to build a complete, end-to-end SaaS product. Additionally, the styling and themes offer a significant advantage. Overall, great work, team KendoReact!

AIm to Impress

Leveraging advanced generative AI, I automatically generate comprehensive summaries of the latest news updates from today. These summaries are then transformed into high-quality audio using cutting-edge OpenAI models, enabling users to conveniently listen to the news on the go. This innovative approach not only streamlines the news consumption process but also enhances accessibility, ensuring that users can stay informed no matter where they are.

Models used:

  1. gpt-4o-mini-tts : For text-to-speech.
  2. gpt-4o-mini : For text summarization.