[FEATURE] Add User Profile Management Section

[vaishnavikhatri3]

Problem Statement

Currently, after signing up and logging into FutureTracker, users do not have access to a dedicated profile section where they can view and manage their personal information.

As a career-focused platform, users should be able to maintain a profile containing their academic, professional, and contact details. The absence of a profile page limits personalization and makes it difficult to manage user-specific information.

Proposed Solution

Add a dedicated Profile Management Section accessible from the dashboard/navigation menu.

The profile page should allow users to:

• View and edit personal information
• Add profile picture
• Update contact details
• Add educational information
• Add skills and technologies
• Add social links (GitHub, LinkedIn, Portfolio)
• View account information

Benefits

• Better user personalization
• Improved user experience
• Foundation for future features such as public portfolios, resume management, and networking
• Centralized location for managing user information

Suggested Fields

Basic Information

• Full Name
• Email Address
• Profile Picture
• Bio/About Me

Academic Information

• College/University
• Degree
• Graduation Year

Professional Information

• Skills
• GitHub Profile
• LinkedIn Profile
• Portfolio Website

Acceptance Criteria

• Users can access a Profile page after login.
• Users can update and save profile information.
• Changes persist across sessions.
• Proper validation is implemented for editable fields.
• Responsive design for mobile and desktop devices.

Priority

Medium to High

[vaishnavikhatri3]

Hi @Venkat-Kolasani , Please assign this issue to me under gssoc'26.

[Venkat-Kolasani]

Hi @vaishnavikhatri3 ! Thanks for your interest.

Before I assign this, please share your approach in a comment:

• What changes do you plan to make?
• Which files will you be touching?
• Any libraries or approaches you're planning to use?

Once it looks good, I'll assign it to you with a 7-day deadline.

[vaishnavikhatri3]

Hi @Venkat-Kolasani ,

Thank you for the opportunity.

My approach would be to create a dedicated Profile Management page where users can view and update their personal, academic, and professional information beyond the default account settings currently provided by Clerk.

Planned Changes

• Create a dedicated Profile page accessible from the dashboard/navigation.

• Add editable sections for:

  • Basic Information (Name, Bio, Profile Picture)
  • Academic Information (College, Degree, Graduation Year)
  • Professional Information (Skills, GitHub, LinkedIn, Portfolio)

• Store and retrieve profile data from the database.

• Add validation and proper user feedback.

• Ensure a responsive and consistent UI across devices.

Files I Expect to Touch

Frontend

• src/pages/Profile.jsx (new page for profile management)
• src/components/common/Navbar.jsx (add Profile navigation entry)
• src/App.js (register the new route)
• src/lib/supabase.js (if additional profile-related queries are required)

Backend

• backend/src/routes/ (add profile-related routes/endpoints)
• backend/src/server.js (register profile routes if needed)
• backend/src/lib/supabase.js (for profile data operations if required)

Libraries / Approach

• Follow the existing React + Supabase architecture.
• Reuse existing UI patterns and components to maintain consistency across the application.
• Utilize the current authentication flow and associate profile data with authenticated users.
• Implement validation and error handling in accordance with the project's existing conventions and best practices.

I really like the direction of this project and the problem it aims to solve for students and job seekers. If you have any specific preferences regarding the implementation , I'd be happy to follow them.

My intention is not to replace or modify Clerk's account management functionality. The profile page would complement Clerk by storing application specific user information (academic and professional details) while continuing to use Clerk for authentication, security, and account management.

[Venkat-Kolasani]

Thanks for the detailed approach @vaishnavikhatri3 — the direction makes sense, and keeping Clerk for auth/account security while storing app-specific profile fields in our DB is the right split.

Before I assign this, please update your plan with a few project-specific requirements:

Architecture (required) :

Profile data must go through Express + Clerk JWT, not direct Supabase calls from the frontend. Please do not add profile queries in src/lib/supabase.js or new supabase.from() usage in components — our architecture guard blocks that (see docs/REVIEW_CHECKLIST.md and scripts/architecture-check.js).

Frontend should use src/services/api.js → new backend routes (e.g. backend/src/routes/profile.js), with handlers filtering by req.auth.internalUserId like opportunities.js / documents.js.

Database :

Add docs/profile-migration.sql with a user_profiles (or similar) table, RLS policies, and indexes on user_id.

Call out which fields are stored vs. read-only from Clerk (e.g. email may stay Clerk-sourced).

Scope for v1 (suggested) :

Phase 1: text fields only — bio, college, degree, graduation year, skills, GitHub/LinkedIn/portfolio URLs. GET + PATCH endpoints, validation via existing Joi patterns in backend/src/validation/.

Phase 2 (optional follow-up): profile picture upload — only if you reuse the documents/storage pattern from backend/src/routes/documents.js; otherwise defer avatar to a URL field for now.

