Wróć do portfolio

KaucjApp.

System klasy Enterprise do obsługi systemu kaucyjnego. Marketplace łączący użytkowników niekoniecznie chcących osobiście zwracać opakowania kaucyjne, z osobami, które zrobią to za nich. Zbudowany z myślą o usprawnieniu procesu zwrotu opakowań kaucyjnych.

Apka mobilna

Interfejs, zapewniający użytkownikowi łatwy dostęp

Panel administracyjny

Zarządzanie wszystkimi danymi systemu

Backend

5 mikroserwisów, API Gateway, OAuth2 JWT.

Event-Driven Data

Azure Event Hubs (Kafka)

Zakres systemu

Twórcy Systemu

Meet the Team

KaucjApp to efekt pracy zespołowej. Różne specjalizacje spięte w jedną spójną architekturę.

Zdjęcie - Kamil Maślanka

Kamil Maślanka

Frontend Developer

"Odpowiadam za cały interfejs aplikacji mobilnej oraz panelu administracynjego. Połączyłem backend z frontendem korzystając z najnowszych technologii, jednocześnie gwarantując świetny UX."

Zdjęcie - Konrad Mateja

Konrad Mateja

Backend Developer

"Zaprojektowałem strukturę mikroserwisów (Spring Boot / Azure). Wprowadziłem komunikację asynchroniczną pomiędzy mikroserwisami wykorzystując Spring Kafka oraz Azure Event Hubs."

Zdjęcie - Maksymilian Gędłek

Maksymilian Gędłek

Backend Developer

"Jestem odpowiedzialny za integracje backendu z bazą danych PostreSQL. Tworzę kluczowe endpointy w poszczególnych mikroserwisach zapewniające działanie systemu."

Tech Stack

BOM i kluczowe zależności zdefiniowane w architekturze systemu.

Mobile (Expo / React Native)

  • CoreExpo SDK ~54, React 19, RN 0.81 (New Arch Enabled)
  • Routingexpo-router (file-based, route groups)
  • State & DataZustand, TanStack React Query v5
  • NetworkAxios singleton (interceptors, 401 refresh queue)
  • Geo & Mapsreact-native-maps, supercluster, expo-location
  • UI & MotionReanimated, bottom-sheet, Lottie, Lucide

Backend (Java / Spring)

  • RuntimeJava 25, Spring Boot 4.0.3, Virtual Threads
  • ArchitectureAPI Gateway (BFF) + 5 Microservices
  • SecuritySpring Security OAuth2 (Resource Server), JJWT
  • PersistenceSpring Data JPA, Hibernate 7.1, Hypersistence
  • MessagingSpring Kafka (SASL_SSL / PLAIN JAAS)
  • Real-timespring-boot-starter-websocket (Offers/Users)

DevOps & Infrastructure

  • Cloud ProviderMicrosoft Azure
  • IaCAzure Bicep (Container Apps, ACR, Log Analytics)
  • Message BrokerAzure Event Hubs (Kafka-compatible)
  • Build PipelineGraalVM Native Image (multi-stage Docker)
  • DeploymentAzure Developer CLI (azd)
  • DatabasesAzure Database for PostgreSQL (Multi-DB)

User Flow

Aplikacja w Akcji

Przejście od onboardingu do rezerwacji ofert. Ponizej przedstawiamy najwazniejsze funkcje aplikacji. Przemyślany UX napędzany przez stabilną architekturę Expo React Native.

01

Onboarding & Autoryzacja

Proces wejścia do aplikacji. Po pomyślnym uwierzytelnieniu za pomocą JWT, tokeny lądują w izolowanym expo-secure-store.

Pod maską

React Hook Form + Zod (@hookform/resolvers).

Onboarding & Autoryzacja - ekran 1
02

Eksploracja Mapy

Główny widok eksploracji. Aplikacja pobiera dane geolokalizacyjne w formacie GeoJSON z Offers Service i nanosi je na mapie.

Pod maską

react-native-maps. Nasłuchiwanie interakcji z mapą, po zmianie wycinka mapy, aplikacja pobiera nowe oferty tylko z widocznego regionu.

Eksploracja Mapy - ekran 1
03

Tworzenie nowej oferty

Torzenie nowej oferty zostało podzielone na 3 intuicyjne kroki. Cały formularz jest zarządzany przez FromProvider (react-hook-form) z obsługą walidacji Zod.

Pod maską

