Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Dictionary with PWA, caching, react, typescript, tailwindcss, tests

Paweł Pohl• 390

@Pawel1894

Desktop design screenshot for the Dictionary web app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey everyone! 😁

I did some additional features to this app here they are:

  • Caching searched words for 24hours
  • PWA (you can download it on mobile)
  • Font switcher with localstorage
  • Theme switcher with localstorage
  • Searching words definitions
  • Default theme mode based on user's prefers-color-scheme

Tech i used for creating this project

  • TailwindCSS
  • React
  • Vite
  • Vitest
  • Testing library
  • TypeScript
  • Local Storage web API
  • Tanstack query
  • Workbox
  • Axios

If you have any questions for me or found bug don't hesitate writing comment!

Please leave a like if you find this solution helpful :)

Cheers

Community feedback

mako542b• 370

@mako542b

Posted

It seems like after typing new letter, some previous definitions are still visible - like after 'm' - (def = 'abb of milion...' ) i type o, among the defs of 'mo' the 'abb of milion...' doesn't disappear, but adding letter (like p => mop), and erasing it, the extra def vanishes. Maybe something with caching

Marked as helpful

1

Paweł Pohl• 390

@Pawel1894

Posted

@mako542b Do you mean that after deleting search term it is vanishing the last search term? I'm not sure if I understood it correctly.

0
mako542b• 370

@mako542b

Posted

@Pawel1894 No, like when you have query, say 'm' - you get the response, then you type another character (without deleting previous query) - you get new response, but some data from previous state seem to still be there

1
Paweł Pohl• 390

@Pawel1894

Posted

@mako542b Oh i see. Thank you ;) I think i managed to fix it, please test it if you can. The problem was i had duplicated keys for meanings data and react was not refreshing it.

1
mako542b• 370

@mako542b

Posted

@Pawel1894 Yes, it works fine. What did you use as a key now? The api response doesn't seem very 'react - map' friendly - lacking some kind of ids for objects

0
Paweł Pohl• 390

@Pawel1894

Posted

@mako542b I just skiped the key prop xd I guess it's fine to do that in this case since this response isn't editable anyway.

0
tomas938• 385

@tomas938

Posted

I just finish this challenge today and i dive into your code and i feel so bad about my solution :D your code is well written also you added nice features. I can trully see you have more experience than me good job.

1

Paweł Pohl• 390

@Pawel1894

Posted

@tomas938 Hey thanks for feedback ;) Don't worry practice makes perfect I'm coding actively for 6 years now. If you want to review your solution with me I'll be happy to help, just hit me up on discord Paaaweł#7660

0
tomas938• 385

@tomas938

Posted

@Pawel1894 i added you ;) thank you very much

0
T
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

Hey, Paweł Pohl! 👋

Just wanted to say amazing job on this challenge! 👏 Your solution looks great and works very well! 👍 You've also paid incredible attention to detail and added some nice extra features! 🙌

Only very tiny nitpick from me—it would be nice to add a focus style to the theme switcher toggle button. 😅

Keep coding (and happy coding, too)! 😁

1

Paweł Pohl• 390

@Pawel1894

Posted

@ApplePieGiraffe Thanks for the feedback! :) I'll add the focus styling.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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