# PROIECT: WEBSITE PERSONAL PREMIUM, DINAMIC, CU BLOG ȘI CMS VIZUAL PROPRIU

## 1. Rolul tău și obiectivul proiectului

Acționează ca o echipă completă formată din:

- Senior Full-Stack Developer
- Senior UI/UX Designer
- Motion Designer specializat în animații web
- Software Architect
- Specialist SEO tehnic
- Specialist în securitate web și optimizarea performanței

Obiectivul este să proiectezi și să construiești un website personal premium, modern, extrem de dinamic și elegant, având ca funcționalitate principală un blog personal, dar cu o arhitectură care să permită extinderea ulterioară în mai multe direcții.

Website-ul trebuie să aibă propriul backend și un panou de administrare complet vizual, simplu de utilizat de către o persoană care nu cunoaște HTML, CSS, JavaScript, baze de date sau programare.

**Principiul fundamental al proiectului: orice operațiune obișnuită de administrare a conținutului trebuie să poată fi realizată vizual, fără scriere de cod.**

Nu construi doar un prototip, un landing page sau un design static. Construiește o aplicație web funcțională, cu frontend, backend, bază de date, autentificare, stocare de imagini și editor de articole.

Începe prin a analiza proiectul existent și fișierele din directorul de lucru. Dacă există deja un proiect, păstrează componentele funcționale și integrează noile funcționalități în mod coerent. Dacă directorul este gol, inițializează proiectul de la zero.

Nu șterge fișiere și nu suprascrie configurații importante fără să verifici mai întâi ce conțin.

## 2. Direcția de design

Vreau un website cu un aspect premium, contemporan, memorabil și foarte bine finisat.

Nu vreau un blog WordPress generic, un template banal sau o pagină cu secțiuni standard puse una sub alta fără personalitate.

Inspiră-te din principiile de design întâlnite la website-urile editoriale premium, portofoliile digitale contemporane și publicațiile moderne.

### Caracteristici vizuale

- Design editorial modern, cu personalitate.
- Tipografie expresivă, cu fonturi atent alese.
- Titluri mari și ierarhie tipografică puternică.
- Spațiere generoasă și layout-uri asimetrice bine controlate.
- Imagini mari, tratate editorial.
- Carduri de articole cu interacțiuni elegante.
- Elemente grafice subtile, forme geometrice și detalii vizuale animate.
- Tranziții fluide între secțiuni și pagini.
- Microinteracțiuni pentru butoane, linkuri, imagini și meniuri.
- Header modern, care se adaptează la scroll.
- Footer bine structurat.
- Design responsive complet pentru desktop, laptop, tabletă și telefon.

Alege o direcție vizuală coerentă, cu un sistem de culori, fonturi, spațieri, raze de colț și animații reutilizabile.

Nu folosi efecte doar pentru a umple spațiul. Fiecare animație trebuie să contribuie la experiență și la identitatea website-ului.

### Identitate vizuală configurabilă

Construiește un sistem care să permită schimbarea ulterioară a:

- Logo-ului.
- Numelui website-ului.
- Culorilor principale și secundare.
- Fonturilor.
- Imaginilor principale.
- Aspectului cardurilor.
- Stilului butoanelor.
- Headerului și footerului.

Aceste elemente trebuie să poată fi modificate centralizat, fără intervenții repetate în cod.

## 3. Animații și efecte de tranziție

Vreau un website vizibil dinamic, cu multe efecte de tranziție, dar fără să devină obositor sau să sacrifice performanța.

Utilizează Framer Motion, cunoscut în prezent și sub numele de Motion for React, sau o alternativă potrivită ecosistemului ales.

Implementează următoarele efecte, acolo unde au sens:

