NextJS Invoice


As part of one of my subjects at school, I was given the task of designing and building a solution to a problem that a client had using I.T. The client that I worked with ran a small business but did all their invoicing the hard way, with scraps of paper and relying on customers to hand over the correct amount of money.

This made it the perfect problem for an ideal solution, a fully-fledged invoicing client tailored to my client's needs.

Components

This project was created using NextJS and Chakra-UI. NextJS allowed me to use the Stripe API on the client-side without complications that would come with oAuth and creating a separate API. It uses a combination of Static Page Generation and Server Side Rendered Pages to make sure that whenever a user accesses a new page the data is always up-to-date. Another reason to use NextJS is its integration with Vercel (its creator company) which offers CD and hosting with an emphasis on "serverless" code and lambda functions. Using this functionality you can create custom API routes that don't require a separately hosted service. (Also allows for login and sessions in order to protect API routes).

Chakra-UI had several features that made it applicable to the project, chief among them being its compatibility with React and Dark Mode.

The final reason is its responsive design which made it easy to create pages for both mobile and desktop without changing the code overly much.

My Experience

This project took place over the course of several months and several consultations but, in the end, it was a massive learning experience for me when it comes to NextJS (what this blog is made with) and React-Hooks like SWR. In the future, I plan to do more projects like this as they are an awesome learning experience.