---
title: "Invoice"
date: 2023-08-21
cover: ./images/bg.jpg
icon: "/projects/invoice.svg"
tags: ["sveltekit", "unocss", "prisma", "sqlite"]
toc: true
links:
  [
    ["live", "https://invoice.app.max-richter.dev"],
    ["git", "https://git.max-richter.dev/max/invoice"],
  ]
---

import bg from './images/bg.jpg'
import invoices from './images/invoices.png'
import customers from './images/customers.png'
import editCustomers from './images/edit-customer.png'
import editProfile from './images/edit-profile.png'
import overview from './images/overview.png'
import ImageSlider from '@components/ImageSlider.svelte'
import Image from '@components/Image.astro'


# Introduction

In my free time, I like to take on small jobs, such as deliveries, setups, and pickups for others.  

An unavoidable part of these tasks is creating invoices in PDF format. Initially, I followed a manual process and created my first invoices in Figma. But as programmers often say:

> Why do something manually in 5 minutes when I can automate it in 24 hours?

This thought led to my latest hobby project – **"Invoice."**

<ImageSlider title="Invoice Screens" client:load>
  <Image src={invoices} alt="Invoices" />
  <Image src={customers} alt="Customers" />
  <Image src={editCustomers} alt="Edit Customers" />
  <Image src={editProfile} alt="Edit Profile" />
  <Image src={overview} alt="Overview" />
</ImageSlider>

# Development

During development, I always kept the principle 'K.I.S.S.' in mind: Keep it simple, stupid. For this project, that meant choosing "boring" but well-known technologies:

## [🚀 SvelteKit](https://kit.svelte.dev)  
For an efficient and reactive user interface.

## [🎨 UNOcss](https://unocss.dev/)  
The faster alternative to Tailwind.

## [🌍 TypesafeI18n](https://github.com/ivanhofer/typesafe-i18n)  
To enable multilingual support without complex logic.

## [🛠️ Prisma](https://prisma.io)  
As a database access layer for smooth data management.

## [🗃️ SQLite](https://www.sqlite.org/index.html)  
As a reliable backend, ideal for small projects.

## [📄 Playwright](https://playwright.dev)  
For generating PDFs.