1. Animație de apariție la încărcarea inițială a paginii.
2. Animații progresive pentru titluri, subtitluri și elemente grafice.
3. Reveal animations la scroll, când secțiunile intră în viewport.
4. Tranziții line între pagini.
5. Efecte parallax subtile pentru anumite imagini și elemente decorative.
6. Carduri de articole cu hover animat.
7. Imagini care își schimbă ușor scara la hover.
8. Butoane cu animații de hover și feedback vizual la apăsare.
9. Meniu mobil cu animație de deschidere și închidere.
10. Header care se transformă discret în timpul scrollului.
11. Tranziții animate între imaginea de copertă și pagina articolului, dacă sunt implementabile fără probleme de navigare.
12. Indicator vizual de progres al lecturii unui articol.
13. Animații pentru încărcarea imaginilor și a conținutului.
14. Tranziții elegante pentru filtrele și categoriile blogului.
15. Animații discrete pentru componentele interactive și stările de încărcare.

Animațiile trebuie să folosească în principal transformări și opacity, evitând recalculările costisitoare de layout.

Nu utiliza animații care blochează scrollul, întârzie accesul la conținut sau împiedică navigarea normală.

Respectă preferința sistemului pentru reducerea mișcării prin `prefers-reduced-motion`.

## 4. Structura frontend-ului

Construiește inițial următoarele pagini:

### A. Pagina principală

Trebuie să includă:

- Header cu logo și navigație.
- Hero section impresionant, cu titlu personalizabil.
- Text introductiv despre autor.
- Imagine sau compoziție vizuală principală.
- Secțiune cu articole recomandate.
- Secțiune cu cele mai recente articole.
- Categorii principale.
- Secțiune „Despre mine”.
- Secțiune de abonare la newsletter, pregătită pentru integrare reală.
- Footer cu navigație, informații și linkuri sociale.

Pagina principală trebuie să arate ca un website personal autentic, nu ca o temă de blog descărcată.

### B. Pagina de blog

Include:

- Listarea articolelor publicate.
- Carduri vizuale cu imagine, titlu, rezumat, categorie și dată.
- Paginare sau încărcare progresivă.
- Filtrare după categorie și etichetă.
- Căutare după titlu și conținut.
- Sortare după cele mai noi și, dacă există date relevante, cele mai populare.
- Stări vizuale pentru rezultate inexistente și încărcare.

### C. Pagina individuală a articolului

Fiecare articol trebuie să aibă:

- Titlu.
- Subtitlu sau rezumat.
- Imagine de copertă.
- Autor.
- Dată de publicare.
- Timp estimat de lectură.
- Cuprins generat automat din titlurile intermediare.
- Conținut formatat editorial.
- Imagini inserate în text.
- Galerie de imagini, dacă este cazul.
- Butoane de distribuire.
- Indicator de progres al lecturii.
- Articole similare.
- Navigare către articolul anterior și următor.
- Opțiune de revenire la lista de articole.

URL-urile articolelor trebuie să fie curate, stabile și optimizate SEO.

### D. Pagina „Despre mine”

Pagină configurabilă vizual, cu fotografie, biografie, interese, proiecte și linkuri sociale.

### E. Pagina de contact

Formular funcțional, validare, mesaje clare pentru utilizator și protecție anti-spam.

### F. Pagini legale

Pregătește structura pentru politica de confidențialitate, politica de cookie-uri și termenii de utilizare, fără a pretinde că textele juridice generate automat sunt verificate de un avocat.

## 5. Backend și panou de administrare

Construiește o zonă de administrare separată, accesibilă la o adresă de tip `/admin`.

Aceasta trebuie protejată prin autentificare reală și autorizare pe server.

Panoul de administrare trebuie să fie simplu, intuitiv și complet utilizabil de către o persoană fără experiență tehnică.

Nu afișa cod HTML, CSS, JSON sau alte elemente tehnice în interfața normală de administrare.

Folosește denumiri ușor de înțeles în limba română.

### Dashboard

După autentificare, administratorul trebuie să vadă:

- Numărul total de articole.
- Articole publicate.
- Articole în ciornă.
- Articole programate.
- Articole modificate recent.
- Acces rapid la crearea unui articol.
- Acces rapid la administrarea imaginilor.
- Acces rapid la categorii și setările website-ului.

Nu inventa statistici de trafic. Acestea trebuie afișate doar după integrarea unei surse reale de date.

### Administrarea articolelor

Creează o interfață prin care administratorul poate:

