learn
frontend/

src/hooks

Shared React hooks.

One hook, one consumer: the chat page uses swipe gestures for mobile navigation between the conversation list and the active thread.

What it owns

  • Swipe gesture handling for touch navigation

Files

File list and purposes from the folder README.

FilePurpose
useSwipeGesture.jsTouch swipe detection used by the chat page.

Dependencies

LibraryVersion rangeWhy it is used here
React^19.0.0All pages and components under src/.
React DOM^19.0.0Bootstrap in main.jsx.
React Router^7.5.3Route table and guards in App.jsx.
Radix Avatar^1.1.7Avatars in chat, posts, and profile components.
Radix Label^2.1.4Auth and profile forms.
Radix Scroll Area^1.2.6Chat and message lists.
Radix Slot^1.2.0The button primitive in src/components/ui/.
Tailwind Vite plugin^4.1.4Plugin entry in vite.config.js.
class-variance-authority^0.7.1Variant definitions in src/components/ui/.
clsx^2.1.1The cn helper in src/lib/utils.js.
Lucide^0.503.0Icons in pages like ChatPage and SignupPage.
prism-react-renderer^2.4.1Code blocks in components/posts/PostCard.jsx.
React Icons^5.5.0GitHub and LinkedIn marks on profile pages.
tailwind-merge^3.2.0The cn helper in src/lib/utils.js.
Tailwind CSS^4.1.4Classes in every component; theme tokens in CSS.
Redux Toolkit^2.7.0Store and nine slices in src/store/.
React Redux^9.2.0Hooks in pages plus the store provider in main.jsx.
Socket.io client^4.8.1Connection, rooms, and event wiring in services/socketService.js.
better-authDeclared but not used in source^1.6.23Declared in both manifests but never imported in any source file; authentication is JWT plus bcrypt.
axios^1.9.0Token-attaching factory in services/apiClient.js.
date-fns^4.1.0Date formatting in ChatPage.
Development and tooling (11)
LibraryVersion rangeWhy it is used here
@types/node^22.15.3Type declarations for Node.js built-ins.
@types/react^19.0.10Type declarations for React.
@types/react-dom^19.0.4Type declarations for React DOM.
Vite React plugin^4.3.4Plugin entry in vite.config.js.
Vite^6.3.1Dev, build, and preview scripts.
tw-animate-css^1.2.8Enter and transition classes in the stylesheet.
ESLint JS config^9.22.0Base rules in eslint.config.js.
ESLint^9.22.0Lint script and flat config in eslint.config.js.
eslint-plugin-react-hooks^5.2.0Hook rules in eslint.config.js.
eslint-plugin-react-refresh^0.4.19Refresh rules in eslint.config.js.
globals^16.0.0Browser and node globals in eslint.config.js.

Dependencies as of commit cdef8af.

Frontend hooks folder
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral

Talks to

Sources: frontend/src/hooks/useSwipeGesture.js, frontend/src/pages/ChatPage.jsx (documented at commit cdef8af)

On this page