NexGenStudioDev/ciitm-frontend

Create Profile Page Based on Figma Design

Offen

#145 geöffnet am 13.04.2025

Auf GitHub ansehenContributor Guide
 (15 Kommentare) (1 Reaktion) (2 zugewiesene Personen)JavaScript (39 Forks)auto 404
Ciitm FrontendImportantResponsiveUi Updateatomic-designbest-practicesenhancementfeature-requestgood first issuehelp wantedonlydust-wave

Repository-Metriken

Stars
 (9 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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-Richtung
Implementieren Sie die Profilseiten UI basierend auf dem Figma Design und integrieren Sie sie mit den bereitgestellten API Endpunkten zum Abrufen und Aktualisieren des Admin Profils und der Social Links.
Tech Stack
javascriptreact
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactAPI Integration
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
65