Valeriia Stratulat
Zaproponuj Valeriia pracę nad swoim kolejnym zleceniem.
Ranking
Poziom znajomości języków obcych
Umiejętności i kwalifikacje
Portfolio
-
Strona docelowa dla konferencji edukacyjnej "EduConf"
Układ HTML i CSSOpracowanie responsywnej strony wizytówki dla międzynarodowej konferencji edukacyjnej. Projekt demonstruje klasyczne podejście do tworzenia czystych i semantycznych stron internetowych.
Cechy techniczne i realizacja:
… Semantyczne układanie: Wykorzystanie nowoczesnych standardów HTML5 dla lepszego indeksowania przez wyszukiwarki (SEO).
Stylizacja: Praca z CSS3 (Flexbox/Grid), co zapewnia wyraźną strukturę bloków i elementów.
Responsywność: Strona poprawnie wyświetla się na różnych typach urządzeń (desktop, tablet, mobilny) dzięki zapytaniom medialnym.
Interaktywność: Realizacja płynnej nawigacji (Smooth Scroll) oraz stylizowanych efektów hover dla przycisków i kart.
Struktura: Projekt zawiera bloki "Hero", "About", "Schedule" oraz formularz kontaktowy, co czyni go gotowym rozwiązaniem dla podobnych wydarzeń.
Narzędzia: HTML5, CSS3
-
Expense Tracker — platforma do zarządzania finansami
Programowanie stron internetowychKategoria: Programowanie webowe
Stos technologiczny: Next.js 15 (App Router), TypeScript, Zustand, React Query, Formik, Axios.
Opis:
… To wysokowydajna aplikacja webowa do zarządzania osobistymi finansami, skoncentrowana na architekturze gotowej do produkcji. Projekt realizuje pełny cykl interakcji użytkownika z danymi w czasie rzeczywistym poprzez responsywny interfejs.
Kluczowa funkcjonalność i zrealizowane zadania:
Kompleksowa autoryzacja: Wdrożono system zabezpieczonych tras (auth i private layouty), który zapewnia bezpieczeństwo danych osobowych użytkowników.
Zarządzanie stanem (State Management): Wykorzystano Zustand do łatwego i szybkiego zarządzania globalnym stanem aplikacji oraz React Query do efektywnej synchronizacji z API.
Interaktywny Dashboard: Opracowano panel sterowania do wizualnego monitorowania salda i historii transakcji.
Praca z formularzami: Skonfigurowano złożoną walidację transakcji finansowych za pomocą Formik i Yup.
Responsywne układanie: Zrealizowano podejście mobile-first, które zapewnia wygodę użytkowania na smartfonach i tabletach.
Zalety techniczne:
Czysta architektura: Wyraźny podział logiki na komponenty, usługi API (lib/) oraz scentralizowane typy TypeScript.
Typizacja: 100% pokrycie kodu typami w celu minimalizacji błędów i łatwego skalowania projektu.
Optymalizacja: Szybkie ładowanie stron dzięki zaletom Next.js App Router.
#Next.js #TypeScript #zustand #React Query #Axios
-
Platforma turystyczna "Naturalne podróże" (Rozwój Fullstack)
Programowanie stron internetowychProjekt zespołowy, mający na celu stworzenie wygodnej usługi do wyszukiwania i planowania ekologicznych tras w Ukrainie. Projekt zrealizowany na nowoczesnym stosie technologii z podziałem na część kliencką i serwerową.
Mój wkład i rozwiązania techniczne:
… Architektura autoryzacji (Next.js):
Opracowałam i wdrożyłam system bezpiecznej autoryzacji użytkowników.
Skonfigurowałam zarządzanie stanem sesji za pomocą React Context (AuthContext), co pozwoliło na centralne przechowywanie danych o użytkowniku.
Zrealizowałam mechanizm pracy z tokenami JWT (przechowywanie, sprawdzanie terminu ważności i automatyczne logowanie).
Frontend-rozwoju:
Stworzyłam interaktywne formularze rejestracji i logowania z walidacją danych po stronie klienta.
Wdrożyłam ochronę prywatnych tras (Protected Routes), co ogranicza dostęp nieautoryzowanych użytkowników do osobistych kont i tworzenia treści.
Zintegrowałam frontend z REST API dla dynamicznego wyświetlania tras.
Integracja backendu:
Pracowałam z częścią serwerową na Node.js/Express do obsługi zapytań autoryzacji i walidacji danych po stronie serwera.
Skonfigurowałam interakcję z bazą danych w celu przechowywania profili użytkowników i ich tras.
Stos technologiczny:
Frontend: Next.js, TypeScript, Tailwind CSS, React Context API.
Backend: Node.js, Express, REST API.
Współpraca: Git (praca zespołowa przez Pull Requests).
Link do backendu: https://github.com/StratulatValeria/pryrodni-mandry-back
#Next.js #Node.js #React/TypeScript
-
Rejestr dokumentów rady miejskiej (Desktop-first)
Javascript & TypescriptOpracowanie funkcjonalnego modułu do przeglądania i wyszukiwania oficjalnych dokumentów. Projekt demonstruje umiejętności budowania logiki filtrowania dużych zbiorów danych oraz pracy z nowoczesnymi frameworkami.
Cechy techniczne i rozwiązania:
… Stos: Next.js 15 (App Router), TypeScript, CSS Modules.
Dynamiczne filtrowanie: Zrealizowano wielopoziomowe wyszukiwanie według typu dokumentu (rozwiązania, zarządzenia, polecenia), obszaru działalności oraz statusu.
Zarządzanie stanem: Wykorzystanie URLSearchParams do synchronizacji filtrów z linkiem, co pozwala na zachowanie wyników wyszukiwania przy przeładowaniu strony.
Typizacja: Pełne wsparcie TypeScript w celu zapewnienia stabilności kodu i zapobiegania błędom podczas pracy z obiektami danych.
Architektura: Interfejs zorientowany na desktop z naciskiem na wygodę obsługi dużych tabel danych.
#Next.js #TypeScript
-
RentalCar — Serwis rezerwacji i wynajmu samochodów
Javascript & TypescriptNowoczesna platforma Fullstack do wyszukiwania i wynajmu pojazdów. Projekt zrealizowany jako SPA (Single Page Application) z naciskiem na wysoką prędkość działania oraz intuicyjny interfejs UX/UI.
Cechy techniczne i rozwiązania architektoniczne:
… Framework: Zbudowano na Next.js 15 z wykorzystaniem App Router. Zapewnia to efektywną routyzację (dynamiczne trasy /catalog/:id) oraz szybkie ładowanie treści.
Zarządzanie stanem: Globalne zarządzanie stanem aplikacji zrealizowane przez Zustand. Umożliwiło to stworzenie wygodnego systemu filtrowania samochodów oraz funkcjonalności „Ulubione”.
Persistencja: Dzięki integracji Middleware Persist, wybrane przez użytkownika samochody są przechowywane w LocalStorage, co pozwala na zachowanie danych nawet po zamknięciu zakładki lub odświeżeniu strony.
Typizacja: Kod w całości napisany w TypeScript, co gwarantuje stabilność aplikacji i ułatwia dalsze wsparcie.
Optymalizacja: Wdrożono nowoczesne metody ładowania obrazów i danych w celu minimalizacji opóźnień przy pracy z dużym katalogiem.