Submitted over 3 years ago

Fullstack MERN app using Sass, Hooks and Context API

Jesse•430

@jesse10930

Preview site View code

This is a solution for...Invoice app

HTML
CSS
JS

5guru

Design comparison

SolutionDesign

Solution retrospective

This project was a total beast! Maybe a bit more than I was prepared for, but I'm fairly happy with how it turned out. It took me about a month to finish, and I really feel I learned a lot along the way. One thing I'm still struggling with is basic file structure, particularly with React and the Context API. I often feel like there's just a big pile of code that becomes hard to sift through when the files get rather lengthy. Any suggestions about how to better organize the code in these files or a best-practice way to place specific blocks of code would be super helpful. Per usual, any other feedback about improving this app or tips I can bring to future projects are welcome, as well.

Community feedback

Szymon prusak•30
@szymon-99Posted over 3 years ago
Great job!
1
Jesse•430
@jesse10930Posted over 3 years ago
@szymon-99 Thanks Szymon!
0
Matt Studdert•13,611
@mattstuddertPosted over 3 years ago
Hey Jesse! You've done an awesome job on this challenge! Tediko made a great point regarding semantic HTML5 elements to improve your document structure.

There are lots of potential ways to structure React projects. I typically lean towards an architecture that resembles a domain-based approach.

I'd definitely recommend trying to break your components out more to make them reusable. Pairing React and Styled Components is a great approach that helps improve mental models around breaking out components into reusable chunks.

If you do go with Styled Components, you can disregard this next piece of feedback. But I'd recommend not using IDs for styling purposes and not nesting your selectors unnecessarily in Sass. Nesting selectors can lead to overly specific selectors. For example, #main-app #invoices #invoice-list .invoice-item .item-payment-due could simply be .item-payment-due. This will make your styles much easier to manage, especially in large projects where you might need to override styles of different elements.

I hope this helps. Keep up the great work!
1
Jesse•430
@jesse10930Posted over 3 years ago
@mattstuddert Thanks so much for taking the time to check out my project and send some feedback! This was quite big and by far the most in-depth project I've worked on. At times I felt a bit lost in the code and that the id's and classes were becoming unnecessarily convoluted, so I can understand where your suggestions will be helpful. I'll definitely do some research on the domain-based approach and styled components, try to refactor this project, and use what I learn in future projects.

Thanks again for your feedback and encouragement!
0
tediko•6,680
@tedikoPosted over 3 years ago
Hello, Jesse! 👋

Well done! I just hop in to give you credit for complete this challenge. I have not much to say since I don't know React yet but what caught in my eye is lack of semantic in your HTML structure. Additionaly .new-invoice-container element should be a button since it trigger some action. This also applies to other elements that trigger some action and are only divs containers.

Good luck with that, have fun coding! 💪
1
Jesse•430
@jesse10930Posted over 3 years ago
@tediko Hey tediko! Thanks so much for your input! HTML semantics is definitely not one of my strengths/areas of familiarity, but I'll do some research and go through my code to try and incorporate some of the different element tags where I can. I 100% agree about the buttons...bad habit using all div containers, lol.

Thanks again!
0

Please log in to post a comment

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