Life Planner - Produktivitäts-App

✨ Projektbeschreibung

Der Life Planner ist eine umfassende Produktivitäts-App zur Verwaltung von Aufgaben, Gewohnheiten, Finanzen und persönlichem Wachstum. Ziel ist es, eine Anwendung zu entwickeln, die verschiedene Aspekte des Lebens trackt und optimiert.

Entwicklungsstrategie:

1. Phase 1: Entwicklung mit Vanilla HTML, CSS und JavaScript zur Festigung der JavaScript-Kenntnisse.
2. Phase 2: Refaktorierung und Umstellung auf React & Next.js für eine performante und erweiterbare Architektur.

---

🛠️ Technologie-Stack

Phase 1: Vanilla Webtechnologien

• Frontend: HTML, CSS (TailwindCSS optional), JavaScript (ES6+)
• Backend (später): JSON-Dateien zur Simulation einer Datenbank
• Datenvisualisierung: Chart.js für Statistiken & Diagramme

Phase 2: Next.js & React

• Frontend: Next.js + React, Zustand (State-Management), TailwindCSS
• Backend: Node.js + Express (oder Next.js API Routes)
• Datenbank: PostgreSQL (Prisma ORM)/MongoDB
• Hosting: Vercel (Frontend), Railway/Render (Backend)

---

📅 Roadmap & Entwicklungsphasen

🔄 Phase 1: Vanilla Webtechnologien (6-8 Wochen)

1. Projektstruktur aufbauen (HTML, CSS, JS getrennt, Modul-Architektur einrichten)
2. Grundlegende UI mit CSS & HTML (Navigationsleiste, Dashboard, Layout)
3. To-Do-App (CRUD-Funktionalitäten, lokale Speicherung in JSON oder LocalStorage)
4. Habit-Tracker (Gewohnheiten erfassen, Fortschritt anzeigen, Diagramme mit Chart.js)
5. Finanz-Tracker (Einnahmen & Ausgaben, einfache Berechnungen, Diagramme)
6. Wetter-Widget & API-Integration (OpenWeather API für Wetterdaten)
7. Refaktorierung & Vorbereitung auf Phase 2

🔄 Phase 2: Umstellung auf React & Next.js (4-6 Wochen)

1. Projekt in Next.js migrieren (Komponentensystem aufbauen, Routing einrichten)
2. State-Management einführen (Zustand oder React Context API)
3. Datenbankanbindung & Authentifizierung (Prisma mit PostgreSQL, JWT-Login)
4. Optimierung & UI-Verbesserungen (Dark Mode, Performance-Tuning, API-Caching)
5. Testing & Deployment (Vercel für Frontend, Railway/Render für Backend)

---

📂 Projektstruktur

Phase 1: Vanilla HTML/CSS/JS

life-planner/
│── assets/             # Bilder, Icons, Fonts
│── styles/             # CSS-Dateien
│── scripts/            # JavaScript-Module
│── index.html          # Hauptseite
│── README.md           # Projektbeschreibung

Phase 2: Next.js & React

life-planner/
│── public/             # Statische Assets
│── src/
│   ├── components/     # Wiederverwendbare UI-Komponenten
│   ├── pages/          # Next.js Seiten (z.B. Dashboard, Todo, Finance)
│   ├── styles/         # Globale und modulare Styles
│   ├── utils/          # Hilfsfunktionen & API-Calls
│── prisma/             # Datenbankschema für Prisma ORM
│── package.json        # Abhängigkeiten & Skripte
│── README.md           # Projektbeschreibung

---

🚀 Ziele & Lernfortschritt

✅ Lernziele:

• Vertiefung von JavaScript (DOM-Manipulation, Module, API-Calls)
• Verständnis für Datenmanagement & State-Handling
• Arbeiten mit APIs (z.B. Wetter-API, Finanz-API)
• Grundlagen in UI/UX-Design & responsivem Layout
• Schrittweise Umstellung auf moderne Webtechnologien (React & Next.js)

🎮 Warum dieses Projekt? Dieses Projekt bietet mir eine praxisnahe Möglichkeit, meine Webentwicklungs-Skills zu erweitern und gleichzeitig ein nützliches Tool für das persönliche Leben zu schaffen.

---

🌟 Nächste Schritte

1. Phase 1 starten: HTML/CSS/JS-Architektur erstellen und erste Module entwickeln.
2. Laufend testen & dokumentieren: Feedback sammeln und Code optimieren.
3. Migration zu Next.js vorbereiten: Modularchitektur so planen, dass ein Umstieg leicht fällt.
4. Phase 2 durchführen: Next.js & React implementieren, Backend anbinden.

---

🔍 Fazit

Dieses Projekt zeigt meinen Lernfortschritt und ist gleichzeitig eine perfekte Grundlage für Bewerbungen im IT-Bereich. Es hilft mir, praxisnah moderne Webentwicklung zu erlernen und langfristig auf professionelle Frameworks umzusteigen. 🚀