How imaditya-jain/task-management works
1. Overall shape
This is a Next.js App Router project whose architecture is centered on authentication and gated dashboard access, even though the repo is named “Task-Management.” The app is split into server-rendered pages, API route handlers, shared auth utilities, and client-side state management.
2. UI/page layer
The user-facing pages live under app/(pages), with dedicated routes for login, registration, forgot/reset password, user verification, and a dashboard. The root app/layout.tsx and app/styles/* provide global application shell and styling, while app/components/layout/auth/layout.tsx suggests a separate layout for auth screens.
3. Client-side form and route protection
Reusable form components in app/components/forms drive the auth flows, and app/components/fields/input.field.tsx provides shared form controls. app/components/auth/protected-route.tsx is the main client boundary that prevents unauthenticated access to sensitive routes like the dashboard.
4. API boundary
All backend interaction is exposed through app/api/v1/auth/*. Each auth capability has its own route handler: login, register, logout, refresh-token, me, forgot-password, reset-password, verify-user, and username availability checks. This makes the API surface explicit and versioned.
5. Server-side auth and persistence
The server side appears to persist user data through app/models/user.model.ts and a database connection in app/config/db.config.ts. Those files define the persistence boundary for registration, lookup, verification, and credential updates.
6. Token and cookie management
Auth state is handled with access/refresh tokens and cookie utilities in app/utils/auth-token.utils.ts, app/utils/auth-cookie.utils.ts, and app/utils/auth-request.utils.ts. app/utils/generateAccessAndRefreshToken.utils.ts indicates the server issues paired tokens, while refresh-token and me routes support session renewal and current-user lookup.
7. Email-based workflows
Password recovery and account verification are supported by mail infrastructure in app/config/nodemailer.config.ts and app/helpers/mail/send-mail.helper.ts. These helpers are used by the forgot-password and verify-user flows, so email is a core external dependency in the authentication subsystem.
8. Client state management
Global client state is managed with Redux Toolkit-style structure under lib/: lib/store.ts, lib/hooks.ts, lib/slices/auth.slice.ts, and lib/slices/username-check.slice.ts. The lib/features/* files likely encapsulate async auth operations or API wiring, keeping network logic separate from components.
9. Session/bootstrap providers
app/providers/StoreProvider.tsx and app/providers/auth-session-provider.tsx bridge server-rendered pages and client state. They likely hydrate auth state on app load, making session information available to protected routes and forms without duplicating fetch logic.
10. Shared client fetch layer
app/lib/auth-fetch.ts is a dedicated fetch wrapper for auth-related calls, which keeps request formatting, cookie handling, and error normalization centralized. This reduces duplication across the login/register/reset components and aligns the client with the API versioning strategy.
11. Cross-cutting auth UX
app/pages/* and the Redux slices work together to support the complete auth lifecycle: create account, verify email, sign in, refresh session, recover password, and sign out. The dashboard is the primary authenticated destination, so the key architecture boundary is between public auth screens and protected application state.
12. What to diagram
An accurate diagram should show: public auth pages → client forms/hooks/store → versioned auth API routes → DB model/config and mail helper → token/cookie utilities → session-protected dashboard. The most important external dependencies are the database and the email service configured through Nodemailer.
Main entry points: auth-fetch.ts Auth fetch · db.config.ts Database · user.model.ts User model · layout.tsx Auth layout
Components 34
Public pages
User-facing routes for auth and entry navigation.
- Home · Top-level entry page for the app.
app/page.tsx - Login · Public sign-in screen.
app/(pages)/auth/login/page.tsx - Register · Public account creation screen.
app/(pages)/auth/register/page.tsx - Forgot password · Password recovery entry screen.
app/(pages)/auth/forgot-password/page.tsx - Reset password · Password reset screen.
app/(pages)/auth/reset-password/page.tsx - Verify user · Account verification screen.
app/(pages)/auth/verify-user/page.tsx - Dashboard · Authenticated destination for signed-in users.
app/(pages)/dashboard/page.tsx
Client UI
Reusable forms, route guards, and layout wrappers.
- Auth layout · Dedicated wrapper for auth screens.
app/components/layout/auth/layout.tsx - Protected route · Client-side access control for protected screens.
app/components/auth/protected-route.tsx - Login form · Sign-in form UI and submission flow.
app/components/forms/login.form.tsx - Register form · Account creation form UI and submission flow.
app/components/forms/registeration.form.tsx - Recovery form · Password recovery form UI and submission flow.
app/components/forms/forgot-password.form.tsx - Reset form · Password reset form UI and submission flow.
app/components/forms/reset-password.form.tsx - Auth fetch · Shared client request layer for auth calls.
app/lib/auth-fetch.ts
Auth API
Versioned HTTP endpoints for authentication workflows.
- Login API · Authenticates users and issues session tokens.
app/api/v1/auth/login/route.ts - Register API · Creates accounts and starts verification flow.
app/api/v1/auth/register/route.ts - Logout API · Clears auth session state.
app/api/v1/auth/logout/route.ts - Refresh API · Renews access tokens from refresh tokens.
app/api/v1/auth/refresh-token/route.ts - Me API · Returns the current authenticated user.
app/api/v1/auth/me/route.ts - Forgot API · Starts password recovery and email delivery.
app/api/v1/auth/forgot-password/route.ts - Reset API · Completes password reset.
app/api/v1/auth/reset-password/route.ts - Verify API · Confirms user verification token or code.
app/api/v1/auth/verify-user/route.ts - Username API · Checks username availability.
app/api/v1/auth/check-username-availability/route.ts
Server core
Persistence, token handling, and email delivery.
- Database · Application database connection setup.
app/config/db.config.ts - User model · User persistence and lookup model.
app/models/user.model.ts - Token utils · Generates and manages access/refresh tokens.
app/utils/generateAccessAndRefreshToken.utils.ts
Client state
Redux store, slices, and async feature wiring.
- Store · Global client state container.
lib/store.ts - Auth slice · Client auth/session state management.
lib/slices/auth.slice.ts - Username slice · Username availability state management.
lib/slices/username-check.slice.ts - Auth feature · Client auth workflow wiring and side effects.
lib/features/auth.feature.ts - Username check · Username availability workflow wiring.
lib/features/userNameCheck.feature.ts
App runtime
Root app shell and client providers.
- App shell · Global application wrapper and metadata shell.
app/layout.tsx - Store provider · Bootstraps the client store for the app.
app/providers/StoreProvider.tsx - Session provider · Hydrates and exposes auth session state.
app/providers/auth-session-provider.tsx
Connections 39
- App shell → Store provider: wraps · Application shell mounts client providers.
- Store provider → Store: provides · Creates the Redux store context.
- Session provider → Auth slice: hydrates · Loads auth session state into the client.
- Session provider → Store: reads · Connects session state to the store.
- Auth layout → Login form: contains · Auth screens use shared layout scaffolding.
- Auth layout → Register form: contains · Auth screens use shared layout scaffolding.
- Auth layout → Recovery form: contains · Auth screens use shared layout scaffolding.
- Auth layout → Reset form: contains · Auth screens use shared layout scaffolding.
- Protected route → Dashboard: guards · Prevents unauthenticated access to the dashboard.
- Login form → Auth fetch: calls · Submits credentials through shared auth requests.
- Register form → Auth fetch: calls · Submits registration through shared auth requests.
- Recovery form → Auth fetch: calls · Starts password recovery through shared auth requests.
- Reset form → Auth fetch: calls · Completes password reset through shared auth requests.
- Auth feature → Auth fetch: uses · Async auth logic delegates to the fetch wrapper.
- Username check → Auth fetch: uses · Username checks call into the fetch wrapper.
- Auth feature → Auth slice: updates · Auth workflow writes session state.
- Username check → Username slice: updates · Username workflow writes availability state.
- Store → Auth slice: registers · Store combines auth state management.
- Store → Username slice: registers · Store combines username-check state management.
- Login API → User model: reads · Login validates against persisted users.
- Register API → User model: writes · Registration creates new user records.
- Me API → User model: reads · Current-user lookup reads user records.
- Reset API → User model: writes · Password reset updates user credentials.
- Verify API → User model: updates · Verification marks the user as verified.
- Username API → User model: checks · Username availability compares against user records.
- Login API → Token utils: issues · Login creates access and refresh tokens.
- Refresh API → Token utils: renews · Refresh endpoint reissues session tokens.
- Logout API → Token utils: clears · Logout invalidates token state.
- Register API → Database: persists · Registration depends on the database connection.
- Login API → Database: authenticates · Login reads through the database connection.
- Me API → Database: queries · Me endpoint queries session-linked data.
- Forgot API → Database: reads · Password recovery looks up account data.
- Reset API → Database: updates · Password reset writes updated credentials.
- Verify API → Database: updates · Verification updates account status.
- Forgot API → Session provider: supports · Recovery flow participates in session-aware UX.
- Register API → Verify API: triggers · Registration initiates the verification flow.
- Forgot API → Reset API: enables · Recovery flow leads to password reset.
- Login API → Me API: follows · Sign-in is followed by current-user hydration.
- Refresh API → Me API: supports · Token renewal feeds authenticated user lookup.