- Adăuga un articol nou.
- Deschide un articol existent.
- Modifica orice articol.
- Salva un articol ca ciornă.
- Previzualiza articolul înainte de publicare.
- Publica un articol.
- Programa publicarea pentru o dată și oră.
- Retrage un articol din publicare.
- Duplica un articol.
- Șterge un articol, cu solicitare de confirmare.
- Recupera o versiune anterioară, dacă există istoricul versiunilor.

Folosește etichete vizuale clare pentru stările articolului: Ciornă, Publicat, Programat și Arhivat.

Implementarea trebuie să funcționeze cu date reale persistate în baza de date.

## 6. Editor vizual de articole, asemănător Microsoft Word

Aceasta este una dintre cele mai importante funcționalități ale proiectului.

Vreau un editor WYSIWYG (What You See Is What You Get), adică ceea ce văd în editor să fie cât mai apropiat de aspectul articolului publicat.

Utilizatorul nu trebuie să cunoască HTML, Markdown, CSS sau alte limbaje.

Poți utiliza Tiptap cu extensiile necesare sau o altă bibliotecă matură, dacă oferă o experiență de editare mai bună.

### Bara de instrumente

Editorul trebuie să aibă butoane vizuale pentru:

- Bold.
- Italic.
- Subliniere.
- Text tăiat.
- Titlu principal și subtitluri.
- Paragraf normal.
- Liste cu buline.
- Liste numerotate.
- Liste de verificare.
- Aliniere la stânga, centru, dreapta și, dacă este justificat, justificat.
- Inserare link.
- Eliminare link.
- Citate.
- Separatoare între secțiuni.
- Inserare imagine.
- Inserare galerie foto.
- Inserare emoji.
- Inserare tabel simplu.
- Anulare și refacere.
- Copiere și lipire.
- Ștergerea formatării.
- Inserare de conținut din clipboard cu o curățare sigură a formatării.

Butoanele trebuie să aibă pictograme clare și tooltip-uri explicative.

Bara de instrumente trebuie să rămână ușor accesibilă în timpul editării, fără să ocupe excesiv spațiul disponibil.

### Formatarea textului

Administratorul trebuie să poată selecta un text și să îl formateze imediat, exact ca într-un editor de documente.

Adaugă posibilitatea de a:

- Modifica nivelul titlurilor.
- Schimba alinierea.
- Crea liste și subliste.
- Inseră linkuri cu text personalizat.
- Evidenția vizual citatele.
- Inseră separatoare.
- Formata conținutul fără să fie nevoie să cunoască structura tehnică a documentului.

Nu oferi un selector nelimitat de stiluri care poate distruge identitatea vizuală. Folosește stiluri predefinite, coerente cu designul website-ului.

### Inserarea emoji-urilor

Include un selector de emoji-uri accesibil din bara de instrumente.

Trebuie să existe:

- Categorii de emoji-uri.
- Căutare după nume.
- Inserare în poziția curentă a cursorului.
- Suport pentru emoji-uri pe desktop și telefon.

### Încărcarea imaginilor de pe telefon și calculator

Administratorul trebuie să poată insera imagini în articol fără cunoștințe tehnice.

Implementarea trebuie să permită:

- Selectarea unei imagini din galerie sau din sistemul de fișiere.
- Încărcarea mai multor imagini.
- Selectarea prin drag-and-drop, acolo unde dispozitivul permite.
- Inserarea imaginii în poziția curentă a cursorului.
- Previzualizarea imaginii înainte de inserare.
- Modificarea dimensiunii de afișare prin controale vizuale.
- Alinierea la stânga, centru sau dreapta.
- Adăugarea unei legende.
- Adăugarea textului alternativ pentru accesibilitate și SEO.
- Înlocuirea sau ștergerea unei imagini.
- Selectarea unei imagini de copertă.
- Alegerea punctului focal pentru decuparea imaginii de copertă, dacă soluția tehnică permite.
- Inserarea unei galerii foto.

Nu păstra imaginile doar în memoria browserului și nu salva în baza de date imaginile sub formă de șiruri Base64.

