CarCheck

🚗 SymptoCar – Auto-Symptom-Diagnose-App

SymptoCar ist eine moderne Web-Anwendung zur Diagnose von Auto-Symptomen. Nutzer können Symptome eingeben und erhalten passende Ursachen aus einer umfangreichen Datenbank. Die App bietet vollstÀndige CRUD-FunktionalitÀt, React Hooks, Testing und ein ansprechendes UI - komplett ohne externe Backend-Services.

📌 Features & Funktionen

🔍 Diagnosesystem

📝 CRUD-FunktionalitĂ€t

⚛ Modernes Frontend

đŸ§Ș Testing

🎹 UI/UX

đŸ› ïž Installation & Startanleitung

đŸ“„ Projekt klonen

git clone https://github.com/RiartC/CarCheck.git
cd CarCheck/carcheck

📩 AbhĂ€ngigkeiten installieren

npm install

▶ Entwicklungsserver starten

npm run dev

Die App lÀuft unter: http://localhost:3000

đŸ§Ș Tests ausfĂŒhren

# Alle Tests ausfĂŒhren
npm run test:ci

# Tests im Watch-Modus
npm test

📁 Projektstruktur

carcheck/
├── src/
│   ├── app/
│   │   ├── layout.js          # Root Layout
│   │   ├── page.js             # Hauptseite (Home)
│   │   └── globals.css         # Globale Styles
│   │
│   ├── components/
│   │   ├── SymptomForm.jsx         # Suchformular fĂŒr Symptome
│   │   ├── DiagnosisResult.jsx     # Anzeige der Diagnoseergebnisse
│   │   ├── SymptomList.jsx         # Liste aller Symptome
│   │   └── AddSymptomForm.jsx      # Formular zum HinzufĂŒgen neuer Symptome
│   │
│   ├── lib/
│   │   └── symptomsData.js         # Lokale Symptom-Datenbank
│   │
│   └── tests/
│       ├── SymptomForm.test.js     # Tests fĂŒr SymptomForm
│       └── DiagnosisResult.test.js # Tests fĂŒr DiagnosisResult
│
├── public/                     # Statische Assets
├── jest.config.js             # Jest Konfiguration
├── jest.setup.js              # Jest Setup
├── package.json               # AbhĂ€ngigkeiten
└── README.md                  # Diese Datei

đŸ§© TestfĂ€lle (Given-When-Then)

✅ Positiver Test - SymptomForm

Given: Nutzer gibt “Auto zieht nach links” ein
When: Er klickt auf “Diagnose anzeigen”
Then: Die App ruft die onSearch-Funktion mit dem Symptom auf

❌ Negativer Test - SymptomForm

Given: Das Eingabefeld ist leer
When: Nutzer klickt auf “Diagnose anzeigen”
Then: Die App zeigt die Fehlermeldung “Bitte ein Symptom eingeben.” an

✅ Positiver Test - DiagnosisResult

Given: Suchergebnisse sind vorhanden
When: Komponente wird gerendert
Then: Alle Symptome, Kategorien und Ursachen werden angezeigt

❌ Negativer Test - DiagnosisResult

Given: Keine Suchergebnisse gefunden
When: Komponente wird gerendert
Then: Meldung “Keine Ergebnisse gefunden” wird angezeigt

đŸ–„ïž Technologie-Stack

Frontend

State Management

Datenverwaltung

Testing

Development Tools

🚀 Deployment

Die App kann einfach ĂŒber Vercel deployed werden:

  1. Pushe dein Repository zu GitHub
  2. VerknĂŒpfe das Repository mit Vercel
  3. Vercel fĂŒhrt automatisch npm run build aus
  4. Die App ist verfĂŒgbar unter: https://your-project.vercel.app

Alternativ kann die App auch auf anderen Plattformen deployed werden:

đŸ‘„ Team / Autor:innen

ïżœ Zwischenabgabe - Aktueller Stand

✅ Bewertungskriterien - Status

1. GitHub-Repository

✅ Repository ist eingereicht und zugĂ€nglich

2. Commit-Historie

✅ Mehrere nachvollziehbare Arbeitsschritte

3. Grundstruktur der App

✅ Struktur ist klar erkennbar

carcheck/
├── src/app/          → Next.js App Router (Seiten)
├── src/components/   → React Komponenten
├── src/lib/          → Business Logic & Daten
└── src/tests/        → Jest Tests

4. Kernfunktionen umgesetzt

✅ Folgende Funktionen sind vollstĂ€ndig implementiert:

CRUD-FunktionalitÀt:

State Management:

Diagnose-Logik:

5. App-FunktionalitÀt

✅ App lĂ€sst sich starten und funktioniert

npm install
npm run dev

6. Code-Struktur

✅ Code ist ĂŒbersichtlich und sinnvoll organisiert

7. UI/Layout-Konzept

✅ Modernes UI-Konzept ist sichtbar

8. Dokumentation

✅ Beschreibt klar den aktuellen Stand

9. Weitere Planung

✅ Realistisch und nachvollziehbar

Kurzfristig (nÀchste 2 Wochen):

Mittelfristig (bis Endabgabe):

Optional (bei Zeit):

📘 Rahmenbedingungen

1.5.1 Allgemeine Anforderungen

✅ Iteratives Projekt mit Zwischenabgaben
✅ Öffentliche Versionierung im GitHub-Repository

1.5.2 Funktionale Anforderungen

✅ CRUD-FunktionalitĂ€t (Create, Read, Update, Delete)
✅ State-Management mit React Hooks
✅ Lokale Datenverwaltung (keine externe Datenbank erforderlich)
✅ Mindestens zwei Tests mit Jest + RTL

1.5.3 Technische Anforderungen

✅ Framework: Next.js 16
✅ Styling mit Tailwind CSS
✅ Deployment ĂŒber Vercel
✅ GitHub mit Branch-Nutzung und saubarer Commit-Historie
✅ README mit klar definierten Abschnitten

1.5.4 TestfÀlle

✅ Struktur: Given – When – Then
✅ Positive & negative Szenarien
✅ Mindestens 2 TestfĂ€lle pro Hauptkomponente

📈 Erweiterungsmöglichkeiten

📄 Lizenz

Dieses Projekt wurde fĂŒr Bildungszwecke erstellt.

đŸ€ BeitrĂ€ge

Contributions sind willkommen! Bitte erstelle einen Pull Request oder öffne ein Issue.

Viel Erfolg bei der Auto-Diagnose! 🚗💹