Skip to content
Submitted over 1 year ago

Dictionary application built with NextJS, Tailwind and ContextAPI

Jared Brown•90
@JaredBrown1
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

  1. What did you find difficult while building the project?

What was difficult for me was getting the state in order. I had to really sit back and think about how to get all this state to load in one bigger component. Dark mode was a little struggle as well.

  1. Which areas of your code are you unsure of?

I am unsure of the way I handled the state of the dark mode toggle button. I want to get it to where it can toggle depending on the users system dark mode settings, if that makes sense because right now it can load in with dark mode but the button isn't toggled.

3)Do you have any questions about best practices? I would appreciate any advice on best practices regarding the way I handled the state in my application.

Community feedback

  • Fazza Razaq Amiarso•2,340
    @fazzaamiarsoPosted over 1 year ago

    Hi @JaredBrown1! Great work on finishing your project!

    I think I can help answer your questions:

    1. State management is definitely hard. My recommendation is to read this article by Kent C. Dodds as a starting point. I also encourage you to read his other articles on React because I learnt a lot of best practices from him.
    2. In next-themes, You can get the user's system theme returned by useTheme. Here's the documentation reference. Example:
    const { systemTheme } = useTheme()

useEffect(() => {
// set toggle state based on user's theme
}, [])
    1. To keep your codebase clean and formatted nicely, you always want to have ESLint combined with Prettier. Here is a simple tutorial

    I hope it helps! Cheers!

    Marked as helpful
    0

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