Încarcă fișierele într-un serviciu persistent de stocare, iar în baza de date salvează referințele și metadatele acestora.

Adaugă validarea tipului și dimensiunii fișierelor, limite configurabile și mesaje de eroare clare.

### Editare și salvare automată

Editorul trebuie să includă:

- Salvare automată la intervale sau după modificări.
- Indicator vizibil „Se salvează”, „Salvat” și „Eroare la salvare”.
- Buton de salvare manuală.
- Avertizare dacă utilizatorul încearcă să părăsească pagina cu modificări nesalvate.
- Protecție împotriva suprascrierii accidentale a modificărilor mai recente.
- Recuperarea conținutului salvat după o reîncărcare a paginii.
- Gestionarea corectă a erorilor de rețea.

Nu afișa niciodată mesajul „Salvat” înainte ca serverul să confirme persistența datelor.

### Câmpurile articolului

Pe lângă editor, formularul articolului trebuie să conțină câmpuri separate pentru:

- Titlu.
- Subtitlu.
- Slug URL generat automat și editabil.
- Rezumat.
- Imagine de copertă.
- Text alternativ pentru copertă.
- Autor.
- Categoria principală.
- Etichete.
- Data publicării.
- Status.
- Articol recomandat: Da/Nu.
- Titlu SEO.
- Meta description.
- Imagine pentru distribuire socială.

Câmpurile SEO pot avea valori implicite generate automat, dar trebuie să poată fi editate vizual.

## 7. Previzualizare vizuală înainte de publicare

Implementează o previzualizare a articolului care reproduce cât mai fidel pagina publică.

Administratorul trebuie să poată comuta între:

- Editor.
- Previzualizare desktop.
- Previzualizare tabletă.
- Previzualizare telefon.

Previzualizarea nu trebuie să publice automat articolul și nici să modifice starea acestuia.

Creează o rută de previzualizare securizată, disponibilă numai utilizatorilor autorizați, inclusiv pentru articolele nepublicate.

## 8. Arhitectură tehnică

Alege o arhitectură modernă, stabilă și ușor de întreținut.

Ca punct de plecare, prefer următorul stack, dacă nu identifici o incompatibilitate justificată:

- Next.js cu App Router.
- React și TypeScript.
- Tailwind CSS pentru stilizare.
- Motion pentru animații.
- Tiptap pentru editorul vizual.
- PostgreSQL pentru baza de date.
- Supabase pentru PostgreSQL, autentificare și stocare de imagini, dacă această variantă este potrivită pentru implementare și buget.
- Zod pentru validarea datelor.
- Un sistem de formulare și componente accesibile, coerente vizual.

Poți propune alternative tehnice, dar explică pe scurt beneficiile și compromisurile înainte de a schimba componentele fundamentale.

Nu utiliza date hardcodate ca substitut pentru backend.

Nu implementa un sistem de autentificare fictiv.

Nu stoca parole în clar și nu expune chei secrete în codul frontend.

Folosește variabile de mediu pentru credențiale și furnizează un fișier `.env.example` fără secrete reale.

Configurează corect politicile de acces la baza de date și stocare. Dacă utilizezi Supabase, folosește Row Level Security și politici explicite pentru fiecare tabel și operațiune.

Utilizatorii anonimi trebuie să poată citi doar articolele publicate. Modificarea, ștergerea, publicarea și administrarea conținutului trebuie să necesite autorizare reală.

Nu expune chei de tip service role în browser.

## 9. Arhitectură extensibilă

Deși website-ul începe ca un blog personal, arhitectura trebuie să permită dezvoltarea ulterioară fără rescrierea întregii aplicații.

Gândește sistemul modular.

Pregătește structura pentru viitoare module precum:

- Portofoliu de proiecte.
- Pagini personalizate.
- Galerie foto.
- Newsletter.
- Resurse și documente.
- Recenzii sau testimoniale.
- Pagini de prezentare a unor servicii.
- Bibliotecă de conținut.
- Eventual, o zonă cu acces restricționat.
- Eventual, funcționalități comerciale sau un magazin.

