NexGenStudioDev/ciitm-frontend

Create Profile Page Based on Figma Design

Aberta

#145 aberto em 13 de abr. de 2025

Ver no GitHubGuia do colaborador
 (15 comentários) (1 reação) (2 responsáveis)JavaScript (39 forks)auto 404
Ciitm FrontendImportantResponsiveUi Updateatomic-designbest-practicesenhancementfeature-requestgood first issuehelp wantedonlydust-wave

Métricas do repositório

Stars
 (9 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Guia do colaborador

Direção de pesquisa
Implemente a interface da página de perfil com base no design do Figma e integre com os endpoints de API fornecidos para buscar e atualizar o perfil do administrador e links sociais.
Pilha de tecnologia
javascriptreact
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactAPI Integration
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65