Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript
Вставка
- Опубліковано 20 сер 2024
- In this video, we're going to build an Artificial Intelligence React News Application using Alan AI. Alan AI is a revolutionary speech recognition software that allows you to add voice capabilities to your applications. It allows you to control absolutely everything in the app using your voice. Another huge benefit is that it's extremely easy to integrate it. We'll do it together in this video and afterward, you'll be able to create your own voice-controlled apps.
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UA-cam discount code is automatically applied!
Live Site: voice.alan.app...
Alan AI: voice.alan.app...
Alan GitHub: voice.alan.app...
📚 Materials/References:
Promo Code: JSMASTERY (2500 free interactions!)
Mentioned Materials (styles, info cards, links, images): gist.github.co...
GitHub Repository (feel free to give it a star ⭐) github.com/adr...
Alan Studio Project Code: gist.github.co...
If you have any problems with the code, reference to the two links above. There you can find the entire code for this project and see what you did wrong. :)
💼 Business Inquiries: contact@jsmastery.net
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / js_mastery
BuyMeACoffe: www.buymeacoff...
#javascript #reactjs #webdev
Wtf did I just saw. People don't upload this kind of stuff nowadays for free. You deserve million followers.
Thank you so much! I appreciate it!
Ikr, this guy thinks waaaay out of the box, and doesn't settle with a todo list lmao
@@javascriptmastery seriously, bro project like this in react, OMG never thought that react can goes like that, man truely unbelieveable man
Omg omg can't believe you're providing such things for free. may god give you all happiness
Thank you!
@@javascriptmastery man you are the best yutuber tutor in my opinion
Bro your project is working ?
19 Minutes in and im blown away by this integration. 4 months of learning javascript seems worth it now. Thanks for this video.
I'm glad to hear!
This UA-cam Channel deserves Millions of Subscribers.
Maybe one day...
Some bookmarks for self.
5:55 npx create-react-app ./
6:05 Install dependencies
15:44 API key
Thank you so much!
You project is at another level , at first it blew my mind at how much this application can do ,
Thank you for this tutorial ,
I'll definitely be making it and including in my resume
Thank you, I appreciate it!
dude I got a job watching your videos (and others on UA-cam and Udemy). Once I'm done with my current assignment I'm gonna recommend we implement something like this it's soooo cool.
That's great! Congrats!
Thanks for liking Alan! We are airing a Udemy course soon! Stay tuned for that 😃
This channel requires 1 billion followers. Most smart web developer available on UA-cam.
Appreciate it!
I dont belief what i have learned just now in most easiest manner .Incredibly awesome project.You deserve 1000000000000 likes for this amazing work
Thanks a lot!
After a year... this tutorial is still 100% useful and very impactful. Thanks
Thanks!
It looks like some fools just go around UA-cam just disliking videos. Thanks a lot for this video, your channel has been a blessing to me.
Thanks!
Most underrated UA-cam channel for Web Development. You deserve millions of subscribers. And you'll definitely reach there soon. Keep posting such amazing content. Thank you 😁
Thank you! :D
Please do part 2 I' am so grateful for giving us this masterpiece!
By far the coolest app i've built so far. Thanks so much, i already have so many ideas on where to integrate this....Thanks again for taking the time to teach us. Stay safe
What are some of the use cases where you would use it? Thank you so much and stay safe! :)
@@javascriptmastery I recently built a chat app...so am thinking of integrating it there. So the user can just speak to the app instead of typing his / her message. Don't know if it's possible, have to check the Alan docs later 😅
Congrats on building the app! Looking forward to seeing your other use case ideas with Alan :)
@@javascriptmastery Hi i am getting error uncaught user exception
and Cannot read property 'length' of undefined
can any one please help me @ javascriptMaystery
One of the most underrated react video on YT.
Thanks!
Can't do anything but to say thank the effort you put in this, I hope this channel grow fast
Thank you!
This is an insane app bro,especially for someone who has a non IT/CS background.Love it thoroughly,would also like to have a Material UI course video from you buddy.
Great idea :)
I have followed almost all your tutorials. they are all best and you are the best. and we are waiting for the MERN stack tutorial. Thank u so much.
Thank you!
Like if you want to make this project.
Can't wait to see all the different use cases coming from your projects :)
I saw this video a while ago and I liked the idea project instantly but didn't make anything. Now when I am developing it along with you I realize how well explained it is. Thank you for this type of content. You deserve much more followers
Go for it! Thanks!
Hi,I am getting one error while developing it,can you help?
I'm surprised why this channel doesn't have more subscribers. quality content. thanks
I appreciate that!
You should definitely do an Alan series with more real word use cases. I saw a couple use cases on their youtube channel like the medical app, fitness app and ecommerce store, which I found interesting. I like the fact that you can control the app itself through voice like how in the ecommerce example you can search for your order , submit payments etc.
I was thinking of a search engine, currently voice assistants like siri can open safari but don't have any functionality after that. For example I can tell siri to open safari but it's not capable of doing any searches through voice. I can't tell it to go to a certain website. It would be nice to do google and youtube searches through voice. I could tell siri to open the app and then alan could take it from there.
Thanks for making these videos I've learned a lot, keep up the great work.
Great ideas!
I don't belive. This video have only 7k. It's deserve millions. Congrats bro.
Thank you!
This channel is gonna explode to 1m + subscribers for sure!
Awesome job dude!
Thanks, I appreciate it!
I don't comment on UA-cam channel its kinda OCD but This project is exception Thank you I am struggling with React but still try to built such project as you
Thank you!
I have a problem in alan Ai .when i speak:- (Give me the News from CNN) then he is not answering.
Code:- intent('Give me the news from $(source* (.*)) ', (p) => {
In above line , source showing in red highlight. Plzz give me the solution
This is amazing. I support anyone who is helping to provide education like this for free. This is important work, you have my full support!
Thank you!
Very amazing project. Thank you for your sense of sharing.
Don't watch all this tuto without liking it.
Thank you very much!
The createRef for each Card is rock man, I've struggle with these for a long time when dealing with storing a list of array's ref and cannot find a way to implement it.
Thanks man!
yes, brother, I want a full tutorial on this, but till your tutorial comes i am gonna dig down into it.
but will be waiting for your videos are you explains very well
Thank you, appreciate it!😊
I can't thank you enough. I look forward for series of more videos on alan-ai. Lots of love from India.
Thank you!
Even though I'm commenting one year after the video was uploaded, I'm really surprised that you share this wonderful content for free...it is highly appreciated
Again, this man is a legend.
Thanks! 👌
WOW OMG so glad I saw this in my recommendeds. Thank you, Thank you, Thank you! I can't say it enough lol
You're so welcome!
You are beyond Awesome. Coding is alive, just because of teacher like you. Respect++
Thank you so much!
This is a gem. This video deserves views in billions! . Fantastic. Do make amazing projects like these in the future videos.
Thank you!
Please make a full tutorial on AlanAI. This one was an interesting window on how to integrate it with our application.
And more of such content will be highly appreciated. Thanks a lot for your efforts.
Wow, I'm amazed ..This guy deserves a million subscribers and likes. Keep it up!!!!!!!!!!
Thank you!!
Dude seriously I became ur fan now.... That's an amazing tutorial that I have seen ever.... That's a lot for the people who wants to add to their port folio... Thank u soo much..😍
Thank you! 😊
Developed a voice and touch enabled web application using React and Google Dialogflow. Awesome experience.
Cool!
I enjoyed all your tutorials and this one is just another great one. It would be great if you could make more tutorials based on Alan AI. Thank you so much for this awsome video.
Super amazing, I can't believe stuff like this is free here on youtube. I can't wait to finish this project and add it to my portfolio. Quality content. Thanks
Thank you!
Can you tell pre requisite
You are the best UA-cam creater in the world. You gives gold for free.
Great work
Thanks
dude you're the MAN!!! thanks for a such a great lesson here. imma start using alan in one of my project
Awesome, thanks!
100% likes. Insane. I have never seen a video that has over 10k views with 0 dislikes...
Me neither! 😊
Wow!!! What an amazing project. Certainly one of the best i have seen on UA-cam.
Wow, thank you!
I enjoyed all your tutorials and this one is just another great one. Thank you for your content Sir !!!
You are very welcome
I am simply speechless !!! No one actually uploads these kinds of awesome projects. More power to you brother 😄
i was looking to code and improve my react and you uplaoded this. Thank u i really loved your channel
Glad I helped! 😊
Wow!!, It would be so cool to make a PWA app out of it and use it in a phone. Just amazing, I just finished watching your PWA app tutorial and all i see are endless possibilities there and can't stop admiring your content and the way you present things. You sir, are amazing.
Thank you!
Can't wait to see how you implement your use case ideas with Alan :)
This is the most exciting tutorial video ever made!! Thank you for this!!
Glad you enjoyed it!
this channel needs to be shout out ...such a massive content
Thank you so much!
Wow... first time I'm watching a youtube video that has zero dislikes...great bro!!
Looking forward to see your use cases for Alan Studio 🙂
Thank you so much 😀
Woo hoo! Can't wait to try this, just finished the corona tracker app.
Nice!
And this is how you learn the ai implementation with react great job jsm.
Thank you!
Glad you like it! Can't wait to see what you create with Alan implementation :)
Such a great project ,I have never seen this before.
So much appreciated.
Thank you fo providing this.
Thank you!
Every video on this UA-cam channel is the best👌👍!!
Thank you! 🙌
Best React project I have ever seen on UA-cam. Amazing work.. I loved it.
Thanks!
This was Insane Project..Loved It..
Thanks!
You are a beast! , every one of your videos just gives me so many ideas.
I'm glad! 😊
just came to like.i am currently on your realtime chat App :)..thanks for ur videos
Thank you so much! That's kind of you :)
Brother you are absolutely amazing. I really appreciate your work. Please make a complete series on Alan AI we would love to watch it.
Thank you so much! I might do it!
You are the best ♥️♥️
Thanks! 😊
If anyone facing !articles.length not defined,here is the solution---
this is due to UserAgentMessing error therefore the articles is not set correctly. Here is the solution:
After setting NEWS_API_URL ,do below
const options = { url: NEWS_API_URL, headers: {'User-Agent': 'request'}};
api.request(options, (error, response, body) => {...}
:)
THANKYOUUU SO MUCH TT
@@user-mz4zd3xk8e did it work for you?
Not all heroes wear caps!!!
Thank you mate
Wow great project... Just added it to my watch later list to work along to implement while watching in my free time. Thanks for this awesome project, it's really exciting.
Awesome!
Best JavaScript UA-cam channel everrrrrrrrr wish I could give the video a thousand likes ❤️
🤩🤩🤩🤩 Pretty unique tutorials! Thanks a lot!
You’re welcome 😊
Incredible project, And well explained
I'm glad you liked it
I've never dream to built like this project.Thank U.You're amazing.
Thanks, congrats!
Beautifully designed
Thank you! Cheers!
Dude your crazy man ilove ur channel
Thanks! I hope you enjoy this app! 😊
@@javascriptmastery I will surely code along soon and showcase this on my CV
Best project😍
Thank you!
Adrian you own the top quality level content on youtube. Believe me you are fantastic. God bless you.
OMG another great project. Loved your chat application, and this one is also amazing ❤️. Thanks you so much JavaScript mastery.
Thank you!
It was just amazing and very new concept. Thank you sir.
Glad I helped! 👌
You are awesome man ❤️ keep doing stuff like this 😍
Will do!
I m learning a lot from your videos. And with the type of content you are making, this channel is going to be the best tech channel on youtube soon. Just keep making such videos.
Happy to hear that!
Incredible project
Thank you! Greetings to Vietnam !
Hey Tin :) Looking forward to your use cases from Vietnam !
Wow man! Amazing work!!!
Greetings from argentina
Thanks! Greetings to Argentina :)
Hey Fede :) Looking forward to your voice use cases coming from Argentina !
Thanks you for this project 😊🧡
Glad you liked it! 😊
I have got your channel recently, but it is one of the best channels in youtube thanks man, please make a tutorial on material UI.
Will do soon
Dude, you are the best. You've taught me so much through your videos. Appreciate it a lot!
Thank you! 😊
Thank you so much for this wonderful resource! ❤
Glad it was helpful!
Great App, and thanks for teaching about it to us
No problem 👍
what an amazing tutorial here. Dude, you're the boss... i love it. Thanks a million
You're welcome!
Can't wait for the upcoming series on Alan Voice Assistant
That would be great, I'm looking forward to it as well!
Best project I have seen on UA-cam 😍, I want to know that the beginners in the react can also do the project? Or we need to be experienced user of react?
Glad you like it! We have pre-defined projects and scripts that you can use and edit while you are getting used to the platform and react coding. If you have questions about Alan, please reach out to us at support@ alan .app.
this is the best project I have build, lemme tell you that I wasn't happy like that after I build e-commerce project,
this Project is great, and keep rolling bro, and one day you will have millions of subscribers 😍
Great to hear!
Thanks Mohamed, can't wait to see your voice ai use case ideas :)
I am just 1:13 into the video and I already know this is gonna be a masterpiece...I just wanna take this time to greatly thank you and wish you nothing less than the absolute best life has to offer
Thank you so much!
@@javascriptmastery wow you actually respond! Love that and I am busy with it as I type. I am just here to get the link for the styles you mentioned at 59:00
This is absolutely fantastic and I cant wait to play around with it and also add it on my portfolio...when I get hired I will be here to thank you again and donate when I get paid cause I plan on doing that for all the channels that are helping me out for free
Thank you so much! I appreciate it!
Just finished this amazing app and now time to take what I have learned and apply it plus style this! I am super thankful to you Javascript Mastery cause this is definitely worth gold
Thank you very much for this awesome tutorial Adrian.
I've written code for the active card to scroll to top or come in the viewport.
useEffect(() => {
if( activeArticle === i ) {
let elmnt = document.getElementById(`card${i}`);
// elmnt.scrollIntoView();
window.scroll(0, elmnt.offsetTop - 50)
}
}, [i, activeArticle]);
and also apply the id attribute on card inside the NewsCard.js component like this : id={`card${i}`}.
and you don't need to create Refs for all the elements and no need to define the state.
Great!
here is an other version of scrolling without using DOM (Just with React Hook)
const refToScroll = useRef()
useEffect(() => {
if(i === activeArticle) {
window.scroll(0, refToScroll.current.offsetTop - 50)
}
}, [activeArticle])
return (
...
Thanks alot..wonderful project..will surely create it and add in resume..
Thanks a lot😊
Amazing! :)
Great idea to add it to your resume :) Can't wait to see what you make!
Cool project. I followed you and made the project myself. Make more videos like this..
Great job!
So excited by this. So awesome, well explained. Thanks a million times.
Looking for your full well explained Material UI tutorial.
Awesome, thank you!
wooooowwww.....awesome project....loved it...make more videos on alan and new tech stuffs.
learnt a lot from this video.
More to come!
Thanks for trying out Alan Studio! We look forward to seeing what you create :)
Intro 00:00:00
Setup 00:05:10
Implementing Alan Ai 00:10:40
Adding the news API 00:21:30
The newsCards component 00:33:46
Adding the index page 01:01:00
News by search term 01:14:15
News by search category 01:17:00
Alan reading the headlines 01:23:38
Implementing auto scroll 01:29:33
Opening the articles 01:42:00
Hey, did it work for you?
Hi Sejal, yes it did
@@itbeginswithi Could you please share link of the repository?
@@sejaldahake2745 I tried but it seems I acn't share any information like links or usernames in the comments section.
@@sejaldahake2745 itbeginswithi on the cat programming site. it has a collection including what you are looking for.
My god's the best project ever 🔥🔥🔥
Thanks!!
I will add it in my CV... lovely project
can you share your code link i have still get error if possible
Yes a a course on Material UI is needed ! ♣
Sure!
First of all You are amazing man, i loved your application, i love the way you demonstrate everything, i loved the whole tutorial, i will create something like it but with out coding along to be sure that i can make it on my own, i just have a question how much would you sell something like this or a bit complicated . and PLEASE make a video about how to evaluate our websites like based on what . and DO the alan ai series im sure its not just me who will be so happy to watch it thanks
Thanks for all the kind words!
Im regards to pricing, it's hard to say, depends on a lot of factors.
Alan AI series might be coming soon!