Dictionary with PWA, caching, react, typescript, tailwindcss, tests
Design comparison
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
- @mako542bPosted over 1 year ago
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 helpful1@Pawel1894Posted over 1 year ago@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@mako542bPosted over 1 year ago@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@Pawel1894Posted over 1 year ago@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@mako542bPosted over 1 year ago@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@Pawel1894Posted over 1 year ago@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 - @tomas938Posted almost 2 years ago
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@Pawel1894Posted almost 2 years ago@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 - @ApplePieGiraffePosted almost 2 years ago
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@Pawel1894Posted almost 2 years ago@ApplePieGiraffe Thanks for the feedback! :) I'll add the focus styling.
1
Please log in to post a comment
Log in with GitHubJoin 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