I did this as a challenge for myself

I paid a month of FronEndMentor service and I took this premium design, it does look pretty cool.

I just wanted to build something else so I could show others what I can do but then... somehow I wanted to do a FullStack project and this design was a perfect choice for it.

It was just a simple invoice website, a frontend-only webstie that uses state management to record the data of invoices but I added a NestJS server and handled authentication, authorization, file uploading and image manipulation apart from the invoice CRUD.

For the authentication/authorization I used JWT so I could avoid the server to store any session-related data and store it securely in an http-only header.

This is how the login page looks like, you will not be able see the invoice index if you are not logged in and once you are logged in the login page will not be visible until you log off.

The whole website implements a dark/light theme and this is how the index invoice page looks like

There is a details page where you could see the details of the invoice and also edit its contents and its status (draft/paid/pending)

The image manipulation is a crop tool to personalize your profile a little bit since it's the only feature it has for personalization.

Each invoice can have multiple items so the edit modal does support dynamic addition/edition.

And they can be filteres by status.

This website is fully accesible 🎉

This means, you could travel through it without using a mouse and its content can be identified by the screen readers.

Right now this project is only available in the repository since to be able to run it a would need a server and this project was only to test my abilities and to show it to others, this project produces no income so I would no be able to pay constantly for a server to make this app work but you should be able to run it locally!

In a future I contain the whole project in a docker container so anyone intersted of running it locally could be do it just by download the docker image and not worrying about some other details such as the node version, the database, etc.