###The problem and improvement
In the frontend, API calls are currently made using raw fetch() directly inside individual service files (e.g., user.service.ts, interview.service.ts). This causes several issues:
- Code Duplication: The
Authorization: Bearer <token> header is manually injected into almost every single request.
- Poor UX on Token Expiration: There is no centralized error handling. If a user's JWT expires (HTTP 401), the app fails silently or throws an uncaught error on the page, instead of gracefully logging the user out and redirecting them to the
/login page.
Proposed solution
Refactor the frontend services to use a centralized axios API client.
The implementation will include:
- Creating an
apiClient.ts instance that automatically injects the JWT token from storage into every outgoing request via a Request Interceptor.
- Implementing a global Response Interceptor that catches
401 Unauthorized errors, clears the stale authentication state, and redirects the user to /login.
- Refactoring existing
service.ts files to use this new client instead of fetch.
Additional context
I am participating in GSSoC '26 and would love to be assigned to this issue to improve the frontend architecture and user experience!
###The problem and improvement
In the frontend, API calls are currently made using raw
fetch()directly inside individual service files (e.g.,user.service.ts,interview.service.ts). This causes several issues:Authorization: Bearer <token>header is manually injected into almost every single request./loginpage.Proposed solution
Refactor the frontend services to use a centralized
axiosAPI client.The implementation will include:
apiClient.tsinstance that automatically injects the JWT token from storage into every outgoing request via a Request Interceptor.401 Unauthorizederrors, clears the stale authentication state, and redirects the user to/login.service.tsfiles to use this new client instead offetch.Additional context
I am participating in GSSoC '26 and would love to be assigned to this issue to improve the frontend architecture and user experience!