This is my first Guru challenge :) I learned a lot about NextJS while building this. There were some challenges implementing the drag and drop solutions, hooking up AWS to manage the file storage of profile pictures, and connecting the Github OAuth, but overall nothing too painful. Please provide any feedback you may have on what I can do better, or best practices I should implement! And happy coding 🧡
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!
This project was pretty challenging! Harder than the other two intermediate challenges I've done (one submitted, other is the product page but that I will submit as a larger e-commerce app). It looks like a pretty basic CRUD app at face value, but there are lots of small interactions and ways to organize and pull out the data that make it a bit of an 'iceberg' :)
Redux is not the simplest thing in the world, but I really think I've grown a lot with just this project. Next up, I plan on building with a framework (Remix or Next), Typescript, and implementing tests.
Do you have any suggestions or feedback? Is there a better way to implement responsiveness or anything I did with styling? Would you have organized things differently in the redux slices/actions?
I took some liberties with the design, and customized it a bit. This was built with tailwind and at this point, I don't think there's any going back to vanilla css, it's a revelation. I'm trying to get better with design and building for responsiveness so that's what this project was aimed at improving. Emailjs used for the contact form. Please let me know of any feedback!
I am really trying to improve my CSS skills, so that was the emphasis here. What can I do better? Are there best practices for building something with multiple layers like this that you suggest? I was having trouble getting the positioning correct across layouts and I'm sure there's an easier way to do it than how I did!
Besides that, I built with React and pulled data from a JSON to mimick an API, and added some small MUI ellipsis menus to show that part of the interface. Let me know if you see anything in the way I am organizing or building components that you would improve upon :)
Deployment and state management gave me some headaches in this one. I still have a bug I need to fix where if you refresh the page, the GET request fails even though the route looks fine. Any ideas how to resolve this?
I utilized React-Router and any best practices related to this would be appreciated, I don't know if I implemented it in the optimal way. That said, I think I am getting much better now that I am comfortable building in React to the point where I can pull in UI libraries. Hopefully, it's an upward trajectory from here!
I am sure that I am not building CSS in the optimal way. What best practices can I begin to implement when writing the CSS for a fairly robust component tree, and what did I do wrong here? Did I utilize ThemeContext and Provider to optimally create an adjustable theme? Are there best practices with React I should use, especially when utilizing API calls or building out a component tree generally?
