frontend/
src/components
Shared UI, layout, and feature widgets.
The ui/ subfolder follows the shadcn pattern (configured in
components.json, new-york style): Radix primitives styled with the cn
helper. Feature widgets stay near their feature — posts, jobs, and the bell
each own their modals and cards — while layout and the route guard frame
every guarded screen.
What it owns
- Interface primitives: button, card, input, avatar, and friends
- App frame: navbar, sidebar, main layout, route guard
- Feature widgets: posts, jobs, notification bell
- Cross-cutting: error boundary, spinner, theme toggle
Files
File list and purposes from the folder README.
| File | Purpose |
|---|---|
ui/ | shadcn-style primitives on Radix and cva. |
layout/ | Sidebar and main app frame. |
posts/ | Post card, comments, create modal. |
jobs/ | Job card, create and apply modals. |
notifications/ | Notification bell with read and delete. |
ProtectedRoute.jsx | Auth gate with login redirect memory. |
ErrorBoundary.jsx | Crash containment for the tree. |
ThemeToggle.jsx | Dark and light switch. |
Dependencies
| Library | Version range | Why it is used here |
|---|---|---|
| React | ^19.0.0 | All pages and components under src/. |
| React DOM | ^19.0.0 | Bootstrap in main.jsx. |
| React Router | ^7.5.3 | Route table and guards in App.jsx. |
| Radix Avatar | ^1.1.7 | Avatars in chat, posts, and profile components. |
| Radix Label | ^2.1.4 | Auth and profile forms. |
| Radix Scroll Area | ^1.2.6 | Chat and message lists. |
| Radix Slot | ^1.2.0 | The button primitive in src/components/ui/. |
| Tailwind Vite plugin | ^4.1.4 | Plugin entry in vite.config.js. |
| class-variance-authority | ^0.7.1 | Variant definitions in src/components/ui/. |
| clsx | ^2.1.1 | The cn helper in src/lib/utils.js. |
| Lucide | ^0.503.0 | Icons in pages like ChatPage and SignupPage. |
| prism-react-renderer | ^2.4.1 | Code blocks in components/posts/PostCard.jsx. |
| React Icons | ^5.5.0 | GitHub and LinkedIn marks on profile pages. |
| tailwind-merge | ^3.2.0 | The cn helper in src/lib/utils.js. |
| Tailwind CSS | ^4.1.4 | Classes in every component; theme tokens in CSS. |
| Redux Toolkit | ^2.7.0 | Store and nine slices in src/store/. |
| React Redux | ^9.2.0 | Hooks in pages plus the store provider in main.jsx. |
| Socket.io client | ^4.8.1 | Connection, rooms, and event wiring in services/socketService.js. |
| better-authDeclared but not used in source | ^1.6.23 | Declared in both manifests but never imported in any source file; authentication is JWT plus bcrypt. |
| axios | ^1.9.0 | Token-attaching factory in services/apiClient.js. |
| date-fns | ^4.1.0 | Date formatting in ChatPage. |
Development and tooling (11)
| Library | Version range | Why it is used here |
|---|---|---|
| @types/node | ^22.15.3 | Type declarations for Node.js built-ins. |
| @types/react | ^19.0.10 | Type declarations for React. |
| @types/react-dom | ^19.0.4 | Type declarations for React DOM. |
| Vite React plugin | ^4.3.4 | Plugin entry in vite.config.js. |
| Vite | ^6.3.1 | Dev, build, and preview scripts. |
| tw-animate-css | ^1.2.8 | Enter and transition classes in the stylesheet. |
| ESLint JS config | ^9.22.0 | Base rules in eslint.config.js. |
| ESLint | ^9.22.0 | Lint script and flat config in eslint.config.js. |
| eslint-plugin-react-hooks | ^5.2.0 | Hook rules in eslint.config.js. |
| eslint-plugin-react-refresh | ^0.4.19 | Refresh rules in eslint.config.js. |
| globals | ^16.0.0 | Browser and node globals in eslint.config.js. |
Dependencies as of commit cdef8af.
Laying out Frontend components folder…
BrowserAPIRealtimeCacheDatabaseShareddurableephemeral
Talks to
Sources: frontend/src/components/ProtectedRoute.jsx, frontend/src/components/posts/PostCard.jsx, frontend/src/components/jobs/JobCard.jsx, frontend/src/components/notifications/NotificationBell.jsx, frontend/components.json (documented at commit cdef8af)