Frontend-rozwoju SaaS dla branży restauracyjnej

Platforma SaaS dla branży restauracyjnej na rynku Izraela.

Produkt miał obejmować dwie części: interfejs dla klientów restauracji oraz wewnętrzny system dla personelu. Klienci mogli rezerwować stoliki, składać zamówienia i je opłacać, a menedżerowie, kelnerzy, supervisorzy i administratorzy — zarządzać restauracją, pracownikami, zamówieniami, inwentarzem i zapasami.

Zleceniodawca przyszedł z gotowym projektem w Figma oraz wstępną oceną czasów od innych deweloperów. Moim zadaniem było całkowite zrealizowanie frontendowej części produktu od podstaw i doprowadzenie jej do działającego MVP.

=== MOJE ZADANIE ===

Opracować architekturę frontendową produktu SaaS i zrealizować pełną część kliencką aplikacji webowej na React i TypeScript: od podstawowej struktury projektu do złożonej logiki biznesowej, funkcjonalności w czasie rzeczywistym, ról użytkowników, dostępu na podstawie subskrypcji oraz responsywnych interfejsów.

=== CO ZOSTAŁO ZREALIZOWANE ===

• zaprojektowałem architekturę całej frontendowej części aplikacji;
• zrealizowałem interfejs dla klientów restauracji: rezerwacja stolika, tworzenie zamówienia, przeglądanie menu i płatności;
• zrealizowałem interfejsy dla personelu restauracji: menedżerów, kelnerów, supervisorów i administratorów;
• zrealizowałem śledzenie zamówień, inwentarza i zapasów w czasie rzeczywistym za pomocą WebSockets;
• zbudowałem logikę dostępu do funkcji w zależności od roli użytkownika i planu subskrypcyjnego;
• zrealizowałem logikę opartą na subdomenach dla restauracji, aby różne restauracje mogły działać przez własne subdomeny;
• zrealizowałem cały UI z systemem designu Ant Design i TailwindCSS;
• odpowiadałem za wydajność, dostępność, bezpieczeństwo i jakość kodu frontendowego;
• pomagałem junior-deweloperowi: delegowałem zadania, przeprowadzałem przegląd kodu i wyjaśniałem podejścia do realizacji.

=== CECHY PROJEKTU ===

Główna trudność projektu nie leżała w poszczególnych ekranach, ale w logice biznesowej produktu. Należało zrealizować architekturę multi-tenant, gdzie każda restauracja ma swoją logikę, swoje dane i własną subdomenę, ale jednocześnie cały system działa jako jedyny produkt SaaS. Osobno trudną częścią była system dostępu. W produkcie należało uwzględnić nie tylko role użytkowników — menedżer, supervisor, kelner, administrator — ale także plan subskrypcyjny restauracji. Na przykład, część funkcji mogła być dostępna tylko dla określonej subskrypcji: dodawanie pracowników, śledzenie inwentarza w czasie rzeczywistym, rozszerzona analityka i inne możliwości.

Kolejnym ważnym zadaniem była realizacja płatności w warunkach cross-domain flow. Koszyk był tworzony na subdomenie restauracji, a płatność odbywała się przez główną domenę. W tym celu należało bezpiecznie przekazywać dane między różnymi domenami, nie łamiąc scenariusza użytkownika.

Projekt miał również ograniczenia czasowe. Należało szybko określić priorytety dla MVP i nie zaniedbywać rozwiązań architektonicznych dla dalszej skalowalności projektu.

=== WYNIK ===

Klient otrzymał w pełni działające MVP platformy SaaS dla branży restauracyjnej. Część frontendowa została zrealizowana od podstaw: z responsywnymi interfejsami dla klientów i personelu, aktualizacjami zamówień w czasie rzeczywistym, systemem ról, ograniczeniami na podstawie subskrypcji, logiką opartą na subdomenach dla restauracji i złożonym scenariuszem płatności między domenami. Projekt został doprowadzony do działającego MVP w krótkim czasie, pomimo zmiany wymagań i bardziej skomplikowanej rzeczywistej logiki, niż zakładano w początkowej ocenie.

=== TECHNOLOGIE ===

React.js, TypeScript, Redux Toolkit, RTK Query, Ant Design, TailwindCSS, WebSockets, pusher.js, laravel-echo, window.postMessage()

#React #TypeScript #FrontendDevelopment #SaaS #MVP #ReduxToolkit #RTKQuery #AntDesign #TailwindCSS #WebSockets #FrontendArchitecture #MultiTenant #Subdomains #AccessControl #RestaurantSaaS #RestaurantManagement #WebApp #JavaScript