Skip to main content

​
Kanban Board

Wir haben gelernt, dass man die folgenden Dinge machen sollte um ein Kanban auf GitHub zu erstellen:
1

Erstelle ein GitHub Projekt

Erstelle ein GitHub Projekt für dass Repository in dem man das Kanban haben will.
Am besten nimmt man die Kanban Vorlage von GitHub selbst.
2

Issues erstellen

Für jedes Use Case erstelle ein neues Issue mit dem Typ Feature. Danach, erstelle für jede Aufgabe, die zum erreichen dieses Use Case nötig ist, ein Issue mit dem Typ Task und füge diesen Task als Child Issue vom vorher erstellen Feature Issue.
Vergiss nicht die Label, Milestone und Assignees Fields zu verwenden
3

Ändere die Standardansicht

Um einen besseren Überblick über die verschiedene Issues zu haben, empfiehlt es, das Board anderst anzuzeigen:

Gruppiere die Issues nach Parent Issues/Use Case um einen besseren Überblick zu erhalten.

​
Vite + React + TypeScript + Tailwind + Shadcn/Ui

Wir haben gelernt, dass man die folgenden Dinge machen sollte, um ein modernes React-Projekt mit Vite, TypeScript, Tailwind CSS und shadcn/ui effizient aufzusetzen, da wir bewusst nicht mit “barebone” React und selbst geschriebenem CSS arbeiten wollten, sondern eine strukturierte UI-Component Library einsetzen wollten.
1

Projekt erstellen

Erstelle ein neues Projekt mit Vite und der React + TypeScript Vorlage:
console
npm create vite@latest
Wähle bei der Einrichtung React + TypeScript aus.
2

Tailwind CSS installieren

Installiere Tailwind CSS mit:
console
npm install tailwindcss @tailwindcss/vite
Ersetze den kompletten Inhalt von src/index.css mit:
src/index.js
@import "tailwindcss";
3

TypeScript Pfade konfigurieren

Ergänze in tsconfig.json und tsconfig.app.json folgende Optionen:
{
...,
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
...
}
Dadurch kannst du Komponenten mit @/components/... importieren.
4

Vite Konfiguration anpassen

Installiere notwendige Abhängigkeiten:
console
npm install
Bei Problemen mit npm install (z.B. ERESOLVE unable to resolve dependency tree) kannst du den Befehl mit --force ausführen:
console
npm install --force
Mehr Informationen findest du hier.
Passe deine vite.config.ts Datei nun so an:
vite.config.ts
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
5

shadcn/ui installieren

Initialisiere shadcn/ui mit:
console
npx shadcn@latest init
Beantworte die Fragen, z.B. zur Basisfarbe (Neutral empfohlen). Die Basisfarben kannst du später auch ändern. Dazu siehe hier und hier noch mehr.
6

Komponenten hinzufügen

Füge irgend eine UI-Komponente wie den Button hinzu:
console
npx shadcn@latest add button
oder
console
npx shadcn@latest add --all
um alle Komponenten zu installieren.
Du kannst auf shadcn.com/blocks die Komponenten und deren Verwendung anschauen, falls du inspiration brauchst.
7

Komponenten verwenden

Danach kannst du die Komponenten in deiner App verwenden.Beispielhafte Verwendung von solchen Komponenten:
src/App.tsx
import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-svh">
      <Button variant={"outline"}>Click me</Button>
    </div>
  )
}

export default App
Dieser Button ist jetzt ein vorgestylter Button von shadcn/ui, der bereits alle Tailwind CSS-Klassen enthält.
Diese Kombination von den Technologien oben bietet eine moderne, performante, gut aussehende und erweiterbare Frontend-Basis.

​
Types in TypeScript

Wir haben gelernt, dass TypeScript eine typisierte Sprache ist, die auf JavaScript aufbaut. Die wichtigsten Konzepte sind:
  1. “Normalen” Typen: TypeScript unterstützt die grundlegenden Datentypen wie string, number, boolean, null, undefined und void.
  2. Arrays: Arrays können mit dem Typ Array<T> definiert werden. Das mag einen an Java erinnern, da man in java auch ArrayList<T> definieren muss.
  3. Enums: Enums ermöglichen es, benannte Konstanten zu erstellen, die den Code lesbarer machen.

​
Objekte

Wir haben gelernt, dass Objekte in TypeScript mit dem Typ object definiert werden können. Es ist jedoch besser, den Typ des Objekts explizit anzugeben, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern.
example.ts
type User = {
  name: string
  age: number
}
Um solche Objekte zu benutzen, muss man sie folgenderweisen benützen:
example.ts
const user: User = {
  name: "John",
  age: 30,
}

const ArrayOfUsers: User[] = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
]
Wichtig ist, dass wenn man ein Type defininiert, dann muss man ihn in einem anderen File als type importieren. Zum Beispiel:
Object.ts
export type User = {
  name: string
  age: number
}
App.tsx
import type { User } from "@/types"

function getUser(user: User): string {
  return `Name: ${user.name}, Age: ${user.age}`
}

​
Funktionen

Funktionen in TypeScript erlauben es, Typen für die Parameter und den Rückgabewert anzugeben. Dies verbessert die Lesbarkeit und Wartbarkeit des Codes erheblich.
example.ts
type User = {
  name: string
  age: number
}

function getUser(user: User): string {
  return `Name: ${user.name}, Age: ${user.age}`
}
Somit kann man im Code die Typen der Objekte und deren Eigenschaften definieren. Das ist sehr hilfreich, um den Code leserlicher zu machen und auch um Fehler zu vermeiden. In unseren Augen ist TypeScript besser als vanilla JavaScript, da es den Code leserlicher und auch Strukturierter macht.
⌘I