Nu construi acum toate aceste module. Creează însă o arhitectură în care ele pot fi adăugate ulterior fără să afecteze funcționarea blogului.

Folosește componente reutilizabile, servicii separate pentru accesul la date, validări centralizate și tipuri TypeScript clare.

Nu transforma proiectul într-o arhitectură excesiv de complicată. Prioritatea este un produs funcțional, sigur și ușor de extins.

## 10. Categorii, etichete și organizarea conținutului

Administratorul trebuie să poată gestiona categoriile fără cod.

Funcționalități:

- Creare categorie.
- Modificare categorie.
- Ștergere categorie cu verificarea articolelor asociate.
- Alegerea numelui și slug-ului.
- Adăugarea unei descrieri.
- Alegerea unei imagini sau pictograme, dacă designul o folosește.
- Gestionarea etichetelor.
- Asocierea mai multor etichete unui articol.

Structura trebuie să permită ulterior categorii ierarhice sau secțiuni distincte ale website-ului.

## 11. Gestionarea imaginilor și a fișierelor

Creează o bibliotecă media în panoul de administrare.

Administratorul trebuie să poată:

- Vizualiza imaginile încărcate.
- Căuta fișiere.
- Filtra după tip.
- Previzualiza o imagine.
- Încărca fișiere noi.
- Copia sau reutiliza o imagine într-un articol.
- Modifica metadatele.
- Șterge fișierele numai după verificarea referințelor.

Nu șterge automat o imagine din stocare dacă aceasta este utilizată în articole publicate sau în alte pagini.

Optimizează imaginile pentru livrare web și generează dimensiuni adecvate dispozitivelor, păstrând originalul dacă este necesar.

## 12. SEO și distribuire socială

Implementează:

- URL-uri canonice.
- Meta title și meta description configurabile.
- Open Graph și Twitter/X Cards.
- Sitemap XML generat automat.
- robots.txt.
- Date structurate Schema.org pentru articole.
- RSS feed.
- URL-uri stabile pentru articole.
- Redirecturi când se modifică slug-ul unui articol deja publicat.
- Pagini 404 personalizate.
- Metadate generate din conținutul real.

Nu indexa paginile de administrare, previzualizările private sau conținutul nepublicat.

Evită conținutul duplicat și asigură-te că paginile de categorii și articole sunt accesibile motoarelor de căutare.

## 13. Securitate

Securitatea trebuie implementată în aplicație, nu doar menționată în documentație.

Cerințe:

- Autentificare reală.
- Autorizare verificată pe server.
- Validarea datelor pe server.
- Protecția operațiunilor administrative.
- Protecție împotriva XSS și a conținutului HTML nesigur.
- Curățarea conținutului importat sau lipit în editor.
- Validarea încărcărilor de fișiere.
- Limitarea încercărilor de autentificare, dacă infrastructura permite.
- Protecție anti-spam pentru formularul de contact.
- Gestionarea sigură a sesiunilor.
- Erori fără expunerea secretelor sau a stack trace-urilor către vizitatori.
- Politici de acces explicite pentru baza de date și stocare.
- Backup și procedură documentată de restaurare.

Nu permite unui vizitator anonim să creeze un cont de administrator printr-un formular public.

Creează inițial un proces sigur de configurare a primului administrator, documentat clar.

## 14. Performanță și accesibilitate

Website-ul trebuie să fie rapid chiar dacă utilizează animații și imagini mari.

Cerințe:

- Încărcare optimizată a imaginilor.
- Lazy loading pentru imaginile care nu sunt vizibile inițial.
- Evitarea încărcării inutile a componentelor editorului pe paginile publice.
- Împărțirea bundle-urilor în funcție de pagină.
- Randare și caching adecvate pentru paginile publice.
- Evitarea layout shift-urilor.
- Gestionarea corectă a stărilor de încărcare și eroare.
- Navigare completă cu tastatura.
- Contrast adecvat.
- Etichete pentru controalele de formular.
- Focus vizibil.
- Respectarea preferinței pentru mișcare redusă.