React-hook-form, Zod, React Query.

Tworzenie nowej oferty - ekran 1
04

Zarządzanie ofertami

Wygodny podział na aktywne oraz nieaktywne oferty. Moliwośc podglądu na zywo statusu oferty, informacji o kurierze oraz możliwości zmiany statusu oferty.

Pod maską

Pod maską refresh w tle orzy uzyciu reactQuery oraz odpowiewnie cachowanie ofert po id

Zarządzanie ofertami - ekran 1
05

Zarządzanie rezerwacjami

To specjalna zakładka dla kurierów. Wygodny podział na aktywne oraz nieaktywne rezerwacje. Moliwośc podglądu na zywo statusu rezerwacji, informacji o wystawiającym oraz możliwości zmiany statusu rezerwacji.

Pod maską

Pod maską refresh w tle orzy uzyciu reactQuery oraz odpowiewnie cachowanie rezerwacji po id

Zarządzanie rezerwacjami - ekran 1

System Architecture

Decyzje architektoniczne skupione na izolacji domen, bezpiecznej komunikacji asynchronicznej i niskim narzucie pamięciowym (GraalVM).

Topologia Systemu

Mobile AppExpo / React Native
Web AdminNext.js
API Gateway / BFFSpring Web
AuthService
UsersService
OffersGeo Service
DepositService
NotifyService

Azure Event Hubs

Kafka Broker (Event-Driven)

Azure PostgreSQL

Izolowane schemy / bazy (x4)

Mobile Engineering

Routing & Architektura

expo-router oparty na systemie plików. Wykorzystanie grup ścieżek (app), (auth), (onboarding) dla hermetyzacji logiki dostępu. Włączona Nowa Architektura RN (Fabric/TurboModules) na RN 0.81.

Tożsamość & Storage

Wzorzec Secure Storage. expo-secure-store trzyma tokeny dostępowe (JWT/Refresh). Cache'owany profil użytkownika oraz flagi ukończenia onboardingu w celu minimalizacji zapytań przy starcie.

Network & Axios Interceptors

Singleton Axios apiClient. Zaimplementowany mechanizm 401 Refresh Queue – wstrzymywanie żądań w locie podczas odświeżania tokena i ponawianie ich po sukcesie. Automatyczna konwersja camelCase/snake_case via humps.

Data Fetching (React Query)

TanStack Query v5. Agresywne strojenie staleTime i gcTime pod aplikację mobilną. Wyrzucenie globalnego stanu pobierania do QueryClientProvider.

Geo UX

react-native-maps w połączeniu z dynamicznym pobieraniem ofert oraz kaucjomatów. Aplikacja płynnie pobiera tylko potrzebne dane, bazując na expo-location.

Formularze & Walidacja

react-hook-form spięte z Zod (@hookform/resolvers). Pełne bezpieczeństwo typów od definicji 'schema' aż po payload wysyłany do Spring Boota.

Backend Engineering

MikroserwisOdpowiedzialność Domain-Driven
auth-serviceWystawianie i walidacja JWT, zarządzanie tożsamością, Spring Security, izolowane logowanie.
users-serviceProfile użytkowników ich opinie oraz komentarze, integracja z powiadomieniami via Kafka.
offers-serviceCała logika związana z ofertami. Od stworzenia oferty do jej zakończenia.
deposit-serviceInfrastruktura kaucjomatów, wszytsko co z nimi związane.
notification-serviceKonsumpcja zdarzeń z Event Hubs. Wysyłka maili (Thymeleaf, Resend).

API Gateway Design

Stworzono lekki reverse proxy (BFF - Backend For Frontend) oparty na Spring Web i nowym Spring RestClient.

Routing jest napędzany w pełni przez YAML (@ConfigurationProperties gateway.*). Daje to minimalny narzut wydajnościowy co idealnie wpisuje się w koncepcję delegowania obciążenia na chmurę.

Wykorzystane Technologie

Języki
Java 25TypeScript 5.9SQL
Mobile
React Native 0.81Expo SDK ~54ReanimatedZustandTanStack Query v5
Backend
Spring Boot 4.0.3Spring SecuritySpring Data JPAHibernate 7.1
Data & Messaging
PostgreSQLKafkaEvent HubsJTS Core
Cloud & DevOps
Azure Container AppsBicepAZD CLIGraalVM NativeDocker
Tooling
WireMockTestcontainersESLint 9OpenAPI 3