Code a Dictionary with React and Material UI – Tutorial

32 Comments / Web Design

Ecommerce Empire Academy

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:

32 thoughts on “Code a Dictionary with React and Material UI – Tutorial”

  1. RoadsideCoder

    Thanks FreeCodeCamp and Mr. Beau for featuring my Content 🙏❤️.
    Love making content for this channel.. 🔥🔥
    Hope to bring more such tutorials in future.

    1. Freetalk in English

      @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?

    2. Freetalk in English

      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.

  6. 学汉字Hieroglyph

    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).

    1. E B

      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

    2. 学汉字Hieroglyph

      @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).

    3. Freetalk in English

      @学汉字Hieroglyph 你说的开源的FLATFILE词典，麻烦你可以留下超链接吗？如果次的意思和例子质量高的话，我要试一下利用Python把它制作成DB类型的文件。。那如果你意向造一个单穿英语词典的话，推荐你搜索一下 ”words API“，它是JSON文件。但其实这个英语词典并不是完美的。词典里的很多词缺少意思活着例子，POS， 等。不过 ”最核心的英语词“的 意思，例子，什么的大部分都具有。我打算将我们在看的教程里的GOOGLE API换成那个words API活着别的开源的词典。这个词典API应该是付费的。

  8. Lets Learn From Mistakes

    Finally Roadside Coder got exposure by such a great platform and channel. He deserves it I have a learned a lot from Him .

  9. I Learned It

    Who is CEO of FCC, I immediately wanna to meet him and give my everything to him. SUCH A LIFE SAVER FOR NOOBIES CODERS

  12. Exploration dreamiest

    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

  13. Ashley S

    I always hope it’s the first guy teaching the course because I can understand what he’s saying.

  15. ananth

    Thanks a lot RoadsideCoder, I have deployed my first react app because of you 😍. Awesome tutorial 👌

  16. charles tompkins

    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.

    1. StaFa

      Exactly, there are many things he breezed through without giving any tangible explanation as to why he did what he did.

  17. Artavazd Kirakosyan

    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?

    3. Krishan Nandan Sharma

      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!!!!

Comments are closed.