NexGenStudioDev/ciitm-frontend

Create Profile Page Based on Figma Design

Open

#145 opened on Apr 13, 2025

View on GitHubContributor guide
 (15 comments) (1 reaction) (2 assignees)JavaScript (39 forks)auto 404
Ciitm FrontendImportantResponsiveUi Updateatomic-designbest-practicesenhancementfeature-requestgood first issuehelp wantedonlydust-wave

Repository metrics

Stars
 (9 stars)
PR merge metrics
 (PR metrics pending)

Description

This page allows Admin to view and edit their profile information and social media links, Admins can update their profile picture, name, email, and social links using an intuitive UI.

🖼️ UI Features

Display Admin details:

  • Avatar (Profile Picture)
  • Name
  • Email
  • Social Media Links (Twitter, LinkedIn, GitHub, etc.)

Edit Mode:

  • Clicking the 🖉 (pencil) icon enables editing of the corresponding fields.
  • Profile picture can be uploaded.
  • Social links can be added or updated.

🔄 API Integration

📥 Fetch Existing Admin Info & Social Links

  • fetch profile data and links from the backend.

✏️ Update Admin Profile

PUT /api/admin/profile/edit

✏️ Update Social Link

PUT /api/admin/edit/social/link

Create Social Link

POST  /create/social/link

Figma Link https://www.figma.com/design/gcA03937R5YsmJbQHobc0Z/Untitled?node-id=1-3&t=JHtjXIfau2KAXEVq-0

Contributor guide

Research direction
Implement the profile page UI based on the Figma design and integrate with the provided API endpoints for fetching and updating admin profile and social links.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactAPI Integration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65