DEV Community

Cover image for Responsive Voice-controlled News App with Alan AI, React, Material-UI
Shawn Humphreys
Shawn Humphreys

Posted on

Responsive Voice-controlled News App with Alan AI, React, Material-UI

This is so far the most fun I had in a project! Have you ever wanted to know how to add AI to your website? Would you like to create a project that will catch the interviewers' eyes? Check out the complete front-end project below!👇

GitHub logo mrshawnhum / alan-ai-news

React news application powered by AI from Alan AI


I used React to create my project. Instead of using CSS, I used Material-UI as it is a fast convenient tool for responsive web design. Classnames to use multiple classnames within the components. For AI, I use Alan AI as it is a great AI to add to a website. This AI is free to use up to a certain amount of voices. There is a promo code in the video I mention to get you enough free credits for 10 projects with no need to add credit information. The API used was News API.

🚩Issues I found

The main problem I had was the functions and syntax for Alan AI seem weird to me at first, but can be easily understood if you read the documentation. Another issue I found is that the video does not mention to hide your alan key before pushing to GitHub. If you are unaware of how to add dotenv, here is my recommended source to get started.

🙈How to get started

This video is where I recommend getting started. 🚨Don't blindly code along with the video, learn what you are coding and why. Comment down below if you would like a technical article on this project!

Thank You

Thank you for reading this article! Let me know what you think of this project! Leave a ❤️ if you enjoyed the article! Check out some of my other articles as well!

mrshawnhum image

Top comments (3)

badpistol97 profile image
Enzo Cheng

Hi Shawn, I would like to try Alan with my localhost PHP back-end, is it possible?

mrshawnhum profile image
Shawn Humphreys

Hey Enzo,

As I am brand new to PHP, I couldn't give you a definitive answer rather it can or cannot. I encourage you to look at Alan's Docs with this link -

If you are still unsure, contact Alan for further details. I do know if you are running JavaScript or any of it's frameworks for the front-end, that should work!

chaitrak2000 profile image
ChaitraK2000 • Edited

Hi I am not getting how to create Alan_AI NEWS_READER_APP project in Alan.. How to create it??
Please reply me.