Ventida – niesamowity portal sprzedażowy
Hej! Pracuję nad nowym projektem – Marketplace Platform w stylu OLX/Allegro, który powstaje w Next.js z TypeScript. To ma być platforma sprzedażowa, gdzie ludzie mogą wystawiać swoje rzeczy, przeglądać oferty innych i wchodzić w interakcje – od lajkowania po kontakt ze sprzedawcami. Frontend ma minimalistyczny, premium design, a backend w TypeScript obsługuje całą logikę biznesową. Opowiem, co udało się zrealizować i jak to wszystko działa!
Zamysł projektu
Chciałem stworzyć miejsce, gdzie kupowanie i sprzedawanie jest proste, przyjemne wizualnie i efektywne. Platforma łączy sprzedawców i kupujących w przejrzysty sposób – z profilami użytkowników, systemem ocen, śledzeniem wyświetleń i polubień oraz wszystkim, czego potrzeba do zarządzania ogłoszeniami. Wszystko w nowoczesnym, responsywnym interfejsie opartym na minimalistycznej estetyce.
Co zostało zrealizowane?
Frontend w Next.js + TypeScript:
- Strona główna z hero section – gradientowe tło, duże typograficzne nagłówki („Discover unique finds”), flash deals badge, i interaktywna karta produktu z ceną, rabatem i przyciskami do akcji.
- Responsywny design oparty na Tailwind CSS, który świetnie wygląda na mobile i desktopie. Grid layouty dla produktów i kategorii z płynnymi animacjami.
Strona profilu użytkownika:
- Pełny widok profilu z awatarem, statystykami (ocena z gwiazdkami, liczba recenzji, lokalizacja).
- System tabów do przełączania między aktywymi ogłoszeniami a otrzymanymi recenzjami.
- Karty produktów z preview, tytułem, ceną, kategorią i statystykami (wyświetlenia, polubienia, data utworzenia) – wszystko z hover efektami.
- Smart logika – przycisk „Edit Profile” widoczny tylko dla właściciela profilu, „Contact Seller” dla innych użytkowników.
- Sekcja recenzji z systemem gwiazdek, nazwami recenzentów i komentarzami.
Autentykacja:
- Czyste formularze logowania i rejestracji z walidacją błędów i opcją logowania przez Google.
- Po rejestracji ekran sukcesu z animowanym spinnerem i automatycznym przekierowaniem.
- Pełna integracja z backendem przez REST API, z zarządzaniem tokenami w localStorage.
UX i komponenty:
- Reusable Navbar i Footer z ikonami Lucide React.
- Kategorie produktów z licznikami i wskaźnikami trendów („+12%”, „+8%”).
- Sekcja Trending Products z badgami („Hot”, „New”, „Sale”), ratingami sprzedawców i cenami z rabatami.
- CTA banner zachęcający do rozpoczęcia sprzedaży.
Backend w TypeScript:
- REST API z endpointami do zarządzania użytkownikami (
/user/:id), ogłoszeniami (/user/:id/listings) i recenzjami (/user/:id/reviews). - System autentykacji z tokenami JWT (
/auth/login). - Strukturalne DTOs dla typowania danych (AccountDetailDto, ShortListingSummaryDto, GetReviewDto).
Integracja frontend-backend:
- Automatyczne pobieranie danych użytkownika, jego ogłoszeń i recenzji przy ładowaniu profilu.
- Context API do zarządzania stanem zalogowanego użytkownika w całej aplikacji.
- Error handling z fallbackami dla błędów API.
Platforma działa end-to-end – od rejestracji, przez przeglądanie profili i ogłoszeń, po system recenzji. Design jest czysty i profesjonalny, a architektura gotowa do dalszego rozwoju!