Dictionary App made w/ Remix, TS, Postgres, Tailwind
Design comparison
Solution retrospective
Hello! This started as a simple challenge, but as I moved through it I decided to add features, got ideas and ran with them. The app uses the merriam webster api and parses the returned data at dynamic word routes with SSR'ed pages. Search results are fetched client side, parsed, and output in an autocomplete result dropdown in real time. Handrolled authentication allows for user profiles and saved words. Words are voted on and stored in a serverless postgresql db. The app uses Remix's loaders and actions to deliver and return data. Google sign-in is also available to authenticate.
First: if you see a bug please send to me!
There were some very frustrating parts of this app, but I feel like I grew a lot from it. There are a couple janky workarounds for things I couldn't completely figure out, like syncing localStorage and database values (which I had a fix for at first, but then came back to with it not working, more below), I will hopefully be able to go back and update them. Surprisingly, the auth was one of the most painless aspects, while styling and generally working with the voting data/schema was difficult at tunes.
My real take away from this project is that I desperately need to start writing tests. Because I didn't go into the project thinking it would be this comprehensive, I just never wrote them and it definitely made life more difficult - I kept coming back and finding bugs or items I had done or fixed, and they had reverted! Maybe I need to work on my git workflow as well to avoid that.
I tried to improve my semantic html, but am unsure if it's really up to par, if you have any tips or pointers let me know. Or, if you have recommendations for improving anything I did sub-optimally, please let me know.
If you like the app and have words of encouragement, please share them!
Community feedback
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