Țintește un scor Lighthouse bun pentru Performance, Accessibility, Best Practices și SEO. Măsoară rezultatele și corectează problemele reale; nu pretinde că scorurile au fost obținute dacă nu ai rulat testele.

## 15. Experiența pe telefon

Website-ul și panoul de administrare trebuie să funcționeze foarte bine pe mobil.

Administratorul trebuie să poată, de pe telefon:

- Să se autentifice.
- Să creeze un articol.
- Să scrie și să formateze text.
- Să adauge emoji-uri.
- Să selecteze fotografii din galerie.
- Să încarce imagini.
- Să aleagă imaginea de copertă.
- Să salveze ciorna.
- Să previzualizeze articolul.
- Să publice sau să programeze articolul.

Butoanele trebuie să aibă dimensiuni potrivite pentru atingere, iar interfața să se adapteze la tastatura virtuală.

Nu presupune că toate gesturile desktop, precum drag-and-drop, sunt disponibile pe telefon. Oferă alternative vizuale.

## 16. Setări generale ale website-ului

Creează o pagină de setări în backend, fără cod, în care administratorul poate modifica:

- Numele website-ului.
- Logo-ul.
- Favicon-ul.
- Descrierea website-ului.
- Numele autorului.
- Fotografia autorului.
- Biografia scurtă.
- Linkurile către rețelele sociale.
- Adresa de contact.
- Imaginea implicită pentru distribuirea socială.
- Preferințele de afișare ale articolelor.
- Numărul de articole pe pagină.
- Informațiile din footer.
- Culorile principale, în limitele temei de design.

Pregătește integrarea viitoare cu Google Analytics și Google Search Console, fără să incluzi identificatori fictivi.

## 17. Gestionarea erorilor și experiența utilizatorului

Fiecare operațiune trebuie să aibă feedback vizual.

Exemple:

- „Articolul a fost salvat.”
- „Imaginea se încarcă.”
- „Imaginea a fost încărcată.”
- „Nu am putut salva modificările. Încearcă din nou.”
- „Nu ai permisiunea de a efectua această acțiune.”
- „Nu există articole în această categorie.”

Folosește notificări discrete, stări de încărcare și confirmări pentru operațiunile distructive.

Nu afișa mesaje tehnice greu de înțeles pentru utilizatorul obișnuit.

Dacă apare o eroare, păstrează pe cât posibil datele introduse de utilizator și oferă o modalitate clară de recuperare.

## 18. Testare și criterii de acceptanță

Nu considera proiectul finalizat doar pentru că aplicația pornește.

Testează efectiv următoarele scenarii:

1. Un administrator se poate autentifica.
2. Un administrator poate crea un articol.
3. Poate formata textul fără să scrie cod.
4. Poate insera emoji-uri.
5. Poate încărca imagini de pe calculator și telefon.
6. Imaginile rămân disponibile după reîncărcarea paginii și după o nouă sesiune.
7. Articolul poate fi salvat ca ciornă.
8. Articolul poate fi previzualizat fără a fi public.
9. Articolul poate fi publicat și apare pe site.
10. Articolul publicat are un URL corect.
11. Modificările unui articol se reflectă în pagina publică.
12. Articolele programate se publică la momentul stabilit, folosind un mecanism de programare fiabil.
13. Vizitatorii anonimi nu pot accesa funcțiile administrative.
14. Conținutul nepublicat nu este accesibil prin URL-uri publice sau API-uri neprotejate.
15. Editorul funcționează pe desktop și mobil.
16. Căutarea și filtrele funcționează cu date reale.
17. Formularele validează datele și tratează erorile.
18. SEO-ul de bază funcționează.
19. Aplicația trece verificările de tipuri, lint și build.
20. Nu există butoane care par funcționale, dar nu execută nicio acțiune reală.

Scrie teste automate pentru operațiunile importante și testează manual fluxul complet de publicare.

Dacă o funcționalitate depinde de o cheie API, un serviciu extern sau configurarea unui domeniu, implementează integrarea și documentează exact ce trebuie configurat. Nu simula succesul.

## 19. Metoda de lucru

Lucrează etapizat și autonom.

