Hero – stan gościa
RolaFrontend developer + wsparcie backendu
TypFullstack platforma contentowa
LokalizacjaProjekt kursowy
ZakresBudowa skalowalnej platformy treЕ›ciowej z autoryzacjД…, publikowaniem historii i profilem uЕјytkownika.
StackNext.js, TypeScript, Node.js, REST API
Czas realizacji2 tygodnie
Podsumowanie projektu
- Typ projektu
- Platforma fullstack
- Cel
- Zbudować platformę historii podróżniczych z kontami użytkowników, profilami i publikowaniem treści.
- Główne funkcje
- Autoryzacja
- Profile uЕјytkownikГіw
- Publikowanie historii
- Backend API
- Integracja z bazД… danych
- Moja rola
- WkЕ‚ad fullstack obejmujД…cy frontend, backend API, strukturД™ danych i implementacjД™ funkcji.
- Stack
- React
- Node.js
- MongoDB
- REST API
- Rezultat
- Platforma fullstack z kontami uЕјytkownikГіw, publikowaniem treЕ›ci i uporzД…dkowanД… integracjД… backendu.
Problem
Projekt wymagał stworzenia platformy fullstack, w której użytkownicy mogą rejestrować konta, publikować historie, zarządzać profilem i wchodzić w interakcje z treścią.
Rozwiązanie
W zespole 12-osobowym realizowaЕ‚em zadania frontendowe i wspieraЕ‚em backend. ZaimplementowaЕ‚em kluczowe komponenty UI, miД™dzy innymi nagЕ‚Гіwki, modale, karty historii i Е›cieЕјkД™ edycji profilu, oraz pracowaЕ‚em nad wspГіlnymi strukturami danych.
Efekt
Platforma obsЕ‚uguje autoryzacjД™, publikowanie i interakcje uЕјytkownikГіw, pokazujД…c praktycznД… architekturД™ fullstack i pracД™ zespoЕ‚owД….
Platforma historii z podróży
- ZaimplementowaЕ‚em kilka wariantГіw nagЕ‚Гіwka dla rГіЕјnych kontekstГіw strony
- ZbudowaЕ‚em komponent modala potwierdzajД…cego (ConfirmModal)
- PrzygotowaЕ‚em komponenty kart historii
- ZaimplementowaЕ‚em stronД™ edycji profilu
- WdroЕјyЕ‚em logikД™ aktywnej nawigacji na podstawie trasy
- ZintegrowaЕ‚em system SVG sprite
- ZoptymalizowaЕ‚em zasoby obrazГіw i strukturД™ katalogu public
- WsparЕ‚em typowanie backendu i wspГіlne struktury danych
- DodaЕ‚em dokumentacjД™ projektu (README)
Platforma historii z podróży
Publiczny widok startowy zapraszajД…cy nowych uЕјytkownikГіw.
Platforma historii z podróży
Widok po zalogowaniu z rozszerzonД… nawigacjД… i dodatkowymi akcjami.
Hero – stan zalogowany
Platforma historii z podróży
ЕљcieЕјka logowania dajД…ca dostД™p do publikacji i funkcji profilu.
Widok autoryzacji
Platforma historii z podróży
Dopasowanie gЕ‚Гіwnego widoku aplikacji do desktopu i mobile.
Widok desktop
Widok mobile
Platforma historii z podróży
GЕ‚Гіwny feed historii wraz z sekcjami odkrywania wedЕ‚ug kategorii.
Feed historii i odkrywanie
Platforma historii z podróży
Katalog autorГіw uЕ‚atwiajД…cy przeglД…danie profili uЕјytkownikГіw.
Widok spoЕ‚ecznoЕ›ci
Platforma historii z podróży
Obszar profilu do zarzД…dzania aktywnoЕ›ciД… i zapisanymi treЕ›ciami.
Widok profilu uЕјytkownika
Platforma historii z podróży
ЕљcieЕјka publikacji nowych historii podrГіЕјniczych.
Tworzenie historii
Platforma historii z podróży
Widok artykuЕ‚u z metadanymi autora i kontekstem kategorii.
Widok szczegГіЕ‚Гіw historii
Potrzebujesz strony, która ułatwia klientom kontakt?
Przygotuję przejrzystą stronę z prostą ścieżką do zapytania, rezerwacji albo rozmowy.