Skip to content
Submitted about 4 years ago

Fullstack MERN app using Sass, Hooks and Context API

Jesse•430
@jesse10930
A solution to the Invoice app challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Szymon prusak•30
    @szymon-99

    Great job!

  • Matt Studdert•13,611
    @mattstuddert

    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!

  • tediko•6,700
    @tediko

    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! 💪

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