Invoys

login page
Add Invoice
Invoices list
Invoice Detail

Inspiration

On the internet, A lot of open-source Invoice management apps are built with Laravel. As a Javascript developer, I want to build the "React Solution" for devs that are familiar with React and Javascript.

What it does

In essence, Invoys enables developer to spin-up their own invoice management app that are fully customizable and free.

How we built it

Invoys is bootsrapped with create-t3-app which based on Next.js.

Typescript is must.
Styling is done in Tailwind to develops faster.
Database using MySQL, but can be other RDBM as long it's supported by Prisma.
Data fetching with TRPC. A tech that built on top of zod and tanstack-query.
Next-auth for authentication.
Courier API to send emails.

Challenges we ran into

Dynamically generates PDF with React was not an easy feat and tricky.
Defining Schema and making the relationship with Prisma. As I'm not learning database deeply, creating relationship and the right structure for database is surely challenging.
Testing a fully authenticated and app with lots of interaction is very difficult for a first-timer. I was blocked by how to work around data fetching in testing.
Setting up repository for Open Source. Properly setting it so people can use your project easily requires a lot of thinking and revision.

Accomplishments that we're proud of

Shipping a functional complex app for the first time.
Able to integrate with third-party vendor like Courier is a huge feat. At first, it was a little bit confusing on how to manage it. As time goes by, it become easier.
Generating a PDF properly that can be downloaded.

What we learned

One thing that I learn is just try to build it first, if stuck then put it off for later. Before that, I was doing too much calculations before trying something (e.g. library), it turns out by trying I can learn and fail much faster.