Informatii generale
- Categorie: Utilitar
- Judetul: Galați
- Surse: GitHub - gabrielrusu2712/Feelio · GitHub
Descriere
Într-o lume a vitezei, vrem să va prezentăm aplicația noastră, Feelio. Obiectivul acesteia este ancorarea în prezent. Ne bazăm pe studii de psihologie care arată că observarea micilor victorii zilnice este una dintre cele mai rapide căi spre echilibru emoțional. Feelio este o aplicație web progresivă (PWA) React, poate fi instalată pe telefon și desktop, creată pentru a sprijini adolescenții în monitorizarea stării de bine, printr-o combinație de instrumente practice și elemente interactive. Aplicația urmărește obiceiuri zilnice importante (somn, apă, alimentație, sport, vibe-un concept creeat de noi) monitorizate prin completarea unor bare de progres, oferă un jurnal personal, un modul de explorare GPS, un album de amintiri, un asistent conversațional AI și un joc de tip arcade. Toate acestea sunt legate într-un singur flux motivant: adunarea XP-ului, niveluri și colectarea stelelor.
Tehnologii
Feelio este o aplicație client (frontend): aproape toată logica rulează înbrowser, în React, nu avem un server de backend propriu, în schimb ne bazăm peservicii cloud gestionate — o abordare de tip BaaS (Backend-as-a-Service): Firebase Authentication pentru conturi și Cloud Firestore pentru baza de date, apelate direct din client prin SDK. Singurul cod „de server” pe care l-am scris este o funcție serverless minimală (Cloudflare Worker) care are un singur rol: să intercepteze cererile către AI, astfel încât cheia API să nu ajungă niciodată în browser. Deci proiectul este preponderent frontend, fără backend propriu de administrat.
Organizarea codului — arhitectură pe domenii (feature-first). Codul sursă este împărțit în domenii independente, fiecare cu aceeași structură internă .Reguli de arhitectură (impuse și prin ESLint):
• Izolarea domeniilor: un fișier dintr-un domeniu nu importă din alt domeniu ce e comun la ≥2 domenii urcă în shared/.
• Separarea smart/dumb: componentele din features/ conțin logica (Redux, cereri de date), cele din ui/ sunt pur prezentaționale și comunică prin proprietăți și callback-uri.
• Extensibilitate: destinațiile navigabile ale aplicației sunt descrise într-o singură configurație (content-views), din care se generează și rutele; adăugarea unei pagini noi înseamnă o intrare în această listă + o rută, nu rescrierea layout-ului.
• Managementul stării se face cu Redux Toolkit (slice-uri per domeniu +createAsyncThunk pentru fluxuri asincrone), cu persistență locală selectivă (redux-persist) pentru randare instantanee la reîncărcare.
• Sistemul de design este generat cu Style Dictionary : este bazat pe design tokens ce definesc tema si reprezinta singura sursa de adevar in definirea temei. Aceasta este consumata de catre componente folosind styled-components. Tokenii contin valori pentru ambele variatii de tema (light/dark), ajustand astfel intreaga tematica dintr-un singur loc.
II.2. Tehnologiile folosite
- TypeScript- Limbaj sursă
- React 19- UI
- Vite- Build/dev
- Redux Toolkit + redux-persist- stare
- React Router- Navigare
- Styled-components + Style Dictionary- Stilizare pe componente + tokeni de design pentru consistență și teme.
- i18next / react-i18next- Suport complet Română/Engleză
- Firebase Authentication- Autentificare gestionată, fără server propriu.
- Cloud Firestore (NoSQL)- Sincronizare în timp real, reguli de securitate declarative.
- Leaflet.js- Bibliotecă open-source pentru hărți interactive.
- Canvas API- Randare eficientă pentru jocul arcade.
- Chart.js- Grafice clare pentru istoricul emoțional.
- @dnd-kit**- Reordonarea prin drag & drop a panourilor pe desktop.
- Google Gemini API- Model conversațional performant; cheia rămâne pe server.
- PWA (Web App Manifest + Service Worker)**- Instalare/offline
- Senzori folosiți. Aplicația folosește geolocația (GPS) prin API-ul de browser în modulul Explorer, pentru a calcula distanța dintre utilizator și punctele de pe hartă și a valida revendicarea recompenselor.
Cerinte sistem
Browser modern compatibil cu aplicații web (Chrome, Edge, Firefox, Safari), conexiune la internet pentru sincronizarea datelor și funcțiile AI, suport JavaScript și geolocație (GPS) pentru modulul Explorer. Aplicația poate fi instalată ca PWA și funcționează pe desktop și dispozitive mobile.
Realizatori
Denisa Tufaru
- Scoala: Colegiul National Mihail Kogălniceanu
- Clasa: 11
- Judet: Galați
- Oras: Galați
Gabriel Rusu
- Scoala: Colegiul Național Mihail Kogălniceanu
- Clasa: 11
- Judet: Galați
- Oras: Galați
Screenshots
