Slack Clone – Real-Time Messenger App

Puteți încerca o versiune complet funcțională a acestei aplicații : https://slack-real-time-messenger-productivity-app-clone.vercel.app/auth

Prezentarea video a proiectului : https://www.loom.com/share/9814e294aba847509f84365db196efd9?sid=4f322fd3-d4a4-45bc-abfc-680b1e02cc61

Descriere

Acest proiect reprezintă o clonă completă și modernă a aplicației Slack, concepută pentru a demonstra abilități avansate de frontend development. Aplicația include autentificare multiplă (email, Google, GitHub), workspace-uri personalizate, mesagerie în timp real cu suport pentru imagini și emoji-uri, canale de comunicare, mesagerie directă (DM), threads și administrarea utilizatorilor prin roluri.

Cuprins

• Funcționalități
• Tehnologii folosite
• Arhitectura Aplicației

Funcționalități

• Autentificare Complexă:

  • Autentificare cu email/parolă, Google și GitHub folosind Convex Auth.
  • Fluxuri complete de înregistrare, autentificare, resetare parolă și logout.

• Workspace-uri & Canale:

  • Crearea workspace-urilor și alăturarea acestora folosind un "join code" unic.
  • Managementul canalelor: creare, editare și ștergere.

• Direct Messages (DM):

  • Comunicarea directă 1-la-1 între membrii workspace-ului.

• Sistem de Mesagerie Avansat:

  • Încărcare infinită a mesajelor (Infinite Loading).
  • Posibilitatea de a trimite imagini și de a reacționa cu emoji-uri la mesaje.
  • Threads pentru conversații detaliate într-un panou separat.

• Administrare & Roluri:

  • Roluri diferențiate (admin/member).
  • Posibilitatea de promovare/degradare administrativă a utilizatorilor.

Tehnologii folosite

Frontend:

• React 19: pentru crearea interfeței dinamice.
• Next.js 15: pentru Server-Side Rendering (SSR), Client-Side Rendering (CSR) și React Server Components.
• TailwindCSS: pentru stilizare rapidă, consistentă și responsive.
• ShadCN: componente UI reutilizabile pentru design coerent.
• Convex: ca bază de date reactivă și gestionare automată a caching-ului client-side.
• Redux Toolkit: pentru gestionarea state-ului UI (modaluri).
• Quill: pentru editor rich-text în mesaje.
• Lucide React și React Icons: pentru iconografie clară.
• Sonner: notificări.
• nuqs: gestionarea query-params - sincronizat cu state-ul în Next.js.

Backend:

• Convex: Backend și baza de date reactivă în timp real.
• Convex Auth: Autentificare robustă și securizată cu suport OAuth (Google, GitHub).

Arhitectura Aplicației

Aplicația este o Single Page Application (SPA) cu Next.js, organizată modular, favorizând scalabilitatea, mentenanța și reutilizarea codului.

Structură Frontend

1. Layout și Navigație:

• Routing dinamic și middleware de autentificare pentru securizarea rutelor (middleware.ts).
• Hook-uri personalizate (useWorkspaceId, useChannelId) pentru acces facil la parametri din URL.

2. Gestionarea State-ului:

• Redux Toolkit gestionează modalurile globale (workspaceModal, channelModal).
• Mecanisme proprii de "query management" ce imită comportamentul React Query, folosind caching-ul automat furnizat de Convex.

3. Componente Reutilizabile:

Aceste componente sunt folosite extensiv pentru a construi rapid noi funcționalități:

• EmojiPopover: Permite selectarea emoji-urilor în mesaje.
• Hint: Oferă tooltips intuitive utilizatorului.
• Thumbnail: Afișează imagini încărcate cu opțiune de zoom.
• Toolbar: Opțiuni rapide pentru editarea, ștergerea sau reacția la mesaje.
• Message & MessageList: Gestionare și afișare mesaje cu suport infinit loading.
• Renderer & Editor: Editor rich-text reutilizabil pentru mesaje.
• ThreadBar: Navigare rapidă către conversații în thread.
• SignInCard & SignUpCard: Formulare reutilizabile de autentificare.
• UserButton: Dropdown reutilizabil pentru logout și gestionarea contului.

Fluxuri Specifice și Hook-uri Personalizate

• Autentificare:
  • useAuthActions, useCurrentUser.
• Workspace Management:
  • useCreateWorkspace, useGetWorkspaceInfo, useRemoveWorkspace.
• Channels:
  • useCreateChannel, useGetChannel, useUpdateChannel, useRemoveChannel.
• Members Management:
  • useCurrentMember, useGetMember, useUpdateMember, useRemoveMember.
• Mesagerie:
  • useCreateMessage, useGetMessages, useRemoveMessage, useUpdateMessage.
• Reactions:
  • useToggleReaction.
• Upload:
  • useGenerateUploadUrl.

Scalabilitate și Reutilizare

Arhitectura frontend favorizează o scalare rapidă a aplicației prin intermediul:

• Abstracției hook-urilor și a componentelor UI:

  • Hook-urile și componentele sunt scrise modular, fiecare cu un scop clar definit, facilitând reutilizarea rapidă și consistentă în noi pagini sau funcționalități.

• Gestionării inteligente a state-ului:

  • Redux Toolkit pentru state global simplu (modaluri).
  • Convex cu mecanisme interne pentru caching-ul datelor, asigurând consistență și performanță ridicată a aplicației fără complexitate suplimentară pe partea clientului.

• Infinite Loading și Threading:

  • Componente dedicate (MessageList, ThreadBar) ce permit încărcare și navigare intuitivă.

Această structură modulară și orientată spre componente permite aplicației să fie extinsă ușor și menținută eficient, oferind un cadru robust și scalabil pentru dezvoltarea viitoare.