---
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'


# Einleitung

In meiner Freizeit übernehme ich gerne kleinere Aufträge und erledige Botengänge, Aufbauten und Abholungen für andere.  
  
Ein unvermeidlicher Bestandteil dieser Tätigkeiten ist das Erstellen von Rechnungen im PDF-Format. Anfangs habe ich mich dem manuellen Prozess hingegeben und die ersten Rechnungen in Figma erstellt. Doch wie es unter Programmierer*innen oft heißt:

> Wieso sollte ich etwas manuell in 5 Minuten erledigen, was ich in 24 Stunden automatisieren kann?

Aus dieser Überlegung heraus entstand mein neuestes Hobbyprojekt – **"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>

# Entwicklung

In der Entwicklung habe ich stets das Prinzip 'K.I.S.S.' im Hinterkopf behalten: Keep it simple, stupid. Für dieses Projekt bedeutete das die Auswahl von "langweiligen", aber mir bestens vertrauten Technologien:

## [🚀 SvelteKit](https://kit.svelte.dev)  
Für eine effiziente und reaktive Benutzeroberfläche.

## [🎨 UNOcss](https://unocss.dev/)  
Die schnellere Tailwind Alternative.

## [🌍 TypesafeI18n](https://github.com/ivanhofer/typesafe-i18n)  
Um mehrsprachige Unterstützung ohne komplizierte Logik zu integrieren.

## [🛠️ Prisma](https://prisma.io)  
Als Datenbankzugriffslayer für eine reibungslose Datenverwaltung.

## [🗃️ SQLite](https://www.sqlite.org/index.html)  
Als zuverlässiges Backend, das sich ideal für kleinere Projekte eignet.

## [📄Playwright ](https://playwright.dev)
Zum erstellen der PDFs.