Skip to content
Submitted almost 2 years ago

Dictionary Web App using Next.js, Tailwind, and Typescript

Mike•40
@Mike-is-coding
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Dictionary web app
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I had a lot of difficulty using typescript in this project, but I got more comfortable using it towards the end as I started to understand the errors and my mistakes. Tailwind was also very difficult to use for me, it seemed very counterproductive. Overall, I think I learned a lot from this project and I'm really glad I completed it. Please leave any comments on anything I can improve on thank you.

Community feedback

  • Ruben•550
    @RubenSmnPosted almost 2 years ago

    Hi Mike, I just had a look at your solution for this challenge which looks really good visually.

    I have some suggestion I want to share with you.

    • The useEffect in your index.tsx has no dependency array. Which means it will run every render. You can fix this by including the theme in the array.

    • In your QuerySection you're passing some unused state dictData.

    • I would suggest to move the header to a new component where you can handle the theme and font this leaves the QuerySection with just the code for the actual query section.

    • Instead of sending all the theme state (theme and setTheme) down to the other components. Create a toggleTheme function which you can pass down.

    Hope you find this useful and happy hacking!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord