FEATURE REQUEST: User Profile Page Integration

[aniket866]

Is your feature request related to a problem?

• Yes, it is related to a problem

Describe the feature you'd like

@Saahi30 , Please review this , I am interested to work on this , please assign me this one

🌟 Feature Request: User Profile Page Integration

📘 Overview

This feature introduces a dedicated Profile Page (/profile) within the Inpact AI platform.
It allows authenticated users to view, edit, and personalize their profiles while maintaining the same clean, modern dashboard design and user experience.

---

🔍 Problem Statement

Currently, users can access their dashboard and manage collaborations, but there is no centralized profile management page.
This results in limited personalization, no analytics visibility, and inconsistent user engagement.

Identified Issues:

• ❌ No direct /profile route for users
• ❌ Missing personal stats, achievements, and social presence
• ❌ Fragmented user identity across dashboard sections

---

🌈 Proposed Solution

Implement a Profile Page accessible at /profile for authenticated users.

Key Features:

• Editable profile (avatar, banner, name, handle, bio)
• Profile stats: followers, engagement rate, collaborations, earnings
• AI “Profile Strength” insights & suggestions
• Tabs for Overview, Portfolio, Analytics, and Settings
• Consistent design using Tailwind CSS + shadcn/ui + Framer Motion
• Fully responsive layout

ProfilePage.made.webm

---

🧩 Technical Specifications

Frontend:
React / Next.js (or Vite) with TypeScript
Tailwind CSS + shadcn/ui + Framer Motion
Lucide React icons

Backend:
Supabase (for auth & profile data)

Record

• I agree to follow this project's Code of Conduct
• I want to work on implementing this feature

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash

# Check the overall project structure
echo "=== Project Structure ==="
fd -t d -d 1 . | head -20

echo -e "\n=== Package.json contents ==="
cat package.json 2>/dev/null || echo "No package.json in root"

# Check for Next.js or Vite setup
echo -e "\n=== Checking for Next.js ==="
fd "next.config" -t f

echo -e "\n=== Checking for Vite ==="
fd "vite.config" -t f

# Look for existing profile-related files
echo -e "\n=== Searching for existing profile files ==="
fd -t f "profile" -i

# Check for routing files
echo -e "\n=== Searching for routing configuration ==="
fd -t f "route" -i | head -20

# Check for authentication setup
echo -e "\n=== Searching for auth files ==="
fd -t f "auth" -i | head -20

# Check for Supabase configuration
echo -e "\n=== Checking for Supabase ==="
rg -l "supabase" --type=ts --type=tsx --type=js --type=json | head -10

Length of output: 675

---

🏁 Script executed:

#!/bin/bash

# Check Frontend package.json
echo "=== Frontend Package.json ==="
cat Frontend/package.json

echo -e "\n=== Frontend source structure ==="
fd -t d -d 2 Frontend/src

echo -e "\n=== Check for existing pages/routes ==="
fd -t f -e tsx -e ts Frontend/src/pages 2>/dev/null || echo "No pages directory found"
fd -t f -e tsx -e ts Frontend/src/app 2>/dev/null || echo "No app directory found"

echo -e "\n=== Main routing file ==="
cat Frontend/src/main.tsx 2>/dev/null || cat Frontend/src/App.tsx 2>/dev/null

echo -e "\n=== Existing profile components ==="
cat Frontend/src/components/collaboration-hub/ViewProfileModal.tsx | head -50

echo -e "\n=== Check AuthContext ==="
cat Frontend/src/context/AuthContext.tsx | head -80

Length of output: 7690

---

🏁 Script executed:

#!/bin/bash

# Check the App.tsx file for routing
echo "=== App.tsx routing configuration ==="
cat Frontend/src/App.tsx

echo -e "\n=== Check for existing dashboard/pages ==="
fd -t f -e tsx . Frontend/src | grep -E "(page|Page|dashboard|Dashboard)" | head -20

echo -e "\n=== Components directory structure ==="
fd -t d . Frontend/src/components -d 1

echo -e "\n=== Check if there's a pages directory ==="
ls -la Frontend/src/ | grep -E "pages|views|screens"

