feat: Add DevFolio - GitHub Profiles

[adarsh0011]

Description

Complete implementation of DevFolio feature - a GitHub profiles showcase that allows community members to submit and discover amazing developer profiles with robust GitHub API integration and fallback systems.

Fixes #351

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

Features Implemented

Core Functionality

• Profile Showcase: Beautiful grid display of GitHub profiles
• Search & Filter: Search by name, username, bio with featured filter
• Profile Submission: Modal form for submitting GitHub profiles
• Admin Dashboard: Comprehensive admin panel for managing submissions
• Like System: Users can like and save favorite profiles

Reliability Features

• GitHub API Integration: Real-time profile fetching with rate limit handling
• Mock Fallback System: localStorage-based fallback for rate limits/offline use
• Error Handling: Comprehensive error handling with user-friendly messages
• Data Validation: Input validation and sanitization

UI/UX Excellence

• Responsive Design: Mobile-first approach with Tailwind CSS
• Dark Mode Support: Full dark/light mode compatibility
• Smooth Animations: Framer Motion animations for enhanced UX
• Toast Notifications: Real-time feedback system
• Loading States: Proper loading indicators throughout

🏗️ Technical Architecture

New Components

• DevfolioSection.tsx - Main showcase component
• ProfileCard.tsx - Individual profile display
• SubmissionModal.tsx - Profile submission form
• AdminDashboard.tsx - Admin management interface
• Toast.tsx - Notification system

Services & Data Layer

• github.ts - GitHub API service with fallbacks
• firestore.ts - Firebase/Firestore operations
• mockFirestore.ts - localStorage mock system
• devfolio.ts - TypeScript type definitions

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers/devices
• My changes do not generate new console warnings or errors , I ran npm run build and attached scrrenshot in this PR.
• This is already assigned Issue to me, not an unassigned issue.

Next Steps (Future Enhancements) 🎯

• Add user authentication for personalized likes
• Implement profile analytics and insights
• Add advanced filtering by programming languages
• Create profile verification system
• Add social sharing capabilities

ScreenCast

Screencast.from.2025-09-03.10-17-20.mp4

[vercel]

@adarsh0011 is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[adarsh0011]

@sanjay-kv, can you review it when you get time

[Adez017]

Awesome @adarsh0011, great job 👍

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Sep 18, 2025 2:57pm

[adarsh0011]

Hi @sanjay-kv,

I'm following on this PR for the DevFolio feature. I wanted to check if the implementation meets your expectations and the project's standards.

I've ensured it includes all the core functionality, error handling, and responsive design as described. The Vercel preview is deployed and ready for your final review.

Please let me know if there are any adjustments or refinements you'd like me to make. I'm happy to iterate on it.

Thanks for your time and guidance!

[sanjay-kv]

its not really loading, can you look into it

[adarsh0011]

its not really loading, can you look into it

is it failing production builds? cause it is running fine in development server i've checked it now

[adarsh0011]

Hi @sanjay-kv @iitzIrFan, is there anything to resolve in this PR as it is staled

[iitzIrFan]

@adarsh0011 No I guess as @sanjay-kv has approved this pr, solve merge conflicts plz to be merge into main.

[iitzIrFan]

@adarsh0011 @sanjay-kv Merge conflicts resolve task assigned.

[sanjay-kv]

its not loading @

[adarsh0011]

its not loading @

The page is functioning correctly in local development but encountering a rendering issue in the production environment (Vercel deployment).
I can't even debug because i don't have access for vercel deployed page but i think there must be failure from production build