Pimp Your Grill - Aplicație Web Salut! Bine ai venit în proiectul Pimp Your Grill. Aceasta este o aplicație web completă (Full Stack) dedicată comunității de pasionați de grătare. Aici utilizatorii își pot etala echipamentele, pot primi aprecieri și pot vedea care sunt cele mai populare grătare din comunitate.
Ce face aplicația Nu este doar un simplu site de prezentare, ci o platformă interactivă. Iată funcționalitățile principale:
Autentificare completă Poți să îți creezi un cont nou și să te loghezi pentru a avea acces la funcțiile avansate.
Profil de Utilizator Ai acces la un Dashboard personal unde îți poți vedea datele de contact și lista grătarelor postate de tine.
Postarea unui Grătar Poți adăuga un grătar nou în platformă încărcând o poză, setând un titlu, o descriere și un preț.
Sistem de Like-uri Sincronizat Aprecierile se actualizează în timp real. Dacă dai like unui grătar în lista de căutare, acesta se actualizează instantaneu și în lista de Top, fără să reîncarci pagina.
Feed Inteligent (Best Grills) Pagina principală este împărțită în două secțiuni:
Stânga: O listă completă unde poți căuta grătare după nume.
Dreapta: Un Top 5 generat automat, care arată cele mai apreciate grătare.
Interfață Mobilă Adaptivă Pe telefon, listele lungi se transformă automat într-un carusel (slider) pentru a fi mai ușor de navigat prin atingere.
Administrare Postări Dacă ești proprietarul unui grătar, poți deschide detaliile acestuia și ai opțiunea de a-l șterge definitiv din platformă.
Recuperare Parolă Există un sistem securizat pentru situațiile în care uiți parola, care generează un link unic de resetare.
Tehnologii Folosite Proiectul este construit folosind stiva MERN:
Frontend (Partea vizuală): Construit cu React.js. Folosește CSS modern pentru design și Axios pentru comunicarea cu serverul.
Backend (Serverul): Construit cu Node.js și Express.js. Acesta gestionează logica aplicației și securitatea.
Bază de Date: MongoDB Atlas (Cloud). Aici sunt stocate toate informațiile despre utilizatori și grătare, inclusiv imaginile.
Note despre proiect Resetarea Parolei: Deoarece aplicația este în stadiul de dezvoltare și nu folosește un serviciu de email plătit, funcția de "Forgot Password" simulează trimiterea email-ului. Link-ul de resetare este generat și afișat în consola serverului pentru verificare.
Stocarea Imaginilor: Imaginile încărcate de utilizatori sunt transformate în text și salvate direct în baza de date pentru a simplifica procesul de găzduire.
Ce am învățat în cele 3 săptămâni: Crearea unei baze de date și conectarea acesteia către front-end prin intermediul unui server Importanța lui App.jsx [am stricat proiectul de prea multe ori pentru că am greșit ceva acolo :( ] Crearea de componente reutilizabile, pentru a face codul mai readable (#cleancoding) Adaptarea interfeței pentru dispozitive mobile (cât de cât)