MockBank UI
Frontend „bankowy” zbudowany w React + TypeScript z Tailwind CSS i TanStack Query jako interfejs dla mojego MockBank API. Projekt ma charakter dev/testowy – narzędzie do pracy z API (konta, transakcje, przelewy, webhooki, statystyki) i nie jest jeszcze przeznaczone do produkcji.
- React
- TypeScript
- Tailwind CSS
- Vite
- Axios
- Integracja z MockBank API
Co potrafi UI
MockBank UI to interaktywny interfejs bankowy stworzony z myślą o testowaniu i pracy z MockBank API. Pozwala zarządzać kontami, wykonywać operacje finansowe i analizować dane w czasie rzeczywistym w sposób zbliżony do prawdziwych aplikacji bankowych.
- Lista kont z podglądem szczegółów (saldo, IBAN, akcje użytkownika).
- Historia transakcji z filtrami, paginacją i możliwością szybkiego dodawania.
- Symulacje operacji — presety lub tryb ręczny dla testów API.
- Przelewy wewnętrzne między własnymi rachunkami (walidacje, auto-odświeżanie sald).
- Panel webhooków — rejestracja, testy i weryfikacja podpisu HMAC.
- Statystyki — bilans, przychody, wydatki i wykresy dla wybranego okresu.
Architektura i UX
Interfejs zaprojektowano w duchu prostoty i szybkości działania — jest lekki, responsywny i przyjazny dla deweloperów testujących API. Struktura kodu zachowuje czytelny podział odpowiedzialności i przewidywalny przepływ danych.
- Cache i automatyczne odświeżanie danych po operacjach.
- Walidacja formularzy (Zod) i przejrzysta obsługa błędów.
- Warstwa komunikacji oparta o Axios z interceptorami i tokenem JWT.
- Dbałość o dostępność — aria-etykiety, focus states, klawiaturowa obsługa modali.
- Projekt o charakterze dev/testowym — idealny do demonstracji i integracji z API.
Zajrzyj do środka aplikacji
Strona główna aplikacji
Demo online
Aplikacja jest hostowana na Vercel: moc-bank-front.vercel.app
alice+test123@example.com
zaq1@WSX
Można zalogować się na konto demo (z gotowymi danymi) lub utworzyć własne konto testowe i przetestować wszystkie funkcje aplikacji.
Uwaga: backend (MockBank API) działa na darmowym planie hostingu — po dłuższej bezczynności serwis może się „wybudzać”. Jeśli pierwsze logowanie zwróci błąd lub timeout, odczekaj chwilę i spróbuj ponownie lub wybudź API ręcznie: /healthz.