0:00
/0:31

This is a highly scalable architectural update. Moving away from rigid, hardcoded database columns to a dynamic array structure future-proofs the application and provides a much better user experience for managing custom links.

Data Structure and API Overhaul

The rigid five-column structure (linkedin_url, instagram_url, etc.) is being completely removed.

  • New Payload: The API will now accept and return a single urls array containing up to 10 string values.
  • Backend Normalization: The server will automatically sanitize inputs, prepending https:// to any raw domains (like domain.com) before saving them to the database.
  • Clean Data: The frontend will filter out empty strings before submission, ensuring the database only stores actionable links.

2. UI Component: UrlListInput

To support the new array structure, a custom tag-style input component will be introduced.

  • Interactive Badges: Existing URLs will render as dismissible badges.
  • Smart Input: Users can type or paste URLs. Commas, spaces, and the Enter key will automatically commit the text into a new badge.
  • Pasting Support: If a user pastes a block of text containing multiple links separated by spaces or commas, the component will parse and split them into distinct badges instantly.
  • Constraints: The component will strictly enforce the 10-URL limit and prevent duplicate entries client-side.

3. Intelligent Platform Detection

Instead of relying on database columns to know which platform a URL belongs to, the frontend will dynamically evaluate the links on the fly.

  • Pattern Matching: A new utility (urlUtils.ts) will parse the hostname of each link and match it against known domains (LinkedIn, GitHub, YouTube, etc.).
  • Visual Identity: Known platforms will receive their respective brand icons. Unknown or custom personal websites will gracefully fall back to a generic globe icon.

4. Form State & Profile Display

Both the Add and Edit forms will be updated to handle the new array state. On the profile display side, the hardcoded list of social links will be replaced by a dynamic .map() function that renders the detected platform icons and labels in real time.