Skip to content
Submitted over 2 years ago

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

pwa, react, tanstack-query, tailwind-css, vite
Paweł Pohl•390
@Pawel1894
A solution to the Dictionary web app challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • mako542b•370
    @mako542b

    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
  • tomas938•385
    @tomas938

    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.

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

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

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