Your Fandom Identity: Build the Dynamic Profile Page

[Gamin8ing]

Create a Dynamic Profile Page for FandomFusion

Points: 50

---

Description:

This advanced issue focuses on creating a Profile Page for FandomFusion with the following functionalities:

• Display the user’s profile image, name, and a button to send a friend request if not already friends (this feature is WIP in the backend).
• Show their lists (Game List, Movie List, Anime List) and make room for their posts (also WIP).
• Clicking on the user’s profile picture should navigate to the Profile Page, but for their own profile:
  • Replace the "Send Friend Request" button with an Edit Profile button.
  • Allow editing their lists directly from this view.
• Ensure clean routing between profiles and integrate all the mentioned features seamlessly.

---

Your Task:

1. Profile Page Design:

   • Create a new page named ProfilePage.jsx.
   • Display the following details:
     • Profile Image: Add a placeholder for now.
     • User Name: Display the user’s name prominently.
     • Friend Request Button:
       • Show if the user viewing the profile is not already friends.
       • Placeholder only for now, as the backend feature to check friendships is WIP.

2. User Lists:

   • Add three sections to display the user’s lists:
     • Game List
     • Movie List
     • Anime List
   • Each list should have an edit option (for the logged-in user only).

3. User Posts Section:

   • Add a placeholder for user posts, as this feature is WIP in the backend.

4. Personal Profile View:

   • If the user navigates to their own profile:
     • Replace the "Send Friend Request" button with an Edit Profile button.
     • Allow them to edit their profile details and lists.
   • Ensure the Friend Request Button does not appear.

5. Routing:

   • Implement clean routing to handle navigation between user profiles.
   • Clicking the user’s profile picture in the header should redirect to their own Profile Page.

Note

Remember to distinguish the details of user's own profile page and some other user's profile page.

---

Guidelines:

1. Save the new page as src/pages/ProfilePage.jsx.
2. Use the FandomFusion Backend to fetch user data:
   • Refer to the backend repo: FandomFusion Backend.
   • Use the API endpoints in the API Documentation.
3. Follow the Figma design theme for styling.
4. Ensure the page is responsive and user-friendly.

---

Submission Requirements:

1. Create a new branch named add-profile-page-<your-github-username>.
2. Submit a pull request (PR) with your implementation.
3. Attach a video recording showcasing the following:
   • Viewing someone else’s profile with the "Send Friend Request" button.
   • Viewing your own profile with the "Edit Profile" button.
   • Editing profile details and lists.

---

Resources:

• FandomFusion Backend Repository
• API Documentation
• React Context API
• React Router
• TailwindCSS Documentation

---

Let’s build a dynamic and user-friendly Profile Page for FandomFusion! 🚀

[Darkknight0125]

/claim

[Gamin8ing]

/info

[Opencodeiiita-Bot]

User	Repo
Darkknight0125	CLI-For-You (1)
Gamin8ing	0

[Gamin8ing]

congo @Darkknight0125 this issue goes to you 🎉

[Gamin8ing]

@Darkknight0125 progress on the issue? As opencode is very close to being end, i might have to assign it to somebody else

[Darkknight0125]

@Gamin8ing PR will be made by today noon or evening, when is opencode ending?

[Anon-is-Anon]

@Darkknight0125 Update on the issue ? Open code ends today so do hurry !!

@Gamin8ing PR will be made by today noon or evening, when is opencode ending?