Build User Profile Page

[Fis-ayo]

Description

Create the logged-in user’s profile page for CodeFolio. This page should allow the user to view their own profile information, manage their portfolio details, view the projects they have uploaded, and access the projects they have bookmarked.

Unlike the author profile page, this page is for the current authenticated user and should support managing personal profile content. It should clearly present the user’s information and organize content in a way that is easy to view and extend later.

Tasks

• Create the user profile page/component
• Set up routing for the logged-in user’s profile page
• Fetch the current user’s profile data from the backend
• Display the user’s main profile information:
  • full name
  • role
  • profile image if available
• Add tab navigation for the page
  • About tab
  • Projects tab
  • Bookmarks tab
• Build the About tab content
  • display bio
  • display tech stack expertise
  • display social links if available
  • display location if available
• Build the Projects tab content
  • fetch all projects created by the logged-in user
  • display the user’s projects in a list or grid
  • Add a delete project for each project
• Build the Bookmarks tab content
  • fetch all projects bookmarked by the logged-in user
  • display bookmarked projects in a list or grid
• Add an Edit Profile button or clear entry point for future profile editing
• Handle loading state while profile data is being fetched
• Handle empty state if the user has no projects yet
• Handle empty state if the user has no bookmarked projects yet
• Handle error state if profile data cannot be loaded

Functional Requirements

• The page should load the current authenticated user’s profile data
• The page should clearly identify this as the logged-in user’s own profile
• The About tab should show the user’s personal portfolio information, including bio and tech stack expertise
• The Projects tab should show all projects uploaded by the logged-in user
• The Bookmarks tab should show all projects the user has bookmarked
• Users should be able to switch between tabs without leaving the page
• The page should support missing optional fields gracefully
  • social links may be absent
  • location may be absent
  • profile image may be absent
• The page should use backend data and not hardcoded values
• The structure should be ready for future profile editing functionality

References

Follow design structure in
Figma

Acceptance Criteria

• User profile page is created and connected to routing
• Current user profile data is fetched successfully from the backend
• Full name and role are displayed
• About tab displays bio and tech stack expertise
• Social links and location display correctly when available
• Projects tab displays all projects created by the logged-in user
• Bookmarks tab displays all projects bookmarked by the logged-in user
• User projects are fetched successfully from the backend
• Bookmarked projects are fetched successfully from the backend
• An Edit Profile button or placeholder entry point is visible
• Loading, empty, and error states are handled properly
• Page is ready for future profile editing and management features

[DevDominique]

I'd like to build the form to create a new project and implement markdown render connected to form submission

[codewithMycah]

@DevDominique could you please use username for the profile route instead of id