Tests & UI :

Backend integration tests under backend/tests/integration/ for happy path + auth/validation failures.
Reuse existing components (cards, forms, loading/error states) — match Dashboard / Documents page patterns.
Confirm responsive layout in your test plan.

Please reply with an updated comment listing:

Exact API endpoints you’ll add
Migration table + fields
Final file list (frontend + backend + docs)
Your local test plan (npm run test:ci, cd backend && npm test, manual smoke steps)

Once that’s aligned, I’ll assign this under GSSoC’26 with a 10-day deadline for a draft PR. Thank you for your interest into FutureTracker.Also do Star the Repo!

[vaishnavikhatri3]

Hi @Venkat-Kolasani,

Thank you for the detailed feedback. I've updated my implementation plan according to the project's architecture and requirements.

Architecture

I will follow the existing architecture and ensure that all profile-related operations go through the Express backend with Clerk JWT authentication.

The frontend will communicate through src/services/api.js and will not make any direct Supabase calls. All profile data access will be handled via backend routes and filtered using req.auth.internalUserId, similar to the existing opportunities and documents modules.

API Endpoints

I plan to add the following endpoints:

• GET /api/profile → Fetch authenticated user's profile
• PATCH /api/profile → Update authenticated user's profile

Validation will be implemented using the existing Joi validation pattern used throughout the backend.

Database Migration

I will add:

docs/profile-migration.sql

Proposed table: user_profiles

Fields:

• id (UUID, PK)
• user_id (UUID, FK / unique)
• bio
• college
• degree
• graduation_year
• skills
• github_url
• linkedin_url
• portfolio_url
• created_at
• updated_at

RLS policies will ensure users can only access their own profile records, and indexes will be added on user_id.

Clerk vs Stored Fields

Read-only from Clerk:

• Email
• Clerk account information
• Authentication-related data

Stored in user_profiles:

• Bio
• College
• Degree
• Graduation Year
• Skills
• GitHub URL
• LinkedIn URL
• Portfolio URL

For Phase 1, profile picture upload will be deferred. If needed later, it can be implemented following the existing documents/storage pattern.

Files Planned

Frontend

• src/pages/Profile.jsx
• src/services/api.js (profile API methods)
• src/components/... (reuse existing form/card components where appropriate)
• src/App.js
• Navigation component(s) for Profile access

Backend

• backend/src/routes/profile.js
• backend/src/validation/profile.js
• backend/src/server.js
• Relevant service/database utility files following existing project structure

Docs

• docs/profile-migration.sql

Tests

• backend/tests/integration/profile.test.js

Test Plan

Backend:

• cd backend && npm test
• Profile fetch success
• Profile update success
• Unauthorized access handling
• Validation failure scenarios

Project-wide:

• npm run test:ci

Manual Smoke Testing:

1. Login with a valid Clerk account.
2. Navigate to Profile page.
3. Fetch existing profile data.
4. Update profile fields.
5. Refresh and verify persistence.
6. Verify responsive behavior on mobile and desktop layouts.
7. Verify validation messages for invalid URLs and graduation year inputs.

I'll also ensure the UI remains consistent with the Dashboard and Documents sections by reusing existing patterns for forms, cards, loading states, and error handling.

Looking forward to contributing.

[Venkat-Kolasani]

Assigned to you under GSSoC’26, @vaishnavikhatri3 — thanks for the thorough revised plan.

Confirmed scope (v1)

Backend

GET /api/profile — return authenticated user’s profile; create empty row on first access if missing
PATCH /api/profile — partial update with Joi validation
backend/src/routes/profile.js + schemas (follow documents-schemas.js naming pattern)
Register routes in backend/src/app.js with requireAuth
Filter all DB access by req.auth.internalUserId
Database — docs/profile-migration.sql

Table user_profiles with user_id UUID REFERENCES users(id) ON DELETE CASCADE UNIQUE
Fields: bio, college, degree, graduation_year, skills (comma-separated text or TEXT[] — pick one and document), github_url, linkedin_url, portfolio_url, timestamps
RLS + index on user_id

Frontend

src/pages/Profile.jsx (protected route in App.js)
Profile link in src/components/common/Navbar.jsx
API methods in src/services/api.js
Show Clerk name/email as read-only via useUser(); editable fields from API only
Reuse existing card/form/loading/error patterns (Dashboard / Documents style)

Out of scope v1: profile picture upload (Phase 2), frontend Supabase calls, Clerk account settings changes

Tests: backend/tests/integration/profile.test.js — GET success, PATCH success, 401 unauthenticated, validation failures

Also run: cd backend && npm test, npm run test:ci

PR: Fixes #35 in description + manual smoke steps from your test plan

Deadline
Open a draft or ready PR within 10 days (by June 21, 2026). Comment here if you need an extension.