Studiu de caz03 / 06
Maximum
Magazin de electronice · magazin + consolă de administrare
La RocketSEO sunt principalul dezvoltator front-end al magazinului maximum.md și al consolei lui de administrare. Duc funcționalitățile de la sarcină până în producție, în mare parte singur.
- Rol
- Middle Front-end Developer
- Perioadă
- mar. 2026 – prezent
- Context
- Agenție · RocketSEO
- Format
- Hibrid · Chișinău
- Next.js 14 App Router
- TypeScript strict
- Apollo Client
- apollo-link-rest
- next-intl
- SCSS Modules
- Mantine
- React Bootstrap
- Formik + Yup
- Jest + RTL
Sarcina
Maximum este unul dintre retailerii de electronice de top din Moldova, cu un catalog mare în română și rusă. Magazinul și consola de administrare sunt o aplicație Next.js 14 peste un backend REST. Treaba mea este să livrez constant funcționalități pentru comandă, căutare și admin fără să stric o bază de cod mare, strict tipizată, în care lucrează și alți dezvoltatori.
- Comandă cu livrare și ridicare din magazin, care merge pentru clienți reali de pe telefon
- Filtre de căutare care arată câte produse rămân pentru fiecare opțiune
- Instrumente de admin, ca echipa să gestioneze comenzile, bannerele și SEO fără dezvoltator
Ce am construit
Procesul de comandă
- Pașii de livrare și de adresă rulează în ordine, așa că un câmp actualizat nu se pierde niciodată.
- Ridicare din magazin, cu magazinele încărcate pe limbă și adresa magazinului afișată în selector.
- Pagini pentru statusul plății, cu texte localizate în coș și la comandă.
- Un selector de dată localizat (RO/RU, săptămâna începe luni), mască de telefon pe fiecare formular de comandă și validare care apare doar după o trimitere eșuată.
- Un buton de precomandă legat de formularul de comandă rapidă.
- Recuperarea coșului expirat și eliminarea comenzilor duplicate create la finalizarea comenzii.
Căutare fațetată
- Am mutat căutarea pe noul backend cu filtre, cu filtru pe categorii și numărători live pe fațete.
- Numărul de opțiuni la filtrele de specificații, numărători pe statusuri în bara de filtre și filtre localizate cu tooltip-uri.
- Numărul de produse din categorie vine din totalul listei, cu datele fațetelor ca rezervă la prima încărcare. Câmpurile de preț sunt validate.
- Sortare în rezultatele căutării, brandul ca filtru real și o căutare din header refăcută, cu filtre rapide.
Consola de administrare
- Lista comenzilor și pagina comenzii, plus crearea și ștergerea comenzilor.
- Un manager de fișiere construit de la zero, cu foldere, căutare și miniaturi.
- Zone de bannere cu filtrare, linkuri promo și setările site-ului cu câmpuri SEO.
Sistem de design și componente comune
- Tokenuri de culoare pentru borduri, stări și hover. Toate culorile scrise direct în cod au trecut pe ele, așa că tema luminoasă și cea întunecată vin din aceeași paletă.
- Stilurile inline mutate în CSS Modules, cu un scurt document de reguli UI, ca toată echipa să lucreze la fel.
- O singură paginare pentru toate listele, o singură săgeată de derulare pentru carusele și tabele și stări de focus pentru tastatură la paginare și tooltip-uri.
- Pagina de comparare refăcută pentru desktop și mobil, cu prima coloană fixată, și un meniu de catalog pe tot ecranul pe telefon.
SEO, cont și mobil
- Taguri Open Graph și meta pentru paginile de produs, categorie, brand și pagina principală, plus H1 și titluri pentru paginile de favorite și comparare.
- Versiuni mobile pentru paginile de categorie, produs, coș, comandă, principală și căutare. Un meniu burger, un meniu de catalog refăcut și o fereastră de credit refăcută.
- Contul clientului a primit adrese, restabilirea contului, restabilirea parolei cu câmp pentru cod și produsele văzute recent.
Rezultat
- de commituri din martie 2026
- 150+
- zone de care răspund (comandă, căutare, admin, sistem de design)
- 4
- limbi, RO și RU
- 2
În echipă lucrez în mare parte singur. Funcționalitățile trec prin pull requesturi într-o bază de cod TypeScript strictă, cu teste Jest și React Testing Library, iar testele le țin la zi cu componentele pe care le schimb.
Comanda și căutarea
Ambele funcționalități țin de bani și de conversie, așa că cea mai mare parte a muncii a fost în stare și cazuri-limită, nu în markup. Accesul la date urmează modelul proiectului operation → repository → hook → component, cu Apollo Client peste REST.