### Etapa 1: Analiză și plan

- Analizează fișierele existente.
- Identifică tehnologiile deja utilizate.
- Definește arhitectura.
- Identifică serviciile externe necesare.
- Propune structura directoarelor.
- Identifică riscurile tehnice.
- Prezintă un plan de implementare concis.

Nu te opri la plan. Continuă cu implementarea.

### Etapa 2: Design system și frontend

Construiește mai întâi sistemul vizual și paginile publice, folosind date de test numai pentru etapa inițială.

Definește componente reutilizabile și implementează animațiile.

### Etapa 3: Backend și baza de date

Configurează baza de date, autentificarea, autorizarea, stocarea media și modelele pentru articole, categorii, etichete și setările website-ului.

### Etapa 4: Editor și administrare

Implementează editorul vizual, biblioteca media, salvarea automată, previzualizarea, publicarea și programarea articolelor.

### Etapa 5: Integrare

Conectează frontend-ul la datele reale și elimină datele de test din fluxurile de producție.

### Etapa 6: Testare și remediere

Rulează testele, verifică build-ul, remediază erorile și testează experiența pe mobil.

### Etapa 7: Documentare și instalare

Creează:

- README în limba română.
- `.env.example`.
- Instrucțiuni pentru instalare.
- Instrucțiuni pentru rularea locală.
- Instrucțiuni pentru configurarea bazei de date.
- Instrucțiuni pentru crearea primului administrator.
- Instrucțiuni pentru deploy.
- Instrucțiuni pentru backup și restaurare.
- O scurtă explicație a modului de publicare a articolelor, destinată unei persoane fără experiență tehnică.

## 20. Reguli obligatorii de implementare

- Nu te limita la generarea fișierelor de interfață.
- Nu folosi date hardcodate ca substitut permanent pentru baza de date.
- Nu lăsa butoane decorative care pretind că execută acțiuni.
- Nu introduce cod inutil sau dependențe fără justificare.
- Nu compromite securitatea pentru a simplifica implementarea.
- Nu sacrifica performanța pentru animații.
- Nu face interfața administrativă inutil de complicată.
- Nu cere utilizatorului să editeze cod pentru operațiunile zilnice.
- Nu ascunde erorile și nu pretinde că testele au trecut fără să le rulezi.
- Nu înlocui funcționalitățile existente fără să verifici impactul.
- Folosește versiuni compatibile și stabile ale bibliotecilor.
- Păstrează codul modular, tipizat și ușor de întreținut.
- Explică în limba română orice decizie care necesită intervenția utilizatorului.

Dacă lipsește o informație neesențială, alege o soluție rezonabilă și continuă. Solicită intervenția mea numai atunci când este necesară o decizie reală, precum configurarea unui cont extern, furnizarea unei chei API sau alegerea unui serviciu cu costuri.

## 21. Rezultatul final dorit

La final vreau să am:

1. Un website personal cu design premium și animații moderne.
2. Un blog complet funcțional.
3. Un backend securizat.
4. Un editor vizual asemănător Word.
5. Posibilitatea de a scrie articole, a formata textul, a adăuga emoji-uri și a încărca fotografii de pe telefon.
6. Salvare automată și manuală.
7. Ciorne, previzualizare, publicare și programare.
8. O bibliotecă media reutilizabilă.
9. Administrarea categoriilor și etichetelor.
10. SEO tehnic de bază.
11. O arhitectură pregătită pentru extinderea în alte secțiuni.
12. O aplicație testată și documentată.
13. Instrucțiuni clare pentru instalare și publicare online.

**Criteriul suprem de succes:** o persoană fără cunoștințe tehnice trebuie să poată intra în panoul de administrare de pe telefon, să scrie un articol, să formateze textul, să adauge fotografii din galerie, să îl previzualizeze și să îl publice fără să aibă nevoie de ajutorul unui programator.

Începe prin a analiza proiectul și apoi construiește efectiv aplicația, pas cu pas. Nu te opri după ce ai creat designul. Continuă până când funcționalitățile implementate sunt conectate, testate și documentate.