🐢 Home Dashboard

Domowe centrum dowodzenia dla par — PWA z 7 modułami w jednym miejscu.

Stack: Vanilla JS · Firebase v10 · PWA · Bez procesu budowania.

Aplikacja webowa działająca jak natywna na telefonie i komputerze. Para dzieli wszystkie dane — notatki, zakupy, kalendarz, budżet, wspomnienia, plany, rutyny domowe. Wszystko sync w czasie rzeczywistym między dwoma urządzeniami.

---

✨ Funkcje

Moduł	Co potrafi
📝 Notatki	Proste notatki tekstowe, pinowanie, cykliczne przypomnienia (np. "co tydzień zmień ręcznik")
🛒 Zakupy	Wiele list, real-time sync, checkbox kupione, "wyczyść kupione"
📅 Kalendarz	Wydarzenia cykliczne (daily/weekly/monthly/quarterly/yearly/custom), push notifications
💰 Budżet	Przychody/wydatki z kategoriami, wykres słupkowy 6 miesięcy + donut dla bieżącego miesiąca
📸 Wspomnienia	Zdjęcia i wideo w Firebase Storage, story viewer jak Instagram
🎯 Plany	Cele do realizacji z statusami planning/active/done
🧴 Pielęgnacja	Rutyny cykliczne z interwałami (np. "mycie naczyń codziennie", "lekarz co kwartał")

---

🚀 Demo

To jest projekt typu "fork-and-deploy" — nie ma centralnego demo. Każda para zakłada swoją instancję na własnym Firebase (darmowy plan Spark wystarczy dla 2 użytkowników na lata).

Zobacz SETUP.md — krok po kroku jak postawić własną instancję w ~30 minut.

---

📱 PWA — instalacja jak natywna apka

Po wgraniu na hosting (HTTPS) aplikacja jest instalowalna:

• iOS (Safari): Udostępnij → Dodaj do ekranu głównego
• Android (Chrome): Menu → Zainstaluj aplikację
• Desktop (Chrome/Edge): ikona instalacji w pasku adresu

Po instalacji działa fullscreen, offline (cached shell), z push notifications i powiadomieniami z badge.

---

🛠 Stack techniczny

• Frontend: Vanilla JavaScript (ES modules), HTML5, CSS3 — bez React/Vue/Angular, bez webpack/vite
• Backend: Firebase v10 (Auth, Firestore, Storage, Cloud Messaging) — wszystko w CDN, brak własnego serwera
• PWA: Service Worker z cache-first + navigation fallback, manifest z shortcuts i screenshots
• Hosting: dowolny statyczny (FTP/Netlify/Vercel/GitHub Pages)

Dlaczego vanilla? Bo działa. Brak buildów, brak node_modules (300MB), brak frameworków które starzeją się co rok. Otworzysz dowolny plik .js w edytorze i widzisz co robi.

---

📁 Struktura

home-dashboard/
├── index.html              ← cała aplikacja (jedna strona, hash routing)
├── manifest.json           ← PWA manifest
├── sw.js                   ← Service Worker (cache + offline)
├── firebase-config.example.js     ← skopiuj jako firebase-config.js i wpisz klucze
├── firebase-messaging-sw.example.js
├── css/main.css            ← cały design system
├── icons/                  ← PWA icons + screenshots
└── js/
    ├── app.js              ← entry point, routing, modale
    ├── db.js               ← Firebase Firestore wrapper
    ├── utils.js            ← helpery (daty, formatowanie, wykresy canvas)
    ├── push.js             ← powiadomienia push
    └── modules/
        ├── notes.js
        ├── shopping.js
        ├── calendar.js
        ├── budget.js
        ├── memories.js
        ├── plans.js
        └── care.js

Szczegóły każdej funkcji: zob. DOKUMENTACJA.md.

---

🔧 Konfiguracja

Aplikacja jest "fork-deploy-and-forget":

1. Sforkuj to repo (zalecane: prywatnie, bo wpiszesz klucze Firebase)
2. Załóż projekt Firebase (darmowy)
3. Wpisz klucze do firebase-config.js i firebase-messaging-sw.js
4. Wgraj całość na hosting z HTTPS
5. Zarejestruj siebie i partnera w Firebase Auth

Pełna instrukcja: SETUP.md.

---

🎨 Customizacja

• Kolory: zmienne CSS w css/main.css (linie 14–75) — paleta forest green z warm accents
• Imiona partnerów: użytkownik wpisuje swoje imię przy pierwszym logowaniu (setup screen). Pierwszy zarejestrowany user dostaje kolor 1 (niebieski), drugi kolor 2 (różowy). Deterministyczne na podstawie UID.
• Kategorie budżetu: lista w js/db.js (zmienna DEFAULT_CATEGORIES) — dodaj/usuń swoje
• Język: wszystkie stringi UI są w polskim w index.html i plikach modułów — ctrl+F i podmień na własny język jeśli chcesz

---

🤝 Kontrybucja

Pull requesty mile widziane. Pomysły na nowe moduły, fix bugów, tłumaczenia — wszystko OK.

Zasady:

• Trzymaj się vanilla JS — nie wprowadzaj frameworków, build tooli, node_modules
• Kod po polsku w komentarzach OK, ale staraj się żeby UI da się łatwo tłumaczyć (osobne stringi)
• Trzymaj się event delegation w setupEvents() — nie pchaj listenerów wewnątrz render() (mnożą się przy każdym refreshu Firestore)
• Używaj escapeHtml() zawsze przy innerHTML — apka jest dla pary, ale XSS dalej jest XSS

---

📄 Licencja

MIT — używaj jak chcesz, sprzedawaj jak chcesz, zachowaj copyright notice. Zob. LICENSE.

---

👤 Autor

Karol Ostasz — karolostasz.pl

Projekt powstał jako prywatne narzędzie dla mnie i mojej partnerki — udostępniam jako open source, bo skoro nam się przydaje to może komuś jeszcze też. Bug raporty i PR-y na GitHubie.

Jeśli używasz tej apki i Ci pomogła — gwiazdka na GitHubie wystarczy 🌟