Pinned Projects Feature

[BryanPineda21]

Pinned Projects Feature

Overview

This feature allows users to highlight their best or most important projects by pinning them to their profile, similar to GitHub's pinned repositories functionality.

Current Status

• Users are currently unable to pin their projects
• Both backend and frontend implementation are incomplete

Requirements

Core Functionality

• Allow users to pin up to 6 projects on their profile
• Enable reordering of pinned projects via drag-and-drop interface
• Implement "Pin" and "Unpin" actions from project cards/detail views
• Display pinned projects in a prominent section on user profiles

User Interface

• Design pinned projects section for profile page
• Create pin/unpin controls:
  • Button/toggle on project cards
  • Option in project settings/details
• Implement drag-handle UI for reordering
• Add visual indicators for pinned status on project cards

Backend Requirements

• Create/update user schema to store pinned projects list with order
• Develop API endpoints:
  • GET pinned projects for a user
  • ADD project to pinned list
  • REMOVE project from pinned list
  • UPDATE order of pinned projects
• Ensure proper validation and error handling

Frontend Implementation

• Build reusable pinned projects component
• Implement drag-and-drop functionality (consider react-beautiful-dnd)
• Create empty state/guidance for users with no pinned projects
• Handle loading/error states for pinned projects section

Technical Considerations

• Consider caching pinned projects data for performance
• Ensure mobile-friendly drag-and-drop implementation
• Update project cards to show "pinned" status when applicable

Mockups/References

• GitHub profile pinned repositories feature
• [design mockups or wireframes here]

Acceptance Criteria

• Users can pin up to 6 projects
• Pinned projects appear in specified order on the profile
• Reordering works correctly via drag and drop
• Pin/unpin actions are intuitive and give immediate feedback
• Works across all supported devices/screen sizes

Priority

Medium-High

Estimated Effort

Medium 🚀🚀