Learn to create a Dictionary App using React JS and Material UI with support of over 12 languages.
💻 Source Code:
🔗 Live Site:
✏️ Course developed by Roadside Coder. Check out his channel:
⭐️ Resources ⭐️
🔗 Dictionary API (Website):
🔗 Dictionary API (API): {category}/${word}
🔗 PNG to Favicon Convertor:
🔗 Generate Maskable Icon:
🔗 Image Resizer:
🔗 Manifest.json Generator:
⭐️ Course Contents ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:00:38) Project Overview
⌨️ (00:01:59) Initialize New React App
⌨️ (00:02:47) Google Dictionary API
⌨️ (00:03:36) Material UI Intro
⌨️ (00:06:21) Install Material UI
⌨️ (00:07:14) Building The App
⌨️ (01:17:45) Deploying to Netlify
⌨️ (01:18:51) What is PWA?
⌨️ (01:19:19) Converting Dictionary into a PWA
⌨️ (01:38:15) Testing the Final PWA
⌨️ (01:39:14) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse
👾 AppWrite
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Thanks FreeCodeCamp and Mr. Beau for featuring my Content 🙏❤️.
Love making content for this channel.. 🔥🔥
Hope to bring more such tutorials in future.
@RoadsideCoder Thanks Dude. Also, what do you use to auto-import the components? You hit cmd+enter or something and it fills the component names into the imports on top. Is there a special extension for that?
By the way, if anybody reads this and wants to use the tool, after downloading they would not work for me… So I found that you can hit “Shift + Cmd + R” and a list of the snippets will pop up and you can get what you need.
can you make CAD tutorial please
Very useful channel 😎
Thank you so much 👍🏼🙏🎉
Thanks! Awesome channel!
Is the dictionary itself in sql or a flatfile?
basically i have a dictionary i might port to this and the tough part will probably be reformatting it to whatever db is used on the backend (no time to watch the video Right Now).
as far as I can tell (a couple mins in) the dictionary data is obtained using an existing API. Don’t think they talk abt the backend code here
@E B I’m a linguist, there are many monolingual and bilingual dictionaries in open source which would be perfect objects for this project, though they are most all flatfiles; to me the tough part would be reformatting them by head-words (which are often NOT coded seperately from the definition entry).
@学汉字Hieroglyph 你说的开源的FLATFILE词典,麻烦你可以留下超链接吗?如果次的意思和例子质量高的话,我要试一下利用Python把它制作成DB类型的文件。。那如果你意向造一个单穿英语词典的话,推荐你搜索一下 ”words API“,它是JSON文件。但其实这个英语词典并不是完美的。词典里的很多词缺少意思活着例子,POS, 等。不过 ”最核心的英语词“的 意思,例子,什么的大部分都具有。我打算将我们在看的教程里的GOOGLE API换成那个words API活着别的开源的词典。这个词典API应该是付费的。
Oh wooow thank you so much ❤️
Finally Roadside Coder got exposure by such a great platform and channel. He deserves it I have a learned a lot from Him .
❤️
Who is CEO of FCC, I immediately wanna to meet him and give my everything to him. SUCH A LIFE SAVER FOR NOOBIES CODERS
Can you guys please bring up a data structures and algorithms course in java. Please please
Am definitely going to watch this one!!
Yeeeees! I believed it’s you ma man!!
So exited to follow this tutorial too.
After following the last react router dom, Sir I have become your fan!!! The perfect method have ever followed
I always hope it’s the first guy teaching the course because I can understand what he’s saying.
59:41 scrollbar-width property is supported only in firefox it seems 😕
Just check the one that fits for ur browser
Thanks a lot RoadsideCoder, I have deployed my first react app because of you 😍. Awesome tutorial 👌
Awesome dude
My advice would be to state at the beginning what level of React Knowledge is assumed. He doesn’t seem to anticipate viewers questions, so it would seem like he’s reaching out to a more advanced audiencee.
Exactly, there are many things he breezed through without giving any tangible explanation as to why he did what he did.
thanks for a good video, I got an error on audio control, the link is printed in the console but not always rendered in DOM, for example, “pla” give an audio control, but “plane” not, same “bo” and “book”, any hint to solve this issue? and the second question is the audio source contain (word+”–_gb_1.1.mp3″) at the end?
I am facing the same issue, have you been able to resolve it?
i am also getting same error in chrome whereas it works in firefox
it is kind of not supported in chrome, please use autoplay attribute to autoplay in chrome rather getting things render , even overflow thin for scroll bar not supported in chrome so i used “::-webkit-scrollbar” but its good he didn’t told everything in detail atleast because of that we can learn few more things, Happy coding!!!!
this video was just uploaded but material is already a bit different on their website
Great video!!
Other languages are not working for me… any suggestions?