Submitted about 1 year ago

Dictionary application built with NextJS, Tailwind and ContextAPI

Jared Brown• 90

@JaredBrown1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Dictionary web app

HTML
CSS
JS
API

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

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.

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

@fazzaamiarso

Posted about 1 year ago

Hi @JaredBrown1! Great work on finishing your project!

I think I can help answer your questions:

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.
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
}, [])

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

Please log in to post a comment

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