Projekt célja és célkitűzései

A projektem célja egy modern, webes feladat- és időmenedzsment alkalmazás fejlesztése, amely lehetővé teszi a napi teendők rögzítését, kezelését, állapotuk követését és határidőhöz rendelését. Az alkalmazás főbb funkciói:

• Feladatok létrehozása, szerkesztése, törlése.
• Feladatokhoz határidő rendelése, állapot (függőben/kész) módosítása.
• Átlátható, felhasználóbarát felület.
• Több nyelv támogatása (magyar/angol).
• Sötét/világos mód támogatása.

A használt szoftvereszközök, keretrendszerek és könyvtárak kiválasztásának indoklása

• Frontend:
  • React.js: Modern, komponens-alapú felépítés.
  • Tailwind CSS: Utility-first CSS framework, gyors, reszponzív, könnyen testreszabható.
  • react-i18next: Egyszerű többnyelvűség támogatás.
• Backend:
  • Python + FastAPI: Gyors fejlesztés, aszinkron támogatás, automatikus OpenAPI dokumentáció.
  • SQLite: Egyszerű, fejlesztéshez ideális, nincs szükség külön szerverre.
• Egyéb:
  • Vite: Gyors fejlesztői szerver.
  • Node.js: Frontend fejlesztői környezethez.

Telepítési és üzembe helyezési útmutató

1. Környezeti előfeltételek:

   • Python 3.8+
   • Node.js 16+
   • Git

2. Projekt klónozása:

   git clone https://github.com/IrepY/task-do/
   cd task-do
   

3. Python virtuális környezet létrehozása és aktiválása:

   python -m venv venv
   # Windows: (Powershell-ben)
   venv\Scripts\activate.ps1
   Amennyiben ez nem működik, először ezt kell futtatni egy adminisztrátor joggal rendelkező powershellben:
   Set-ExecutionPolicy RemoteSigned -> A (Yes to All)
   # Linux/Mac:
   source venv/bin/activate
   

4. Backend-hez szükséges modulok telepítése:

   pip install fastapi uvicorn
   

5. Backend szerver indítása:

   cd backend
   uvicorn main:app --reload
   

6. Frontend telepítése és indítása (új terminálban):

   cd task-manager-frontend
   npm install
   npm run dev
   

7. Alkalmazás elérése:

   • Nyisd meg a böngészőben: http://localhost:5173/

Rendszer architektúra és megvalósítás

Áttekintés

A rendszer két fő komponensből áll:

• Backend (API szerver): REST API FastAPI-vel, SQLite adatbázissal.
• Frontend: React-alapú egyoldalas alkalmazás, Tailwind CSS-sel.

Backend

• main.py: FastAPI alkalmazás, CRUD végpontok /tasks útvonalon.
• db.py: SQLite kapcsolat és inicializálás.
• Adatmodell:
  • Task: id, title, description, completed, due_date mezőkkel.
• Funkciók:
  • Feladatok lekérdezése, létrehozása, módosítása (részleges PATCH), törlése.
  • Hibakezelés, státuszkódok, CORS támogatás.

Frontend

• React komponensek:
  • App.jsx: Fő komponens, nézetváltás, állapotkezelés.
  • TaskList, TaskItem, TaskDetailView, TaskForm: Feladatok listázása, részletei, szerkesztése, hozzáadása.
  • MenuPanel, MenuItem: Oldalsó menü, navigáció.
  • SettingsView, ProfileView, AboutView: Beállítások, profil, névjegy.
• Állapotkezelés:
  • React useState, useEffect, useCallback hookok.
  • Feladatok listája, kiválasztott feladat, animációs állapotok.
• API kommunikáció:
  • apiService.js: REST hívások a FastAPI backendhez.
• Nemzetköziesítés:
  • i18n.js, fordítási JSON-ok.
• Reszponzivitás:
  • Saját useMediaQuery hook, Tailwind breakpoints.
• Sötét/világos mód:
  • Tailwind dark mode, localStorage-ban tárolt beállítás.

Folyamatok

• Feladat létrehozás:
  • Űrlap kitöltése → POST /tasks → lista frissül.
• Feladat szerkesztés:
  • Részletek nézetben szerkesztés → PATCH /tasks/{id} → lista frissül.
• Feladat törlés:
  • Törlés gomb → DELETE /tasks/{id} → animáció, lista frissül.
• Állapotváltás:
  • Kész/függőben kapcsoló → PATCH /tasks/{id}.

Hibakezelés

• Backend oldalon HTTP státuszkódok, részletes hibaüzenetek.
• Frontenden felhasználóbarát hibaüzenetek, visszaállítás sikertelen művelet esetén.

Telepítés/üzemeltetés

• A rendszer fejlesztői és teszt környezetben SQLite-ot használ, így nem igényel külön adatbázis szervert.
• A frontend és backend külön fejlesztői szerveren fut, CORS beállításokkal.

---