Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Full-Stack Web App built w/ Next.js using PostgreSQL db & Prisma ORM

James F. Ciskanik•200
@JamesTheLessFC
A solution to the Invoice app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


For this project, I really pushed myself to build out a professional, full-stack app complete with user authentication. I even added a few additional features, like including a PDF download link on the invoice pages, sending emails to clients with the PDF invoice attached when a user clicks the "save & send" button, pagination for the list of invoices, and showing toast success/error messages upon completion of specific actions.

This is probably the most advanced project I've completed, and I'm planning on applying for junior web dev positions in the near future. So I'm wondering, does this project show enough skills/techniques to help me get a job in this field? It felt pretty advanced but I realize that could be a matter of perspective.

Another question I had is in regards to the database I'm using, which is a PostgreSQL database (using Prisma as an ORM). Was this a good strategy to use? I've used MongoDB and Firebase on other projects, so I wanted to try an SQL db this time. But I'm curious if others think a particular type of db works best for an app like this.

Finally, I was a little unclear on how to implement the custom scrollbar shown in the design templates on the invoice form. At first I tried using the react-custom-scrollbars package but I couldn't get it working right, so I ended up using a CSS-only solution modifying pseudo elements like this "::-webkit-scrollbar { width: 9px, ...etc. }". Did anyone find a better way to do this? I'm not sure if my method is compatible with all browsers although it seems to work fine on chrome and safari.

For those kind enough to actually sign into the app and check out the added features mentioned above, I'm very interested in your feedback. Feel free to share any comments/concerns!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on James F. Ciskanik's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub