How saad299/devcollab-frontend works
DevCollab is a developer-collaboration frontend: users discover projects, publish projects seeking skills, request to join, manage incoming requests, and maintain profiles. The graph follows those stages through the Next.js pages and service layer to the external backend. The README documents the broader feature set and token-refresh behavior; sampled source confirms project discovery, dashboard/request handling, profile editing, and auth state, but not every page-to-service connection.
Main entry points: requests.js Request service · api.js HTTP client · page.js Dashboard · projects.js Project service
Components 21
Identity and profiles
- Login and register
src/app/login/page.js - Auth state
src/context/AuthContext.js - Auth service
src/services/auth.js - Profile pages
src/app/profile - User service
src/services/users.js
Project discovery
- Browse projects
src/app/projects/page.js - Project details
src/app/projects/[id]/page.js - Create project
src/app/projects/new/page.js - Edit project
src/app/projects/[id]/edit/page.js - Project service
src/services/projects.js - Landing page
src/app/page.js
Collaboration requests
- Dashboard
src/app/dashboard/page.js - My requests
src/app/requests/page.js - Join project
src/app/projects/[id]/apply/page.js - Request actions
src/components/requests/RequestCard.js - Request service
src/services/requests.js
Shared runtime
- Auth hook
src/hooks/useAuth.js - HTTP client
src/services/api.js - Browser token storage
Other components
- Developer
- Backend API
Connections 28
- Developer → Login and register: signs in
- Login and register → Auth state: requests auth
- Auth state → Auth service: calls
- Auth service → HTTP client: sends auth calls
- HTTP client → Backend API: HTTP requests
- Auth service → Browser token storage: stores tokens
- Auth state → Auth hook: provides state
- Developer → Landing page: visits
- Landing page → Project service: loads recent projects
- Developer → Browse projects: searches
- Browse projects → Project service: fetches filtered projects
- Developer → Project details: views project
- Developer → Create project: posts project
- Developer → Edit project: edits project
- Project service → HTTP client: sends project calls
- Developer → Join project: requests to join
- Developer → Dashboard: manages projects
- Dashboard → Project service: loads and deletes
- Dashboard → Request service: loads project requests
- Dashboard → Request actions: renders requests
- Request actions → Request service: updates status
- Developer → My requests: views sent requests
- My requests → Request service: loads requests
- Join project → Request service: submits application
- Request service → HTTP client: sends request calls
- Developer → Profile pages: views or edits profile
- Profile pages → User service: reads and updates
- User service → HTTP client: sends profile calls