echo -e "\n=== Check for user-related API calls ==="
rg -n "profile|user" Frontend/src --type-add 'tsx:*.tsx' --type tsx -g '!node_modules' -g '*.tsx' -C 2 | head -100

Length of output: 12603

---

🏁 Script executed:

#!/bin/bash

# Check the rest of AuthContext to understand user management
echo "=== Complete AuthContext file ==="
cat Frontend/src/context/AuthContext.tsx

echo -e "\n=== Check Backend structure for profile API ==="
fd -t f . Backend/app/routes | head -20

echo -e "\n=== Check if there's a profile route in backend ==="
rg -l "profile" Backend/app/routes

echo -e "\n=== Check database models/schema if available ==="
fd -t f "model|schema" Backend/app

Length of output: 7093

---

🏁 Script executed:

#!/bin/bash

# Check database models
echo "=== Database Models ==="
cat Backend/app/models/models.py

echo -e "\n=== Database Schemas ==="
cat Backend/app/schemas/schema.py

echo -e "\n=== Check Supabase utils in Frontend ==="
cat Frontend/src/utils/supabase.ts 2>/dev/null || cat Frontend/src/utils/supabase.tsx 2>/dev/null

echo -e "\n=== Check for any existing user-related types ==="
fd -e ts -e tsx "type" Frontend/src | head -10

Length of output: 7728

---

@aniket866, I've thoroughly reviewed issue #146 for the User Profile Page Integration feature. This is an excellent and well-structured feature request! Here's my comprehensive analysis:

✅ Technical Feasibility Assessment

Great news! The proposed feature is fully feasible and aligns perfectly with the existing codebase:

Current Tech Stack Alignment

• ✅ Frontend: Already using React + Vite + TypeScript
• ✅ Styling: Tailwind CSS with Radix UI components (shadcn/ui pattern)
• ✅ Animations: Framer Motion already installed
• ✅ Icons: Lucide React available
• ✅ Backend: Supabase auth & database already configured
• ✅ Routing: React Router v7 in place

Database Schema Support

The existing database structure already supports most profile features:

• users table: Contains username, email, role, profile_image, bio, is_online, last_seen
• audience_insights table: Has engagement_rate, average_views, price_expectation
• social_profiles table: Referenced in AuthContext for creator profiles
• brands table: For brand-specific data
• user_posts table: For portfolio content

📋 Implementation Roadmap

1. Frontend Components (Priority: High)

// Suggested file structure:
Frontend/src/pages/ProfilePage.tsx          // Main profile page
Frontend/src/components/profile/
  ├── ProfileHeader.tsx                     // Avatar, banner, basic info
  ├── ProfileStats.tsx                      // Stats cards
  ├── ProfileTabs.tsx                       // Tab navigation
  ├── ProfileOverview.tsx                   // Overview tab content
  ├── ProfilePortfolio.tsx                  // Portfolio grid
  ├── ProfileAnalytics.tsx                  // Analytics charts
  ├── ProfileSettings.tsx                   // Settings form
  ├── ProfileStrengthWidget.tsx             // AI insights
  └── EditProfileDialog.tsx                 // Edit modal

2. Routing (Add to App.tsx)

<Route
  path="/profile"
  element={
    <ProtectedRoute>
      <ProfilePage />
    </ProtectedRoute>
  }
/>

3. Backend API Endpoints (Recommended)

# Backend/app/routes/profile.py (new file)
GET    /api/profile/:userId          # Fetch profile data
PUT    /api/profile/:userId          # Update profile
GET    /api/profile/:userId/stats    # Get aggregated stats
GET    /api/profile/strength         # AI profile strength analysis
POST   /api/profile/avatar           # Upload avatar/banner

4. Data Aggregation Logic

You'll need to aggregate stats from multiple tables:

• Followers: Track in new user_followers table or via social_profiles
• Engagement Rate: From audience_insights.engagement_rate
• Collaborations: Count from collaborations table
• Earnings: Sum from sponsorship_payments table

🎯 Key Features to Implement

Phase 1 - Core Features (Week 1-2)

