logo

Full-stack Developer Portfolio | Hubert Pawlak

Zdalne zarządzanie domem

Bezpieczny panel sterowania dostępny z dowolnego miejsca. Aktualnie dostępny tylko po polsku. Projekt ten zaczynał jako prosty system monitorowania temperatur. Ostatecznym celem jest rozszerzenie go do zarządzania m.in. silnikami, termostatami i pompami na podstawie ręcznych ustawień lub danych zebranych z sensorów. Byłoby świetnie móc automatycznie podnosić rolety, podlewać rośliny czy otrzymywać powiadomienia, gdy coś wymaga ludzkiej interwencji. Są dostępne gotowe rozwiązania, ale chciałem poprawić swoje umiejętności programowania i majsterkowania.

Wybrałem Mantine jako bibliotekę komponentów. Podoba mi się jej wygląd, a ich React hooks znacznie ułatwiły mi pracę. Pod maską dalej używam React i Next.js. Tym razem wypróbowałem tRPC zamiast standardowego CRUD RESP API co okazało się być wydajniejsze oraz bezpieczniejsze, dzięki łatwej walidacji danych wejściowych. Dane z czujników przechowuję używając Supabase i Upstash, aby zachować kompatybilność z architekturą serverless. Uwierzytelnianie użytkowników jest obsługiwane przez SuperTokens. Ruch ze źródeł danych jest uwierzytelniany za pomocą JWT.

zrzut ekranu panelu kontrolnego z temperaturami

Wykorzystanie JWT dla ruchu Maszyna-z-Maszyną pozwala na szybkie uwierzytelnianie bez konieczności wysyłania częstych zapytań do bazy danych. Zmniejszyło to opóźnienie i koszty operacyjne. W przyszłości może dodam jakiś rodzaj czarnej listy tokenów lub ułatwię rotację kluczy na wypadek wycieku tokena.

zrzut ekranu strony dodawania źródła danych i edycji sensorówzrzut ekranu panelu administracyjnego do zarządzania użytkownikami

Wszystkie elementy zostały dostosowane do małych i dużych ekranów.