Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Invoice App using Nextjs Tailwindcss and Mobx

@vynerth0429

Desktop design screenshot for the Invoice app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


Comments and feedbacks are highly appreciated :)

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hello, Jun Rey Ellezo! 👋

Amazing work on this challenge! 🙌 You've done a great job and that was definitely quick! 👏

Keep coding (and happy coding, too)! 😁

1

@vynerth0429

Posted

@ApplePieGiraffe Wow! I'm blessed to receive positive feedback from the top mentor 🥳.

I really had fun coding the solution to this challenge. It is really tricky and I'm glad I finally made it. 🙏

1
P
Grace 27,630

@grace-snow

Posted

Hi Jun,

Wow good work on this, and fast! ☺

I'm not familiar with Next so haven't looked at code properly, but is there a way to lose the inline styles? It's preferable to use classes instead if possible.

Other small functionality thing I noticed was I could keep adding items without entering anything. Maybe disable the button or something until an item has been added

That's all from me. Keep going with these challenges

0

@vynerth0429

Posted

Hello @grace-snow,

As I checked the code, I only have one inline style and I have updated it just now. If there are other inline styles, maybe it is after Nextjs compiled it. I am not sure though. Thank you for noticing. 😇

As for the adding of items functionality, I intentionally enabled it always since it can be saved as a draft anyways. But the main reason is during edit mode, it will be hard to implement the disable button feature if there are already multiple items and the user decided to remove the data on each item.

Thank you so much for the feedback, I will think from time to time how to implement the disable button especially for editing. 🙏

0
P
Matt Studdert 13,611

@mattstuddert

Posted

That was fast!! Amazing work on this challenge, Jun! Your solution looks amazing and functions perfectly based on the brief. The one small thing I noticed was that the layout breaks slightly at 320px in the dev tool emulator on the invoices index. It might be worth playing around with that a bit. That's me being super picky, though! 😅

How did you get on with the challenge? Did you learn anything new while working through it?

0

@vynerth0429

Posted

@mattstuddert Thank you so much for noticing it. I have updated it now. 🙂 No worries, I can relate to "super picky". 😅

As for the challenge, it really helps me a lot especially in learning State Management like Mobx and how to implement the Dark theme.

The design is awesome and the concept is really interesting. I had so much fun while doing it (which is the most important for me 😇)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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