1. ✅ Profile page route & layout
2. ✅ Display user info (avatar, bio, username, role)
3. ✅ Basic stats cards (using existing data)
4. ✅ Tab navigation (Overview, Portfolio, Analytics, Settings)
5. ✅ Edit profile dialog (name, bio, avatar upload)

Phase 2 - Enhanced Features (Week 3-4)

6. ✅ Portfolio grid (fetch from user_posts)
7. ✅ Analytics charts (using recharts - already installed)
8. ✅ Settings page (privacy, notifications)
9. ✅ Social media links integration
10. ✅ Profile banner customization

Phase 3 - AI & Polish (Week 5)

11. ✅ AI Profile Strength widget (integrate with /api/ai routes)
12. ✅ Responsive design testing
13. ✅ Loading states & animations
14. ✅ Error handling

⚠️ Potential Challenges & Solutions

Challenge 1: Profile Data Completeness

Issue: Users table has limited fields (no followers count, earnings, etc.)
Solution:

• Add computed fields via API aggregation
• Create database views or functions for common queries
• Consider adding profile_metadata JSON field for flexible data

Challenge 2: Image Uploads

Issue: Avatar/banner upload to Supabase Storage
Solution:

• Use Supabase Storage buckets (avatars, banners)
• Implement file validation (size, type)
• Generate thumbnails for optimization

Challenge 3: AI Profile Strength

Issue: Need ML model for profile analysis
Solution:

• Leverage existing /api/ai endpoints
• Create scoring algorithm based on: profile completeness, engagement metrics, post frequency
• Use simple heuristics initially, enhance with ML later

Challenge 4: Real-time Stats

Issue: Stats may become stale
Solution:

• Implement caching strategy (Redis or Supabase functions)
• Use Supabase real-time subscriptions for live updates
• Add manual refresh button

💡 Recommendations

1. Follow Existing Patterns

Study these existing pages for consistency:

• DashboardPage.tsx - Layout structure
• Analytics.tsx - Chart implementations
• Collaborations.tsx - Data fetching patterns

2. Reuse UI Components

Leverage existing shadcn/ui components:

• Avatar, AvatarImage, AvatarFallback
• Tabs, TabsList, TabsTrigger, TabsContent
• Card, CardHeader, CardTitle, CardContent
• Dialog for edit modals
• Badge for tags/labels

3. State Management

• Use useAuth() hook for current user
• Consider adding profile state to Redux store (already using @reduxjs/toolkit)
• Implement optimistic updates for better UX

4. Type Safety

Create proper TypeScript interfaces:

interface UserProfile {
  id: string;
  username: string;
  email: string;
  role: 'creator' | 'brand';
  profile_image?: string;
  banner_image?: string;
  bio?: string;
  stats: ProfileStats;
  social_links: SocialLink[];
}

interface ProfileStats {
  followers: number;
  engagement_rate: number;
  collaborations: number;
  earnings: number;
}

🚀 Next Steps

1. Create a detailed implementation PR with:

   • Profile page component structure
   • API route definitions
   • Database migrations (if needed)
   • Type definitions

2. Break down into smaller tasks:

   • Task 1: Basic profile page UI
   • Task 2: Data fetching & display
   • Task 3: Edit functionality
   • Task 4: Stats aggregation
   • Task 5: Portfolio tab
   • Task 6: Analytics integration
   • Task 7: AI insights
   • Task 8: Testing & polish

3. Consider edge cases:

   • Public vs. private profiles
   • Different views for creator vs. brand roles
   • Profile completeness validation
   • Permission checks for editing

📝 Additional Notes

• The video mockup shows a clean, modern design that matches the existing UI perfectly
• Consider adding profile sharing functionality (shareable link)
• Implement profile verification badges for authenticated users
• Add profile activity timeline/feed
• Consider SEO optimization if profiles will be public

This is a valuable feature that will significantly enhance user engagement and platform completeness. The technical foundation is solid, and the implementation path is clear. Good luck with the development! 🎉

[aniket866]

@chandansgowda , Please review this , I am interested to work on this , please assign me this one

[rahul-vyas-dev]

Hey @aniket866
Are you working on this issue? It hasn’t been assigned to you.

[rahul-vyas-dev]

Hey @chandansgowda
is this issue still need to work ?