Messenger

Messenger

Rola: Programista Full-Stack
Stos technologii: React, Node.js, Express, MongoDB (Mongoose), Socket.IO, JWT Auth, CSS3.

Opis projektu
Pełnofunkcjonalna aplikacja internetowa do wymiany wiadomości w czasie rzeczywistym. Projekt zaprojektowany z naciskiem na natychmiastową reakcję, nowoczesny interfejs użytkownika i responsywność (Responsive Design). Architektura oparta na REST API do zarządzania danymi oraz połączeniach WebSocket do przesyłania wiadomości bez opóźnień.

Kluczowa funkcjonalność:

Komunikacja w czasie rzeczywistym: Natychmiastowe wysyłanie i odbieranie wiadomości, synchronizacja historii rozmów między klientami z wykorzystaniem Socket.IO.
Zaawansowane zarządzanie wiadomościami: Możliwość edytowania i usuwania wysłanych wiadomości z natychmiastową aktualizacją interfejsu u wszystkich uczestników czatu.
Statusy przeczytania: Zrealizowana logika śledzenia przeczytania wiadomości (wskaźnik "dwóch ptaszków") z użyciem Intersection Observer API (wiadomość oznaczana jako przeczytana, gdy znajduje się w polu widzenia).
System statusów użytkowników: Śledzenie statusu obecności w sieci (Online / Offline) w czasie rzeczywistym.
Autoryzacja i bezpieczeństwo: Rejestracja i autoryzacja użytkowników z wykorzystaniem tokenów JWT.
Personalizacja profilu: Ładowanie i aktualizacja awatara użytkownika bezpośrednio przez interfejs (z konwersją obrazów do Base64).
Nowoczesny UI/UX: Niestandardowy design z wykorzystaniem miękkich cieni (w stylu neomorfizmu), interaktywnymi mikroanimacjami (wciśnięcie przycisków i wiadomości po kliknięciu) oraz responsywnym układem dla urządzeń mobilnych.

Techniczne cechy realizacji:

Optymalizacja renderowania: Wykorzystanie React Query (TanStack) do cachowania zapytań, zarządzania stanem serwera i natychmiastowej (optymistycznej) aktualizacji UI przy edytowaniu lub usuwaniu danych.
Zarządzanie stanem socketów: Napisane niestandardowe haki React (useChat, useSocketEvent) do enkapsulacji logiki subskrypcji na zdarzenia web-socket i izolacji logiki biznesowej od komponentów widoku.
Baza danych i architektura Backend: Zaprojektowana skalowalna schemat danych w MongoDB. Oddzielone warstwy kontrolerów, serwisów i routerów dla utrzymania czystości kodu i zasad SOLID.