From 4a3546988ae2f1f1ee5780400f24bdce072daeea Mon Sep 17 00:00:00 2001
From: Darius Robinson <drobin86@emich.edu>
Date: Mon, 29 Sep 2025 10:41:59 -0400
Subject: [PATCH 1/5] feat: implement group creation with invite codes

- Add backend API endpoints for creating and joining groups
- Generate unique 6-character group codes
- Create frontend components for group management
- Add database schema documentation
- Implement role-based access (admin/member)
- Add copy-to-clipboard functionality for group codes

Requires Supabase setup to be fully functional
---
 apps/web/DATABASE_SCHEMA.md              | 124 +++++++++++++++
 apps/web/app/api/groups/join/route.js    |  80 ++++++++++
 apps/web/app/api/groups/route.js         | 158 ++++++++++++++++++++
 apps/web/app/groups/page.jsx             | 182 +++++++++++++++++++++++
 apps/web/components/CreateGroupModal.jsx | 126 ++++++++++++++++
 apps/web/components/JoinGroupModal.jsx   | 115 ++++++++++++++
 6 files changed, 785 insertions(+)
 create mode 100644 apps/web/DATABASE_SCHEMA.md
 create mode 100644 apps/web/app/api/groups/join/route.js
 create mode 100644 apps/web/app/api/groups/route.js
 create mode 100644 apps/web/app/groups/page.jsx
 create mode 100644 apps/web/components/CreateGroupModal.jsx
 create mode 100644 apps/web/components/JoinGroupModal.jsx

diff --git a/apps/web/DATABASE_SCHEMA.md b/apps/web/DATABASE_SCHEMA.md
new file mode 100644
index 0000000..d7fc3fe
--- /dev/null
+++ b/apps/web/DATABASE_SCHEMA.md
@@ -0,0 +1,124 @@
+# Database Schema for Groups Feature
+
+This document outlines the database tables needed for the group creation feature.
+
+## Required Tables
+
+### 1. `groups` table
+```sql
+CREATE TABLE groups (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  name VARCHAR(255) NOT NULL,
+  description TEXT,
+  code VARCHAR(6) UNIQUE NOT NULL,
+  created_by UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create index for faster code lookups
+CREATE INDEX idx_groups_code ON groups(code);
+CREATE INDEX idx_groups_created_by ON groups(created_by);
+```
+
+### 2. `group_members` table
+```sql
+CREATE TABLE group_members (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  group_id UUID REFERENCES groups(id) ON DELETE CASCADE,
+  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  role VARCHAR(20) DEFAULT 'member' CHECK (role IN ('admin', 'member')),
+  joined_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  UNIQUE(group_id, user_id)
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_group_members_group_id ON group_members(group_id);
+CREATE INDEX idx_group_members_user_id ON group_members(user_id);
+```
+
+## Row Level Security (RLS) Policies
+
+### Groups table policies
+```sql
+-- Enable RLS
+ALTER TABLE groups ENABLE ROW LEVEL SECURITY;
+
+-- Users can view groups they are members of
+CREATE POLICY "Users can view groups they belong to" ON groups
+  FOR SELECT USING (
+    id IN (
+      SELECT group_id FROM group_members 
+      WHERE user_id = auth.uid()
+    )
+  );
+
+-- Users can create groups
+CREATE POLICY "Users can create groups" ON groups
+  FOR INSERT WITH CHECK (created_by = auth.uid());
+
+-- Only group admins can update groups
+CREATE POLICY "Admins can update groups" ON groups
+  FOR UPDATE USING (
+    created_by = auth.uid() OR
+    id IN (
+      SELECT group_id FROM group_members 
+      WHERE user_id = auth.uid() AND role = 'admin'
+    )
+  );
+
+-- Only group admins can delete groups
+CREATE POLICY "Admins can delete groups" ON groups
+  FOR DELETE USING (
+    created_by = auth.uid() OR
+    id IN (
+      SELECT group_id FROM group_members 
+      WHERE user_id = auth.uid() AND role = 'admin'
+    )
+  );
+```
+
+### Group members table policies
+```sql
+-- Enable RLS
+ALTER TABLE group_members ENABLE ROW LEVEL SECURITY;
+
+-- Users can view members of groups they belong to
+CREATE POLICY "Users can view group members" ON group_members
+  FOR SELECT USING (
+    group_id IN (
+      SELECT group_id FROM group_members 
+      WHERE user_id = auth.uid()
+    )
+  );
+
+-- Users can join groups (insert themselves)
+CREATE POLICY "Users can join groups" ON group_members
+  FOR INSERT WITH CHECK (user_id = auth.uid());
+
+-- Users can leave groups (delete themselves)
+CREATE POLICY "Users can leave groups" ON group_members
+  FOR DELETE USING (user_id = auth.uid());
+
+-- Group admins can manage members
+CREATE POLICY "Admins can manage members" ON group_members
+  FOR ALL USING (
+    group_id IN (
+      SELECT group_id FROM group_members 
+      WHERE user_id = auth.uid() AND role = 'admin'
+    )
+  );
+```
+
+## Setup Instructions
+
+1. **Create the tables** in your Supabase SQL editor
+2. **Set up RLS policies** for security
+3. **Test the policies** by creating a group and joining it
+4. **Update your `.env.local`** with Supabase credentials
+
+## Notes
+
+- Group codes are 6 characters long (A-Z, 0-9)
+- The creator automatically becomes an admin member
+- RLS ensures users can only see groups they belong to
+- All timestamps use UTC timezone
diff --git a/apps/web/app/api/groups/join/route.js b/apps/web/app/api/groups/join/route.js
new file mode 100644
index 0000000..d9d2350
--- /dev/null
+++ b/apps/web/app/api/groups/join/route.js
@@ -0,0 +1,80 @@
+// app/api/groups/join/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function POST(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { code } = body;
+
+    if (!code || code.trim().length === 0) {
+      return NextResponse.json({ error: 'Group code is required' }, { status: 400 });
+    }
+
+    // Find the group by code
+    const { data: group, error: groupError } = await supabase
+      .from('groups')
+      .select('id, name, description, code')
+      .eq('code', code.trim().toUpperCase())
+      .single();
+
+    if (groupError || !group) {
+      return NextResponse.json({ error: 'Invalid group code' }, { status: 404 });
+    }
+
+    // Check if user is already a member
+    const { data: existingMember } = await supabase
+      .from('group_members')
+      .select('id')
+      .eq('group_id', group.id)
+      .eq('user_id', user.id)
+      .single();
+
+    if (existingMember) {
+      return NextResponse.json({ error: 'You are already a member of this group' }, { status: 400 });
+    }
+
+    // Add user as a member
+    const { data: member, error: memberError } = await supabase
+      .from('group_members')
+      .insert({
+        group_id: group.id,
+        user_id: user.id,
+        role: 'member',
+        joined_at: new Date().toISOString(),
+      })
+      .select()
+      .single();
+
+    if (memberError) {
+      console.error('Error joining group:', memberError);
+      return NextResponse.json({ error: 'Failed to join group' }, { status: 500 });
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      group: {
+        id: group.id,
+        name: group.name,
+        description: group.description,
+        code: group.code,
+        role: 'member',
+        joined_at: member.joined_at,
+      }
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
diff --git a/apps/web/app/api/groups/route.js b/apps/web/app/api/groups/route.js
new file mode 100644
index 0000000..f283931
--- /dev/null
+++ b/apps/web/app/api/groups/route.js
@@ -0,0 +1,158 @@
+// app/api/groups/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+// Generate a unique group code
+function generateGroupCode() {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+  let result = '';
+  for (let i = 0; i < 6; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+export async function POST(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { name, description } = body;
+
+    if (!name || name.trim().length === 0) {
+      return NextResponse.json({ error: 'Group name is required' }, { status: 400 });
+    }
+
+    // Generate unique group code
+    let groupCode;
+    let isUnique = false;
+    let attempts = 0;
+    const maxAttempts = 10;
+
+    while (!isUnique && attempts < maxAttempts) {
+      groupCode = generateGroupCode();
+      
+      // Check if code already exists
+      const { data: existingGroup } = await supabase
+        .from('groups')
+        .select('id')
+        .eq('code', groupCode)
+        .single();
+      
+      if (!existingGroup) {
+        isUnique = true;
+      }
+      attempts++;
+    }
+
+    if (!isUnique) {
+      return NextResponse.json({ error: 'Failed to generate unique group code' }, { status: 500 });
+    }
+
+    // Create the group
+    const { data: group, error: groupError } = await supabase
+      .from('groups')
+      .insert({
+        name: name.trim(),
+        description: description?.trim() || null,
+        code: groupCode,
+        created_by: user.id,
+        created_at: new Date().toISOString(),
+      })
+      .select()
+      .single();
+
+    if (groupError) {
+      console.error('Error creating group:', groupError);
+      return NextResponse.json({ error: 'Failed to create group' }, { status: 500 });
+    }
+
+    // Add the creator as a member of the group
+    const { error: memberError } = await supabase
+      .from('group_members')
+      .insert({
+        group_id: group.id,
+        user_id: user.id,
+        role: 'admin',
+        joined_at: new Date().toISOString(),
+      });
+
+    if (memberError) {
+      console.error('Error adding creator as member:', memberError);
+      // Don't fail the request, just log the error
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      group: {
+        id: group.id,
+        name: group.name,
+        description: group.description,
+        code: group.code,
+        created_at: group.created_at,
+      }
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function GET(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    // Get groups where user is a member
+    const { data: groups, error: groupsError } = await supabase
+      .from('group_members')
+      .select(`
+        group_id,
+        role,
+        joined_at,
+        groups (
+          id,
+          name,
+          description,
+          code,
+          created_at,
+          created_by
+        )
+      `)
+      .eq('user_id', user.id)
+      .order('joined_at', { ascending: false });
+
+    if (groupsError) {
+      console.error('Error fetching groups:', groupsError);
+      return NextResponse.json({ error: 'Failed to fetch groups' }, { status: 500 });
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      groups: groups.map(member => ({
+        ...member.groups,
+        role: member.role,
+        joined_at: member.joined_at,
+      }))
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
diff --git a/apps/web/app/groups/page.jsx b/apps/web/app/groups/page.jsx
new file mode 100644
index 0000000..049f2be
--- /dev/null
+++ b/apps/web/app/groups/page.jsx
@@ -0,0 +1,182 @@
+// app/groups/page.jsx
+'use client';
+
+import CreateGroupModal from '@/components/CreateGroupModal';
+import JoinGroupModal from '@/components/JoinGroupModal';
+import { Check, Copy, Plus, Users } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export default function GroupsPage() {
+  const [groups, setGroups] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showJoinModal, setShowJoinModal] = useState(false);
+  const [copiedCode, setCopiedCode] = useState(null);
+
+  useEffect(() => {
+    fetchGroups();
+  }, []);
+
+  const fetchGroups = async () => {
+    try {
+      const response = await fetch('/api/groups');
+      const data = await response.json();
+      
+      if (data.success) {
+        setGroups(data.groups);
+      } else {
+        console.error('Failed to fetch groups:', data.error);
+      }
+    } catch (error) {
+      console.error('Error fetching groups:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleGroupCreated = (newGroup) => {
+    setGroups(prev => [newGroup, ...prev]);
+    setShowCreateModal(false);
+  };
+
+  const handleGroupJoined = (newGroup) => {
+    setGroups(prev => [newGroup, ...prev]);
+    setShowJoinModal(false);
+  };
+
+  const copyGroupCode = async (code) => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopiedCode(code);
+      setTimeout(() => setCopiedCode(null), 2000);
+    } catch (error) {
+      console.error('Failed to copy code:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-yellow-400 mx-auto mb-4"></div>
+          <p className="text-muted-foreground">Loading groups...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-3xl font-bold text-white mb-2">Groups</h1>
+          <p className="text-muted-foreground">Create and join music groups with friends</p>
+        </div>
+        
+        <div className="flex gap-3">
+          <button
+            onClick={() => setShowJoinModal(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
+          >
+            <Users className="h-4 w-4" />
+            Join Group
+          </button>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-black rounded-lg font-medium transition-colors"
+          >
+            <Plus className="h-4 w-4" />
+            Create Group
+          </button>
+        </div>
+      </div>
+
+      {groups.length === 0 ? (
+        <div className="text-center py-12">
+          <Users className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
+          <h3 className="text-xl font-semibold text-white mb-2">No groups yet</h3>
+          <p className="text-muted-foreground mb-6">Create your first group or join one with a code</p>
+          <div className="flex gap-3 justify-center">
+            <button
+              onClick={() => setShowJoinModal(true)}
+              className="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
+            >
+              Join Group
+            </button>
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="px-4 py-2 bg-yellow-400 hover:bg-yellow-500 text-black rounded-lg font-medium transition-colors"
+            >
+              Create Group
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {groups.map((group) => (
+            <div
+              key={group.id}
+              className="vybe-aurora bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-colors"
+            >
+              <div className="flex items-start justify-between mb-4">
+                <div>
+                  <h3 className="text-lg font-semibold text-white mb-1">{group.name}</h3>
+                  {group.description && (
+                    <p className="text-sm text-muted-foreground">{group.description}</p>
+                  )}
+                </div>
+                <span className={`px-2 py-1 text-xs rounded-full ${
+                  group.role === 'admin' 
+                    ? 'bg-yellow-400/20 text-yellow-400' 
+                    : 'bg-blue-400/20 text-blue-400'
+                }`}>
+                  {group.role}
+                </span>
+              </div>
+              
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-muted-foreground">Code:</span>
+                  <code className="text-sm font-mono bg-black/20 px-2 py-1 rounded text-white">
+                    {group.code}
+                  </code>
+                </div>
+                <button
+                  onClick={() => copyGroupCode(group.code)}
+                  className="p-1 hover:bg-white/10 rounded transition-colors"
+                  title="Copy group code"
+                >
+                  {copiedCode === group.code ? (
+                    <Check className="h-4 w-4 text-green-400" />
+                  ) : (
+                    <Copy className="h-4 w-4 text-muted-foreground" />
+                  )}
+                </button>
+              </div>
+              
+              <div className="mt-4 pt-4 border-t border-white/10">
+                <p className="text-xs text-muted-foreground">
+                  Joined {new Date(group.joined_at).toLocaleDateString()}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showCreateModal && (
+        <CreateGroupModal
+          onClose={() => setShowCreateModal(false)}
+          onGroupCreated={handleGroupCreated}
+        />
+      )}
+
+      {showJoinModal && (
+        <JoinGroupModal
+          onClose={() => setShowJoinModal(false)}
+          onGroupJoined={handleGroupJoined}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/components/CreateGroupModal.jsx b/apps/web/components/CreateGroupModal.jsx
new file mode 100644
index 0000000..7d90708
--- /dev/null
+++ b/apps/web/components/CreateGroupModal.jsx
@@ -0,0 +1,126 @@
+// components/CreateGroupModal.jsx
+'use client';
+
+import { Users, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function CreateGroupModal({ onClose, onGroupCreated }) {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/groups', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        onGroupCreated(data.group);
+      } else {
+        setError(data.error || 'Failed to create group');
+      }
+    } catch (error) {
+      setError('Network error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData(prev => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="vybe-aurora bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 w-full max-w-md">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-yellow-400/20 rounded-lg">
+              <Users className="h-5 w-5 text-yellow-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-white">Create Group</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-white/10 rounded transition-colors"
+          >
+            <X className="h-5 w-5 text-muted-foreground" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-white mb-2">
+              Group Name *
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50"
+              placeholder="Enter group name"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-white mb-2">
+              Description (optional)
+            </label>
+            <textarea
+              id="description"
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              rows={3}
+              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-yellow-400/50 focus:border-yellow-400/50 resize-none"
+              placeholder="Describe your group..."
+            />
+          </div>
+
+          {error && (
+            <div className="p-3 bg-red-500/20 border border-red-500/30 rounded-lg">
+              <p className="text-sm text-red-400">{error}</p>
+            </div>
+          )}
+
+          <div className="flex gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading || !formData.name.trim()}
+              className="flex-1 px-4 py-2 bg-yellow-400 hover:bg-yellow-500 disabled:bg-yellow-400/50 disabled:cursor-not-allowed text-black rounded-lg font-medium transition-colors"
+            >
+              {loading ? 'Creating...' : 'Create Group'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/JoinGroupModal.jsx b/apps/web/components/JoinGroupModal.jsx
new file mode 100644
index 0000000..e072c4e
--- /dev/null
+++ b/apps/web/components/JoinGroupModal.jsx
@@ -0,0 +1,115 @@
+// components/JoinGroupModal.jsx
+'use client';
+
+import { ArrowRight, Users, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function JoinGroupModal({ onClose, onGroupJoined }) {
+  const [code, setCode] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/groups/join', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ code: code.trim().toUpperCase() }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        onGroupJoined(data.group);
+      } else {
+        setError(data.error || 'Failed to join group');
+      }
+    } catch (error) {
+      setError('Network error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCodeChange = (e) => {
+    // Convert to uppercase and limit to 6 characters
+    const value = e.target.value.toUpperCase().slice(0, 6);
+    setCode(value);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="vybe-aurora bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 w-full max-w-md">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-400/20 rounded-lg">
+              <Users className="h-5 w-5 text-blue-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-white">Join Group</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-white/10 rounded transition-colors"
+          >
+            <X className="h-5 w-5 text-muted-foreground" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="code" className="block text-sm font-medium text-white mb-2">
+              Group Code *
+            </label>
+            <div className="relative">
+              <input
+                type="text"
+                id="code"
+                value={code}
+                onChange={handleCodeChange}
+                required
+                maxLength={6}
+                className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-400/50 focus:border-blue-400/50 text-center text-lg font-mono tracking-widest"
+                placeholder="ABC123"
+              />
+              <div className="absolute inset-y-0 right-3 flex items-center">
+                <ArrowRight className="h-4 w-4 text-muted-foreground" />
+              </div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-2">
+              Enter the 6-character code shared by the group creator
+            </p>
+          </div>
+
+          {error && (
+            <div className="p-3 bg-red-500/20 border border-red-500/30 rounded-lg">
+              <p className="text-sm text-red-400">{error}</p>
+            </div>
+          )}
+
+          <div className="flex gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading || code.length !== 6}
+              className="flex-1 px-4 py-2 bg-blue-400 hover:bg-blue-500 disabled:bg-blue-400/50 disabled:cursor-not-allowed text-white rounded-lg font-medium transition-colors"
+            >
+              {loading ? 'Joining...' : 'Join Group'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

From 0b7a5d0bfefcaf5f3f05501b13d91000e85565a9 Mon Sep 17 00:00:00 2001
From: Darius Robinson <drobin86@emich.edu>
Date: Sun, 19 Oct 2025 22:07:38 -0400
Subject: [PATCH 2/5] Update database schema for enhanced group features

- Add privacy column (public/private) to groups table
- Add status column (pending/active/deleted) for temporary groups
- Add expires_at column for 3-day cleanup feature
- Add performance indexes for new columns
- Create migration.sql with ready-to-run SQL commands
- Update documentation with new feature explanations
---
 apps/web/DATABASE_SCHEMA.md | 34 ++++++++++++++++++++++++++++++--
 apps/web/migration.sql      | 39 +++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/migration.sql

diff --git a/apps/web/DATABASE_SCHEMA.md b/apps/web/DATABASE_SCHEMA.md
index d7fc3fe..ddc4c9b 100644
--- a/apps/web/DATABASE_SCHEMA.md
+++ b/apps/web/DATABASE_SCHEMA.md
@@ -10,14 +10,20 @@ CREATE TABLE groups (
   id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
   name VARCHAR(255) NOT NULL,
   description TEXT,
+  privacy VARCHAR(10) DEFAULT 'public' CHECK (privacy IN ('public', 'private')),
   code VARCHAR(6) UNIQUE NOT NULL,
+  status VARCHAR(20) DEFAULT 'active' CHECK (status IN ('pending', 'active', 'deleted')),
+  expires_at TIMESTAMP WITH TIME ZONE,
   created_by UUID REFERENCES auth.users(id) ON DELETE CASCADE,
   created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
 );
 
--- Create index for faster code lookups
+-- Create indexes for faster lookups
 CREATE INDEX idx_groups_code ON groups(code);
 CREATE INDEX idx_groups_created_by ON groups(created_by);
+CREATE INDEX idx_groups_status ON groups(status);
+CREATE INDEX idx_groups_expires_at ON groups(expires_at);
+CREATE INDEX idx_groups_privacy ON groups(privacy);
 ```
 
 ### 2. `group_members` table
@@ -109,9 +115,29 @@ CREATE POLICY "Admins can manage members" ON group_members
   );
 ```
 
+## Migration Commands (If Tables Already Exist)
+
+If you already have the `groups` table, run these commands to add the new columns:
+
+```sql
+-- Add privacy column
+ALTER TABLE groups ADD COLUMN privacy VARCHAR(10) DEFAULT 'public' CHECK (privacy IN ('public', 'private'));
+
+-- Add status column for temporary groups
+ALTER TABLE groups ADD COLUMN status VARCHAR(20) DEFAULT 'active' CHECK (status IN ('pending', 'active', 'deleted'));
+
+-- Add expiration column for cleanup
+ALTER TABLE groups ADD COLUMN expires_at TIMESTAMP WITH TIME ZONE;
+
+-- Add indexes for new columns
+CREATE INDEX idx_groups_status ON groups(status);
+CREATE INDEX idx_groups_expires_at ON groups(expires_at);
+CREATE INDEX idx_groups_privacy ON groups(privacy);
+```
+
 ## Setup Instructions
 
-1. **Create the tables** in your Supabase SQL editor
+1. **Create the tables** in your Supabase SQL editor (or run migration commands if tables exist)
 2. **Set up RLS policies** for security
 3. **Test the policies** by creating a group and joining it
 4. **Update your `.env.local`** with Supabase credentials
@@ -122,3 +148,7 @@ CREATE POLICY "Admins can manage members" ON group_members
 - The creator automatically becomes an admin member
 - RLS ensures users can only see groups they belong to
 - All timestamps use UTC timezone
+- **Privacy levels**: 'public' (anyone can join) or 'private' (invite only)
+- **Status levels**: 'pending' (temporary, expires in 3 days), 'active' (permanent), 'deleted' (soft delete)
+- **Temporary groups**: Groups created without members start as 'pending' and expire after 3 days
+- **Group activation**: When someone joins a pending group, it becomes 'active' and expires_at is set to null
diff --git a/apps/web/migration.sql b/apps/web/migration.sql
new file mode 100644
index 0000000..366d183
--- /dev/null
+++ b/apps/web/migration.sql
@@ -0,0 +1,39 @@
+-- Migration SQL Commands for Enhanced Groups Feature
+-- Run these commands in your Supabase SQL Editor
+
+-- Add privacy column to groups table
+ALTER TABLE groups ADD COLUMN privacy VARCHAR(10) DEFAULT 'public' CHECK (privacy IN ('public', 'private'));
+
+-- Add status column for temporary groups (pending/active/deleted)
+ALTER TABLE groups ADD COLUMN status VARCHAR(20) DEFAULT 'active' CHECK (status IN ('pending', 'active', 'deleted'));
+
+-- Add expiration column for cleanup
+ALTER TABLE groups ADD COLUMN expires_at TIMESTAMP WITH TIME ZONE;
+
+-- Add indexes for new columns for better performance
+CREATE INDEX idx_groups_status ON groups(status);
+CREATE INDEX idx_groups_expires_at ON groups(expires_at);
+CREATE INDEX idx_groups_privacy ON groups(privacy);
+
+-- Update existing groups to have 'active' status (if any exist)
+UPDATE groups SET status = 'active' WHERE status IS NULL;
+
+-- Optional: Create a function to clean up expired groups
+CREATE OR REPLACE FUNCTION cleanup_expired_groups()
+RETURNS void AS $$
+BEGIN
+  -- Mark expired pending groups as deleted
+  UPDATE groups 
+  SET status = 'deleted', expires_at = NOW()
+  WHERE status = 'pending' 
+    AND expires_at IS NOT NULL 
+    AND expires_at < NOW();
+    
+  -- Log the cleanup (optional)
+  RAISE NOTICE 'Cleaned up expired groups at %', NOW();
+END;
+$$ LANGUAGE plpgsql;
+
+-- Optional: Create a scheduled job to run cleanup daily
+-- Note: This requires pg_cron extension to be enabled in Supabase
+-- SELECT cron.schedule('cleanup-expired-groups', '0 2 * * *', 'SELECT cleanup_expired_groups();');

From 7adc70147d08f1ebcdf3f3dab0b93251676bc2d0 Mon Sep 17 00:00:00 2001
From: Darius Robinson <drobin86@emich.edu>
Date: Mon, 27 Oct 2025 11:48:38 -0400
Subject: [PATCH 3/5] feat: implement friends feature with API routes

- Add friends database table schema with RLS policies
- Create /api/friends route for getting friends list and sending friend requests
- Create /api/friends/requests route for managing friend requests (accept/reject)
- Create /api/users/search route for searching users to friend
- Update DATABASE_SCHEMA.md with friends table documentation
- Add friends migration SQL file for database setup

The friends feature includes:
- Send friend requests
- Accept/reject friend requests
- Get friends list
- Search for users to add as friends
- Automatic status handling (pending, accepted)
---
 apps/web/DATABASE_SCHEMA.md                |  52 ++++++-
 apps/web/app/api/friends/requests/route.js | 154 +++++++++++++++++++++
 apps/web/app/api/friends/route.js          | 151 ++++++++++++++++++++
 apps/web/app/api/users/search/route.js     |  81 +++++++++++
 apps/web/friendsprivacy.sql                |  46 ++++++
 5 files changed, 482 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/app/api/friends/requests/route.js
 create mode 100644 apps/web/app/api/friends/route.js
 create mode 100644 apps/web/app/api/users/search/route.js
 create mode 100644 apps/web/friendsprivacy.sql

diff --git a/apps/web/DATABASE_SCHEMA.md b/apps/web/DATABASE_SCHEMA.md
index ddc4c9b..933c88a 100644
--- a/apps/web/DATABASE_SCHEMA.md
+++ b/apps/web/DATABASE_SCHEMA.md
@@ -1,6 +1,6 @@
-# Database Schema for Groups Feature
+# Database Schema for Groups and Friends Features
 
-This document outlines the database tables needed for the group creation feature.
+This document outlines the database tables needed for the group creation and friends features.
 
 ## Required Tables
 
@@ -42,6 +42,25 @@ CREATE INDEX idx_group_members_group_id ON group_members(group_id);
 CREATE INDEX idx_group_members_user_id ON group_members(user_id);
 ```
 
+### 3. `friends` table
+```sql
+CREATE TABLE friends (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user1_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  user2_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'accepted', 'blocked')),
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  UNIQUE(user1_id, user2_id),
+  CHECK (user1_id < user2_id)
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_friends_user1_id ON friends(user1_id);
+CREATE INDEX idx_friends_user2_id ON friends(user2_id);
+CREATE INDEX idx_friends_status ON friends(status);
+```
+
 ## Row Level Security (RLS) Policies
 
 ### Groups table policies
@@ -115,6 +134,35 @@ CREATE POLICY "Admins can manage members" ON group_members
   );
 ```
 
+### Friends table policies
+```sql
+-- Enable RLS
+ALTER TABLE friends ENABLE ROW LEVEL SECURITY;
+
+-- Users can view friendships they are part of
+CREATE POLICY "Users can view their friendships" ON friends
+  FOR SELECT USING (
+    user1_id = auth.uid() OR user2_id = auth.uid()
+  );
+
+-- Users can send friend requests (as user1_id where user1_id is less than user2_id)
+CREATE POLICY "Users can send friend requests" ON friends
+  FOR INSERT WITH CHECK (user1_id = auth.uid());
+
+-- Users can accept friend requests (update where they are user2_id)
+CREATE POLICY "Users can accept friend requests" ON friends
+  FOR UPDATE USING (
+    (user1_id = auth.uid() OR user2_id = auth.uid())
+    AND status = 'pending'
+  );
+
+-- Users can delete friendships (cancel requests, unfriend)
+CREATE POLICY "Users can delete friendships" ON friends
+  FOR DELETE USING (
+    user1_id = auth.uid() OR user2_id = auth.uid()
+  );
+```
+
 ## Migration Commands (If Tables Already Exist)
 
 If you already have the `groups` table, run these commands to add the new columns:
diff --git a/apps/web/app/api/friends/requests/route.js b/apps/web/app/api/friends/requests/route.js
new file mode 100644
index 0000000..d9e20c3
--- /dev/null
+++ b/apps/web/app/api/friends/requests/route.js
@@ -0,0 +1,154 @@
+// app/api/friends/requests/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function GET(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    // Get pending friend requests (both sent and received)
+    const { data: friendships, error: requestsError } = await supabase
+      .from('friends')
+      .select('id, user1_id, user2_id, status, created_at')
+      .or(`user1_id.eq.${user.id},user2_id.eq.${user.id}`)
+      .eq('status', 'pending');
+
+    if (requestsError) {
+      console.error('Error fetching friend requests:', requestsError);
+      return NextResponse.json({ error: 'Failed to fetch friend requests' }, { status: 500 });
+    }
+
+    // Categorize requests
+    const sent = [];
+    const received = [];
+
+    for (const friendship of friendships) {
+      const friendId = friendship.user1_id === user.id ? friendship.user2_id : friendship.user1_id;
+      
+      try {
+        const { data: friendData, error: userError } = await supabase.auth.admin.getUserById(friendId);
+        if (!userError && friendData?.user) {
+          const friendUser = friendData.user;
+          const friendInfo = {
+            id: friendUser.id,
+            email: friendUser.email,
+            name: friendUser.user_metadata?.full_name || friendUser.email?.split('@')[0],
+            username: friendUser.user_metadata?.username || friendUser.email?.split('@')[0],
+            friendship_id: friendship.id,
+            created_at: friendship.created_at
+          };
+
+          if (friendship.user1_id === user.id) {
+            sent.push(friendInfo);
+          } else {
+            received.push(friendInfo);
+          }
+        }
+      } catch (err) {
+        console.error(`Error fetching user ${friendId}:`, err);
+      }
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      sent,
+      received 
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function PATCH(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { friendshipId, action } = body;
+
+    if (!friendshipId || !action) {
+      return NextResponse.json({ error: 'Friendship ID and action are required' }, { status: 400 });
+    }
+
+    if (!['accept', 'reject'].includes(action)) {
+      return NextResponse.json({ error: 'Action must be accept or reject' }, { status: 400 });
+    }
+
+    // Check if friendship exists and user is the recipient
+    const { data: friendship, error: checkError } = await supabase
+      .from('friends')
+      .select('id, user1_id, user2_id, status')
+      .eq('id', friendshipId)
+      .eq('status', 'pending')
+      .single();
+
+    if (checkError || !friendship) {
+      return NextResponse.json({ error: 'Friend request not found or already processed' }, { status: 404 });
+    }
+
+    // Verify user is the recipient (user2_id)
+    if (friendship.user2_id !== user.id) {
+      return NextResponse.json({ error: 'Unauthorized to perform this action' }, { status: 403 });
+    }
+
+    if (action === 'accept') {
+      // Update status to accepted
+      const { error: updateError } = await supabase
+        .from('friends')
+        .update({ 
+          status: 'accepted',
+          updated_at: new Date().toISOString()
+        })
+        .eq('id', friendshipId);
+
+      if (updateError) {
+        console.error('Error accepting friend request:', updateError);
+        return NextResponse.json({ error: 'Failed to accept friend request' }, { status: 500 });
+      }
+
+      return NextResponse.json({ 
+        success: true, 
+        message: 'Friend request accepted'
+      });
+
+    } else if (action === 'reject') {
+      // Delete the friendship record
+      const { error: deleteError } = await supabase
+        .from('friends')
+        .delete()
+        .eq('id', friendshipId);
+
+      if (deleteError) {
+        console.error('Error rejecting friend request:', deleteError);
+        return NextResponse.json({ error: 'Failed to reject friend request' }, { status: 500 });
+      }
+
+      return NextResponse.json({ 
+        success: true, 
+        message: 'Friend request rejected'
+      });
+    }
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
diff --git a/apps/web/app/api/friends/route.js b/apps/web/app/api/friends/route.js
new file mode 100644
index 0000000..a17fe7d
--- /dev/null
+++ b/apps/web/app/api/friends/route.js
@@ -0,0 +1,151 @@
+// app/api/friends/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function GET(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    // Get all accepted friends for the current user
+    const { data: friendships, error: friendsError } = await supabase
+      .from('friends')
+      .select(`
+        id,
+        user1_id,
+        user2_id,
+        status,
+        created_at
+      `)
+      .or(`user1_id.eq.${user.id},user2_id.eq.${user.id}`)
+      .eq('status', 'accepted');
+
+    if (friendsError) {
+      console.error('Error fetching friends:', friendsError);
+      return NextResponse.json({ error: 'Failed to fetch friends' }, { status: 500 });
+    }
+
+    // Get unique friend IDs
+    const friendIds = [...new Set(friendships.map(f => f.user1_id === user.id ? f.user2_id : f.user1_id))];
+
+    // Fetch user details for friends
+    const friends = [];
+    for (const friendId of friendIds) {
+      try {
+        const { data: friendData, error: userError } = await supabase.auth.admin.getUserById(friendId);
+        if (!userError && friendData?.user) {
+          const friendUser = friendData.user;
+          const friendship = friendships.find(f => f.user1_id === friendId || f.user2_id === friendId);
+          friends.push({
+            id: friendUser.id,
+            email: friendUser.email,
+            name: friendUser.user_metadata?.full_name || friendUser.email?.split('@')[0],
+            username: friendUser.user_metadata?.username || friendUser.email?.split('@')[0],
+            friendship_id: friendship?.id,
+            created_at: friendship?.created_at
+          });
+        }
+      } catch (err) {
+        console.error(`Error fetching user ${friendId}:`, err);
+      }
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      friends 
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
+export async function POST(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const body = await request.json();
+    const { friendId } = body;
+
+    if (!friendId) {
+      return NextResponse.json({ error: 'Friend ID is required' }, { status: 400 });
+    }
+
+    if (friendId === user.id) {
+      return NextResponse.json({ error: 'You cannot send a friend request to yourself' }, { status: 400 });
+    }
+
+    // Check if user exists
+    const { data: friendUser, error: userError } = await supabase.auth.admin.getUserById(friendId);
+    if (userError || !friendUser) {
+      return NextResponse.json({ error: 'User not found' }, { status: 404 });
+    }
+
+    // Ensure user1_id < user2_id for consistency
+    const user1Id = user.id < friendId ? user.id : friendId;
+    const user2Id = user.id < friendId ? friendId : user.id;
+
+    // Check if friendship already exists
+    const { data: existingFriendship } = await supabase
+      .from('friends')
+      .select('id, status')
+      .eq('user1_id', user1Id)
+      .eq('user2_id', user2Id)
+      .single();
+
+    if (existingFriendship) {
+      if (existingFriendship.status === 'accepted') {
+        return NextResponse.json({ error: 'You are already friends' }, { status: 400 });
+      } else if (existingFriendship.status === 'pending') {
+        return NextResponse.json({ error: 'Friend request already sent' }, { status: 400 });
+      }
+    }
+
+    // Only the user with the smaller ID can send friend requests (to maintain order)
+    if (user1Id !== user.id) {
+      return NextResponse.json({ error: 'Friend request already exists from this user' }, { status: 400 });
+    }
+
+    // Create friend request
+    const { data: friendship, error: friendshipError } = await supabase
+      .from('friends')
+      .insert({
+        user1_id: user1Id,
+        user2_id: user2Id,
+        status: 'pending'
+      })
+      .select()
+      .single();
+
+    if (friendshipError) {
+      console.error('Error creating friend request:', friendshipError);
+      return NextResponse.json({ error: 'Failed to send friend request' }, { status: 500 });
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      message: 'Friend request sent',
+      friendship 
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
diff --git a/apps/web/app/api/users/search/route.js b/apps/web/app/api/users/search/route.js
new file mode 100644
index 0000000..8e56e53
--- /dev/null
+++ b/apps/web/app/api/users/search/route.js
@@ -0,0 +1,81 @@
+// app/api/users/search/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+
+export async function GET(request) {
+  try {
+    const cookieStore = await cookies();
+    const supabase = createRouteHandlerClient({ cookies: () => cookieStore });
+    
+    // Get the current user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const query = searchParams.get('q');
+
+    if (!query || query.trim().length === 0) {
+      return NextResponse.json({ error: 'Search query is required' }, { status: 400 });
+    }
+
+    // Search for users by email or username
+    // Note: This is a simplified search. For production, you'd want more sophisticated search
+    const { data: allUsers, error: listError } = await supabase.auth.admin.listUsers();
+    
+    if (listError) {
+      console.error('Error listing users:', listError);
+      return NextResponse.json({ error: 'Failed to search users' }, { status: 500 });
+    }
+
+    // Filter users based on query
+    const searchQuery = query.toLowerCase();
+    const matchingUsers = allUsers.users
+      .filter(u => {
+        if (u.id === user.id) return false; // Don't show current user
+        
+        const email = (u.email || '').toLowerCase();
+        const username = (u.user_metadata?.username || '').toLowerCase();
+        const fullName = (u.user_metadata?.full_name || '').toLowerCase();
+        
+        return email.includes(searchQuery) || 
+               username.includes(searchQuery) || 
+               fullName.includes(searchQuery);
+      })
+      .slice(0, 20); // Limit to 20 results
+
+    // Get existing friendships for these users to show status
+    const userIds = matchingUsers.map(u => u.id);
+    const { data: existingFriends } = await supabase
+      .from('friends')
+      .select('user1_id, user2_id, status')
+      .or(`user1_id.eq.${user.id},user2_id.eq.${user.id}`);
+
+    const users = matchingUsers.map(u => {
+      const friendship = existingFriends?.find(f => 
+        (f.user1_id === user.id && f.user2_id === u.id) || 
+        (f.user1_id === u.id && f.user2_id === user.id)
+      );
+
+      return {
+        id: u.id,
+        email: u.email,
+        name: u.user_metadata?.full_name || u.email?.split('@')[0],
+        username: u.user_metadata?.username || u.email?.split('@')[0],
+        friendship_status: friendship?.status || null
+      };
+    });
+
+    return NextResponse.json({ 
+      success: true, 
+      users 
+    });
+
+  } catch (error) {
+    console.error('Unexpected error:', error);
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
diff --git a/apps/web/friendsprivacy.sql b/apps/web/friendsprivacy.sql
new file mode 100644
index 0000000..d3da747
--- /dev/null
+++ b/apps/web/friendsprivacy.sql
@@ -0,0 +1,46 @@
+-- Migration SQL Commands for Friends Feature
+-- Run these commands in your Supabase SQL Editor
+
+-- Create friends table
+CREATE TABLE IF NOT EXISTS friends (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  user1_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  user2_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
+  status VARCHAR(20) DEFAULT 'pending' CHECK (status IN ('pending', 'accepted', 'blocked')),
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  UNIQUE(user1_id, user2_id),
+  CHECK (user1_id < user2_id)
+);
+
+-- Create indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_friends_user1_id ON friends(user1_id);
+CREATE INDEX IF NOT EXISTS idx_friends_user2_id ON friends(user2_id);
+CREATE INDEX IF NOT EXISTS idx_friends_status ON friends(status);
+
+-- Enable RLS
+ALTER TABLE friends ENABLE ROW LEVEL SECURITY;
+
+-- Users can view friendships they are part of
+CREATE POLICY "Users can view their friendships" ON friends
+  FOR SELECT USING (
+    user1_id = auth.uid() OR user2_id = auth.uid()
+  );
+
+-- Users can send friend requests (as user1_id where user1_id is less than user2_id)
+CREATE POLICY "Users can send friend requests" ON friends
+  FOR INSERT WITH CHECK (user1_id = auth.uid());
+
+-- Users can accept friend requests (update where they are user2_id)
+CREATE POLICY "Users can accept friend requests" ON friends
+  FOR UPDATE USING (
+    (user1_id = auth.uid() OR user2_id = auth.uid())
+    AND status = 'pending'
+  );
+
+-- Users can delete friendships (cancel requests, unfriend)
+CREATE POLICY "Users can delete friendships" ON friends
+  FOR DELETE USING (
+    user1_id = auth.uid() OR user2_id = auth.uid()
+  );
+

From 33aeb2875acc75e1bb4b7d8834c2641faf968f68 Mon Sep 17 00:00:00 2001
From: Darius Robinson <drobin86@emich.edu>
Date: Tue, 28 Oct 2025 20:34:20 -0400
Subject: [PATCH 4/5] Add friends feature: search, send requests, inbox, and
 wireframe-style profile page

---
 apps/web/app/api/friends/requests/route.js    |  51 ++--
 apps/web/app/api/friends/route.js             | 113 ++++---
 apps/web/app/api/users/search/route.js        | 102 +++++--
 apps/web/app/groups/page.jsx                  |   4 +-
 apps/web/app/profile/page.jsx                 | 275 ++++++++++++++++++
 apps/web/check_users_table.sql                |  24 ++
 apps/web/components/AddFriendsModal.jsx       | 183 ++++++++++++
 apps/web/components/FriendRequestsModal.jsx   | 177 +++++++++++
 .../migrations/001_create_users_table.sql     |  76 +++++
 apps/web/verify_friends.sql                   |  38 +++
 10 files changed, 946 insertions(+), 97 deletions(-)
 create mode 100644 apps/web/app/profile/page.jsx
 create mode 100644 apps/web/check_users_table.sql
 create mode 100644 apps/web/components/AddFriendsModal.jsx
 create mode 100644 apps/web/components/FriendRequestsModal.jsx
 create mode 100644 apps/web/supabase/migrations/001_create_users_table.sql
 create mode 100644 apps/web/verify_friends.sql

diff --git a/apps/web/app/api/friends/requests/route.js b/apps/web/app/api/friends/requests/route.js
index d9e20c3..9e78467 100644
--- a/apps/web/app/api/friends/requests/route.js
+++ b/apps/web/app/api/friends/requests/route.js
@@ -16,9 +16,9 @@ export async function GET(request) {
 
     // Get pending friend requests (both sent and received)
     const { data: friendships, error: requestsError } = await supabase
-      .from('friends')
-      .select('id, user1_id, user2_id, status, created_at')
-      .or(`user1_id.eq.${user.id},user2_id.eq.${user.id}`)
+      .from('friendships')
+      .select('id, user_id, friend_id, status, created_at')
+      .or(`user_id.eq.${user.id},friend_id.eq.${user.id}`)
       .eq('status', 'pending');
 
     if (requestsError) {
@@ -30,30 +30,39 @@ export async function GET(request) {
     const sent = [];
     const received = [];
 
-    for (const friendship of friendships) {
-      const friendId = friendship.user1_id === user.id ? friendship.user2_id : friendship.user1_id;
+    // Get all unique friend IDs
+    const friendIds = [...new Set(friendships.map(f => f.user_id === user.id ? f.friend_id : f.user_id))];
+    
+    // Fetch user details from the public users table
+    for (const friendId of friendIds) {
+      const { data: friendUser } = await supabase
+        .from('users')
+        .select('id, username, display_name')
+        .eq('id', friendId)
+        .single();
       
-      try {
-        const { data: friendData, error: userError } = await supabase.auth.admin.getUserById(friendId);
-        if (!userError && friendData?.user) {
-          const friendUser = friendData.user;
+      if (friendUser) {
+        const friendship = friendships.find(f => 
+          (f.user_id === user.id && f.friend_id === friendId) || 
+          (f.user_id === friendId && f.friend_id === user.id)
+        );
+        
+        if (friendship) {
           const friendInfo = {
             id: friendUser.id,
-            email: friendUser.email,
-            name: friendUser.user_metadata?.full_name || friendUser.email?.split('@')[0],
-            username: friendUser.user_metadata?.username || friendUser.email?.split('@')[0],
+            email: '',
+            name: friendUser.display_name || friendUser.username,
+            username: friendUser.username,
             friendship_id: friendship.id,
             created_at: friendship.created_at
           };
 
-          if (friendship.user1_id === user.id) {
+          if (friendship.user_id === user.id) {
             sent.push(friendInfo);
           } else {
             received.push(friendInfo);
           }
         }
-      } catch (err) {
-        console.error(`Error fetching user ${friendId}:`, err);
       }
     }
 
@@ -93,8 +102,8 @@ export async function PATCH(request) {
 
     // Check if friendship exists and user is the recipient
     const { data: friendship, error: checkError } = await supabase
-      .from('friends')
-      .select('id, user1_id, user2_id, status')
+      .from('friendships')
+      .select('id, user_id, friend_id, status')
       .eq('id', friendshipId)
       .eq('status', 'pending')
       .single();
@@ -103,15 +112,15 @@ export async function PATCH(request) {
       return NextResponse.json({ error: 'Friend request not found or already processed' }, { status: 404 });
     }
 
-    // Verify user is the recipient (user2_id)
-    if (friendship.user2_id !== user.id) {
+    // Verify user is the recipient (friend_id)
+    if (friendship.friend_id !== user.id) {
       return NextResponse.json({ error: 'Unauthorized to perform this action' }, { status: 403 });
     }
 
     if (action === 'accept') {
       // Update status to accepted
       const { error: updateError } = await supabase
-        .from('friends')
+        .from('friendships')
         .update({ 
           status: 'accepted',
           updated_at: new Date().toISOString()
@@ -131,7 +140,7 @@ export async function PATCH(request) {
     } else if (action === 'reject') {
       // Delete the friendship record
       const { error: deleteError } = await supabase
-        .from('friends')
+        .from('friendships')
         .delete()
         .eq('id', friendshipId);
 
diff --git a/apps/web/app/api/friends/route.js b/apps/web/app/api/friends/route.js
index a17fe7d..44b5049 100644
--- a/apps/web/app/api/friends/route.js
+++ b/apps/web/app/api/friends/route.js
@@ -16,44 +16,46 @@ export async function GET(request) {
 
     // Get all accepted friends for the current user
     const { data: friendships, error: friendsError } = await supabase
-      .from('friends')
+      .from('friendships')
       .select(`
         id,
-        user1_id,
-        user2_id,
+        user_id,
+        friend_id,
         status,
         created_at
       `)
-      .or(`user1_id.eq.${user.id},user2_id.eq.${user.id}`)
+      .or(`user_id.eq.${user.id},friend_id.eq.${user.id}`)
       .eq('status', 'accepted');
 
     if (friendsError) {
       console.error('Error fetching friends:', friendsError);
       return NextResponse.json({ error: 'Failed to fetch friends' }, { status: 500 });
     }
+    
+    console.log('Friendships found:', friendships);
 
     // Get unique friend IDs
-    const friendIds = [...new Set(friendships.map(f => f.user1_id === user.id ? f.user2_id : f.user1_id))];
+    const friendIds = [...new Set(friendships.map(f => f.user_id === user.id ? f.friend_id : f.user_id))];
 
-    // Fetch user details for friends
+    // Fetch user details from the public users table
     const friends = [];
     for (const friendId of friendIds) {
-      try {
-        const { data: friendData, error: userError } = await supabase.auth.admin.getUserById(friendId);
-        if (!userError && friendData?.user) {
-          const friendUser = friendData.user;
-          const friendship = friendships.find(f => f.user1_id === friendId || f.user2_id === friendId);
-          friends.push({
-            id: friendUser.id,
-            email: friendUser.email,
-            name: friendUser.user_metadata?.full_name || friendUser.email?.split('@')[0],
-            username: friendUser.user_metadata?.username || friendUser.email?.split('@')[0],
-            friendship_id: friendship?.id,
-            created_at: friendship?.created_at
-          });
-        }
-      } catch (err) {
-        console.error(`Error fetching user ${friendId}:`, err);
+      const { data: friendUser } = await supabase
+        .from('users')
+        .select('id, username, display_name')
+        .eq('id', friendId)
+        .single();
+      
+      if (friendUser) {
+        const friendship = friendships.find(f => f.user_id === friendId || f.friend_id === friendId);
+        friends.push({
+          id: friendUser.id,
+          email: '',
+          name: friendUser.display_name || friendUser.username,
+          username: friendUser.username,
+          friendship_id: friendship?.id,
+          created_at: friendship?.created_at
+        });
       }
     }
 
@@ -82,6 +84,8 @@ export async function POST(request) {
     const body = await request.json();
     const { friendId } = body;
 
+    console.log('POST /api/friends - friendId:', friendId);
+
     if (!friendId) {
       return NextResponse.json({ error: 'Friend ID is required' }, { status: 400 });
     }
@@ -90,43 +94,46 @@ export async function POST(request) {
       return NextResponse.json({ error: 'You cannot send a friend request to yourself' }, { status: 400 });
     }
 
-    // Check if user exists
-    const { data: friendUser, error: userError } = await supabase.auth.admin.getUserById(friendId);
+    // Check if user exists in the public users table (don't need admin for this)
+    const { data: friendUser, error: userError } = await supabase
+      .from('users')
+      .select('id')
+      .eq('id', friendId)
+      .single();
+    
     if (userError || !friendUser) {
+      console.error('User not found in users table:', userError);
       return NextResponse.json({ error: 'User not found' }, { status: 404 });
     }
 
-    // Ensure user1_id < user2_id for consistency
-    const user1Id = user.id < friendId ? user.id : friendId;
-    const user2Id = user.id < friendId ? friendId : user.id;
-
-    // Check if friendship already exists
-    const { data: existingFriendship } = await supabase
-      .from('friends')
+    // Check if friendship already exists (in either direction)
+    const { data: existingFriendships } = await supabase
+      .from('friendships')
       .select('id, status')
-      .eq('user1_id', user1Id)
-      .eq('user2_id', user2Id)
-      .single();
+      .or(`user_id.eq.${user.id},friend_id.eq.${user.id}`);
+
+    // Filter to check if there's a friendship with the specific friend
+    const existingFriendship = existingFriendships?.find(f => 
+      (f.user_id === user.id && f.friend_id === friendId) || 
+      (f.user_id === friendId && f.friend_id === user.id)
+    );
 
     if (existingFriendship) {
       if (existingFriendship.status === 'accepted') {
         return NextResponse.json({ error: 'You are already friends' }, { status: 400 });
       } else if (existingFriendship.status === 'pending') {
-        return NextResponse.json({ error: 'Friend request already sent' }, { status: 400 });
+        return NextResponse.json({ error: 'Friend request already sent or pending' }, { status: 400 });
       }
     }
 
-    // Only the user with the smaller ID can send friend requests (to maintain order)
-    if (user1Id !== user.id) {
-      return NextResponse.json({ error: 'Friend request already exists from this user' }, { status: 400 });
-    }
-
-    // Create friend request
+    // Create friend request (user_id is sender, friend_id is receiver)
+    console.log('Creating friend request:', { user_id: user.id, friend_id: friendId });
+    
     const { data: friendship, error: friendshipError } = await supabase
-      .from('friends')
+      .from('friendships')
       .insert({
-        user1_id: user1Id,
-        user2_id: user2Id,
+        user_id: user.id,
+        friend_id: friendId,
         status: 'pending'
       })
       .select()
@@ -134,9 +141,25 @@ export async function POST(request) {
 
     if (friendshipError) {
       console.error('Error creating friend request:', friendshipError);
-      return NextResponse.json({ error: 'Failed to send friend request' }, { status: 500 });
+      return NextResponse.json({ error: 'Failed to send friend request', details: friendshipError }, { status: 500 });
     }
 
+    console.log('✅ Friend request created successfully in database:', {
+      id: friendship.id,
+      user_id: friendship.user_id,
+      friend_id: friendship.friend_id,
+      status: friendship.status
+    });
+
+    // Verify it was saved by querying it back
+    const { data: verify } = await supabase
+      .from('friendships')
+      .select('*')
+      .eq('id', friendship.id)
+      .single();
+    
+    console.log('🔍 Verified in database:', verify ? 'EXISTS' : 'NOT FOUND');
+
     return NextResponse.json({ 
       success: true, 
       message: 'Friend request sent',
diff --git a/apps/web/app/api/users/search/route.js b/apps/web/app/api/users/search/route.js
index 8e56e53..6a2024d 100644
--- a/apps/web/app/api/users/search/route.js
+++ b/apps/web/app/api/users/search/route.js
@@ -17,53 +17,97 @@ export async function GET(request) {
     const { searchParams } = new URL(request.url);
     const query = searchParams.get('q');
 
+    // If no query, return all users (for browsing)
     if (!query || query.trim().length === 0) {
-      return NextResponse.json({ error: 'Search query is required' }, { status: 400 });
+      const { data: allUsers, error: allUsersError } = await supabase
+        .from('users')
+        .select('id, username, display_name')
+        .neq('id', user.id)
+        .limit(50);
+      
+      if (allUsersError) {
+        console.error('Error fetching all users:', allUsersError);
+        return NextResponse.json({ error: 'Failed to fetch users' }, { status: 500 });
+      }
+      
+      if (!allUsers || allUsers.length === 0) {
+        return NextResponse.json({ 
+          success: true, 
+          users: [] 
+        });
+      }
+      
+      // Get existing friendships
+      const { data: existingFriends } = await supabase
+        .from('friendships')
+        .select('user_id, friend_id, status')
+        .or(`user_id.eq.${user.id},friend_id.eq.${user.id}`);
+      
+      const users = allUsers.map(u => {
+        const friendship = existingFriends?.find(f => 
+          (f.user_id === user.id && f.friend_id === u.id) || 
+          (f.user_id === u.id && f.friend_id === user.id)
+        );
+        
+        return {
+          id: u.id,
+          email: u.email || '',
+          name: u.display_name || u.username || 'User',
+          username: u.username || '',
+          friendship_status: friendship?.status || null
+        };
+      });
+      
+      return NextResponse.json({ 
+        success: true, 
+        users 
+      });
     }
 
-    // Search for users by email or username
-    // Note: This is a simplified search. For production, you'd want more sophisticated search
-    const { data: allUsers, error: listError } = await supabase.auth.admin.listUsers();
+    // Search the public users table
+    const searchQuery = query.toLowerCase();
+    
+    console.log('Searching for:', searchQuery);
     
-    if (listError) {
-      console.error('Error listing users:', listError);
+    const { data: matchingUsers, error: searchError } = await supabase
+      .from('users')
+      .select('id, username, display_name')
+      .or(`username.ilike.%${searchQuery}%,display_name.ilike.%${searchQuery}%`)
+      .neq('id', user.id)
+      .limit(20);
+    
+    if (searchError) {
+      console.error('Error searching users:', searchError);
       return NextResponse.json({ error: 'Failed to search users' }, { status: 500 });
     }
+    
+    console.log('Found users:', matchingUsers);
 
-    // Filter users based on query
-    const searchQuery = query.toLowerCase();
-    const matchingUsers = allUsers.users
-      .filter(u => {
-        if (u.id === user.id) return false; // Don't show current user
-        
-        const email = (u.email || '').toLowerCase();
-        const username = (u.user_metadata?.username || '').toLowerCase();
-        const fullName = (u.user_metadata?.full_name || '').toLowerCase();
-        
-        return email.includes(searchQuery) || 
-               username.includes(searchQuery) || 
-               fullName.includes(searchQuery);
-      })
-      .slice(0, 20); // Limit to 20 results
+    if (!matchingUsers || matchingUsers.length === 0) {
+      return NextResponse.json({ 
+        success: true, 
+        users: [] 
+      });
+    }
 
     // Get existing friendships for these users to show status
     const userIds = matchingUsers.map(u => u.id);
     const { data: existingFriends } = await supabase
-      .from('friends')
-      .select('user1_id, user2_id, status')
-      .or(`user1_id.eq.${user.id},user2_id.eq.${user.id}`);
+      .from('friendships')
+      .select('user_id, friend_id, status')
+      .or(`user_id.eq.${user.id},friend_id.eq.${user.id}`);
 
     const users = matchingUsers.map(u => {
       const friendship = existingFriends?.find(f => 
-        (f.user1_id === user.id && f.user2_id === u.id) || 
-        (f.user1_id === u.id && f.user2_id === user.id)
+        (f.user_id === user.id && f.friend_id === u.id) || 
+        (f.user_id === u.id && f.friend_id === user.id)
       );
 
       return {
         id: u.id,
-        email: u.email,
-        name: u.user_metadata?.full_name || u.email?.split('@')[0],
-        username: u.user_metadata?.username || u.email?.split('@')[0],
+        email: u.email || '',
+        name: u.display_name || u.username || 'User',
+        username: u.username || '',
         friendship_status: friendship?.status || null
       };
     });
diff --git a/apps/web/app/groups/page.jsx b/apps/web/app/groups/page.jsx
index 2fdf7fd..dba0c2d 100644
--- a/apps/web/app/groups/page.jsx
+++ b/apps/web/app/groups/page.jsx
@@ -1,9 +1,9 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import { supabaseBrowser } from '@/lib/supabase/client';
+import { Plus, Users } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { Users, Plus } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 export default function GroupsPage() {
   const supabase = supabaseBrowser();
diff --git a/apps/web/app/profile/page.jsx b/apps/web/app/profile/page.jsx
new file mode 100644
index 0000000..f5b7c5a
--- /dev/null
+++ b/apps/web/app/profile/page.jsx
@@ -0,0 +1,275 @@
+// app/profile/page.jsx
+'use client';
+
+import AddFriendsModal from '@/components/AddFriendsModal';
+import FriendRequestsModal from '@/components/FriendRequestsModal';
+import { supabaseBrowser } from '@/lib/supabase/client';
+import { Calendar, Heart, Mail, Music, Settings, UserPlus, Users } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+export default function ProfilePage() {
+  const supabase = supabaseBrowser();
+  const router = useRouter();
+  const [user, setUser] = useState(null);
+  const [friends, setFriends] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddFriendsModal, setShowAddFriendsModal] = useState(false);
+  const [showFriendRequestsModal, setShowFriendRequestsModal] = useState(false);
+  const [groupsCount, setGroupsCount] = useState(0);
+
+  useEffect(() => {
+    checkAuth();
+    fetchFriends();
+    fetchGroupsCount();
+  }, []);
+
+  async function checkAuth() {
+    const { data: { session }, error } = await supabase.auth.getSession();
+
+    if (error || !session) {
+      router.push('/sign-in');
+      return;
+    }
+
+    setUser(session.user);
+    setLoading(false);
+  }
+
+  const fetchFriends = async () => {
+    try {
+      const response = await fetch('/api/friends');
+      const data = await response.json();
+      
+      if (data.success) {
+        setFriends(data.friends || []);
+      }
+    } catch (error) {
+      console.error('Error fetching friends:', error);
+    }
+  };
+
+  const fetchGroupsCount = async () => {
+    try {
+      const response = await fetch('/api/groups');
+      const data = await response.json();
+      if (data.success) {
+        setGroupsCount(data.groups?.length || 0);
+      }
+    } catch (error) {
+      console.error('Error fetching groups:', error);
+    }
+  };
+
+  async function signOut() {
+    await supabase.auth.signOut();
+    router.push('/sign-in');
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-black text-white">
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (!user) return null;
+
+  // Get user joined date
+  const joinedDate = new Date(user.created_at).toLocaleDateString();
+
+  return (
+    <div className="min-h-screen bg-black text-white p-6 pb-20">
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* Profile Header Card */}
+        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
+          <div className="flex flex-col md:flex-row items-center md:items-start space-y-4 md:space-y-0 md:space-x-6">
+            {/* Avatar */}
+            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-3xl font-bold">
+              {user.email?.charAt(0).toUpperCase() || 'U'}
+            </div>
+            
+            {/* User Info */}
+            <div className="flex-1 text-center md:text-left space-y-4">
+              <div>
+                <h2 className="text-2xl font-semibold">
+                  {user.user_metadata?.full_name || user.email?.split('@')[0]}
+                </h2>
+                <p className="text-gray-400">{user.email}</p>
+                <div className="flex items-center justify-center md:justify-start space-x-2 mt-2">
+                  <Calendar className="h-4 w-4 text-gray-400" />
+                  <span className="text-sm text-gray-400">
+                    Joined {joinedDate}
+                  </span>
+                </div>
+              </div>
+              
+              {/* Stats */}
+              <div className="grid grid-cols-3 gap-4">
+                <div className="text-center">
+                  <div className="flex items-center justify-center space-x-1">
+                    <Music className="h-4 w-4 text-purple-400" />
+                    <span className="font-medium">0</span>
+                  </div>
+                  <p className="text-sm text-gray-400">Song Today</p>
+                </div>
+                <div className="text-center">
+                  <div className="flex items-center justify-center space-x-1">
+                    <Users className="h-4 w-4 text-blue-400" />
+                    <span className="font-medium">{groupsCount}</span>
+                  </div>
+                  <p className="text-sm text-gray-400">Groups</p>
+                </div>
+                <div className="text-center">
+                  <div className="flex items-center justify-center space-x-1">
+                    <Heart className="h-4 w-4 text-pink-400" />
+                    <span className="font-medium">{friends.length}</span>
+                  </div>
+                  <p className="text-sm text-gray-400">Friends</p>
+                </div>
+              </div>
+            </div>
+            
+            {/* Action Buttons */}
+            <div className="flex space-x-2">
+              <button
+                onClick={() => setShowFriendRequestsModal(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-purple-400/20 hover:bg-purple-400/30 border border-purple-400/30 rounded-lg transition-colors"
+              >
+                <Mail className="h-4 w-4" />
+                Requests
+              </button>
+              <button
+                onClick={() => setShowAddFriendsModal(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-400/20 hover:bg-blue-400/30 border border-blue-400/30 rounded-lg transition-colors"
+              >
+                <UserPlus className="h-4 w-4" />
+                Add Friend
+              </button>
+              <Link 
+                href="/settings"
+                className="flex items-center gap-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition-colors"
+              >
+                <Settings className="h-4 w-4" />
+                Settings
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* Song of the Day Section */}
+        <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold flex items-center space-x-2">
+              <Music className="h-5 w-5" />
+              <span>Song of the Day</span>
+            </h3>
+          </div>
+          <div className="text-center py-8">
+            <Music className="h-12 w-12 text-gray-600 mx-auto mb-4" />
+            <h3 className="font-medium mb-2">No song of the day yet</h3>
+            <p className="text-gray-400 mb-4">Share your current favorite song with friends</p>
+            <button className="px-4 py-2 bg-purple-400 hover:bg-purple-500 rounded-lg transition-colors">
+              Set Song of the Day
+            </button>
+          </div>
+        </div>
+
+        {/* Quick Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Recent Activity */}
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
+            <h3 className="text-lg font-semibold flex items-center space-x-2 mb-4">
+              <Users className="h-5 w-5" />
+              <span>Recent Activity</span>
+            </h3>
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-400">Groups joined this week</span>
+                <span className="px-2 py-1 bg-purple-400/20 text-purple-400 rounded text-sm">0</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-400">Songs shared this month</span>
+                <span className="px-2 py-1 bg-purple-400/20 text-purple-400 rounded text-sm">0</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-400">Playlists collaborated on</span>
+                <span className="px-2 py-1 bg-purple-400/20 text-purple-400 rounded text-sm">0</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Friends Section */}
+          <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold flex items-center space-x-2">
+                <Heart className="h-5 w-5" />
+                <span>Friends ({friends.length})</span>
+              </h3>
+            </div>
+            
+            {friends.length === 0 ? (
+              <div className="text-center py-8">
+                <Users className="h-12 w-12 text-gray-600 mx-auto mb-4" />
+                <p className="text-gray-400 mb-4">No friends yet</p>
+                <button
+                  onClick={() => setShowAddFriendsModal(true)}
+                  className="px-4 py-2 bg-blue-400 hover:bg-blue-500 rounded-lg transition-colors"
+                >
+                  Add Friends
+                </button>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {friends.slice(0, 5).map((friend) => (
+                  <div
+                    key={friend.id}
+                    className="flex items-center space-x-3 p-3 bg-white/5 rounded-lg border border-white/10"
+                  >
+                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white font-semibold">
+                      {friend.name?.charAt(0).toUpperCase() || 'F'}
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium">{friend.name}</p>
+                      <p className="text-sm text-gray-400">@{friend.username}</p>
+                    </div>
+                  </div>
+                ))}
+                {friends.length > 5 && (
+                  <p className="text-sm text-gray-400 text-center pt-2">
+                    +{friends.length - 5} more friends
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom spacing */}
+        <div className="h-16"></div>
+      </div>
+
+      {/* Add Friends Modal */}
+      {showAddFriendsModal && (
+        <AddFriendsModal
+          onClose={() => {
+            setShowAddFriendsModal(false);
+            fetchFriends(); // Refresh friends list after closing modal
+          }}
+        />
+      )}
+
+      {/* Friend Requests Modal */}
+      {showFriendRequestsModal && (
+        <FriendRequestsModal
+          onClose={() => {
+            setShowFriendRequestsModal(false);
+            fetchFriends(); // Refresh friends list after closing modal
+          }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/check_users_table.sql b/apps/web/check_users_table.sql
new file mode 100644
index 0000000..b61d073
--- /dev/null
+++ b/apps/web/check_users_table.sql
@@ -0,0 +1,24 @@
+-- Run this in your Supabase SQL Editor to check if the users table has data
+
+-- Check if users table exists
+SELECT EXISTS (
+  SELECT FROM information_schema.tables 
+  WHERE table_schema = 'public' 
+  AND table_name = 'users'
+) AS users_table_exists;
+
+-- Count users in public.users
+SELECT COUNT(*) as user_count FROM users;
+
+-- Show all users
+SELECT id, username, display_name, created_at FROM users LIMIT 10;
+
+-- Check auth.users (should have your actual users)
+SELECT id, email, created_at FROM auth.users LIMIT 10;
+
+-- Compare: which auth.users don't have a profile yet?
+SELECT au.id, au.email, au.created_at
+FROM auth.users au
+LEFT JOIN users u ON au.id = u.id
+WHERE u.id IS NULL;
+
diff --git a/apps/web/components/AddFriendsModal.jsx b/apps/web/components/AddFriendsModal.jsx
new file mode 100644
index 0000000..cdf4773
--- /dev/null
+++ b/apps/web/components/AddFriendsModal.jsx
@@ -0,0 +1,183 @@
+// components/AddFriendsModal.jsx
+'use client';
+
+import { Plus, Search, UserPlus, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function AddFriendsModal({ onClose }) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [error, setError] = useState('');
+  const [view, setView] = useState('search'); // 'search', 'browse', 'invite'
+
+  const handleSearch = async (e) => {
+    e.preventDefault();
+    if (!searchQuery.trim()) return;
+
+    setSearching(true);
+    setError('');
+    
+    try {
+      const response = await fetch(`/api/users/search?q=${encodeURIComponent(searchQuery)}`);
+      const data = await response.json();
+      
+      if (data.success) {
+        setUsers(data.users || []);
+      } else {
+        setError(data.error || 'Failed to search users');
+      }
+    } catch (error) {
+      setError('Network error. Please try again.');
+    } finally {
+      setSearching(false);
+    }
+  };
+
+  const handleBrowseAll = async () => {
+    setLoading(true);
+    setError('');
+    
+    try {
+      const response = await fetch('/api/users/search?q=');
+      const data = await response.json();
+      
+      if (data.success) {
+        setUsers(data.users || []);
+      }
+    } catch (error) {
+      setError('Failed to load users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSendRequest = async (userId) => {
+    try {
+      const response = await fetch('/api/friends', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ friendId: userId }),
+      });
+
+      const data = await response.json();
+
+      if (data.success) {
+        // Update the user status in the list
+        setUsers(prev => prev.map(u => 
+          u.id === userId ? { ...u, friendship_status: 'pending' } : u
+        ));
+      } else {
+        alert(data.error || 'Failed to send friend request');
+      }
+    } catch (error) {
+      alert('Network error. Please try again.');
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="vybe-aurora bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-400/20 rounded-lg">
+              <UserPlus className="h-5 w-5 text-blue-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-white">Add Friends</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-white/10 rounded transition-colors"
+          >
+            <X className="h-5 w-5 text-muted-foreground" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSearch} className="mb-6">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-blue-400/50 focus:border-blue-400/50"
+              placeholder="Search by username..."
+              disabled={searching}
+            />
+            <button
+              type="submit"
+              disabled={searching || !searchQuery.trim()}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-1 bg-blue-400 hover:bg-blue-500 disabled:bg-blue-400/50 disabled:cursor-not-allowed text-white rounded text-sm transition-colors"
+            >
+              {searching ? 'Searching...' : 'Search'}
+            </button>
+          </div>
+        </form>
+
+        <button
+          onClick={handleBrowseAll}
+          disabled={loading}
+          className="w-full mb-4 px-4 py-2 bg-white/10 hover:bg-white/20 border border-white/20 rounded-lg text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {loading ? 'Loading all users...' : 'Browse All Users'}
+        </button>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg">
+            <p className="text-sm text-red-400">{error}</p>
+          </div>
+        )}
+
+        <div className="space-y-2">
+          {users.length > 0 && (
+            <>
+              <p className="text-sm text-muted-foreground mb-2">
+                Found {users.length} result{users.length !== 1 ? 's' : ''}
+              </p>
+              {users.map((user) => (
+                <div
+                  key={user.id}
+                  className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"
+                >
+                  <div>
+                    <p className="text-white font-medium">{user.name}</p>
+                    <p className="text-sm text-muted-foreground">{user.email}</p>
+                  </div>
+                  {user.friendship_status === null && (
+                    <button
+                      onClick={() => handleSendRequest(user.id)}
+                      className="flex items-center gap-2 px-3 py-1.5 bg-blue-400 hover:bg-blue-500 text-white rounded-lg text-sm transition-colors"
+                    >
+                      <Plus className="h-4 w-4" />
+                      Add
+                    </button>
+                  )}
+                  {user.friendship_status === 'pending' && (
+                    <span className="px-3 py-1.5 bg-yellow-400/20 text-yellow-400 rounded-lg text-sm">
+                      Pending
+                    </span>
+                  )}
+                  {user.friendship_status === 'accepted' && (
+                    <span className="px-3 py-1.5 bg-green-400/20 text-green-400 rounded-lg text-sm">
+                      Friends
+                    </span>
+                  )}
+                </div>
+              ))}
+            </>
+          )}
+          {users.length === 0 && searchQuery && !searching && (
+            <div className="text-center py-12">
+              <UserPlus className="h-16 w-16 text-muted-foreground mx-auto mb-4" />
+              <p className="text-muted-foreground">No users found</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/apps/web/components/FriendRequestsModal.jsx b/apps/web/components/FriendRequestsModal.jsx
new file mode 100644
index 0000000..a02af40
--- /dev/null
+++ b/apps/web/components/FriendRequestsModal.jsx
@@ -0,0 +1,177 @@
+// components/FriendRequestsModal.jsx
+'use client';
+
+import { Check, Mail, UserPlus, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export default function FriendRequestsModal({ onClose }) {
+  const [sent, setSent] = useState([]);
+  const [received, setReceived] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetchRequests();
+  }, []);
+
+  const fetchRequests = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch('/api/friends/requests');
+      const data = await response.json();
+      
+      if (data.success) {
+        setSent(data.sent || []);
+        setReceived(data.received || []);
+      }
+    } catch (error) {
+      console.error('Error fetching requests:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAccept = async (friendshipId) => {
+    try {
+      const response = await fetch('/api/friends/requests', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          friendshipId, 
+          action: 'accept' 
+        }),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        fetchRequests(); // Refresh
+      } else {
+        alert(data.error || 'Failed to accept request');
+      }
+    } catch (error) {
+      alert('Network error');
+    }
+  };
+
+  const handleReject = async (friendshipId) => {
+    try {
+      const response = await fetch('/api/friends/requests', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          friendshipId, 
+          action: 'reject' 
+        }),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        fetchRequests(); // Refresh
+      } else {
+        alert(data.error || 'Failed to reject request');
+      }
+    } catch (error) {
+      alert('Network error');
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="vybe-aurora bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-purple-400/20 rounded-lg">
+              <Mail className="h-5 w-5 text-purple-400" />
+            </div>
+            <h2 className="text-xl font-semibold text-white">Friend Requests</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-white/10 rounded transition-colors"
+          >
+            <X className="h-5 w-5 text-muted-foreground" />
+          </button>
+        </div>
+
+        {loading ? (
+          <div className="text-center py-12">
+            <p className="text-muted-foreground">Loading...</p>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {/* Received Requests */}
+            <div>
+              <h3 className="text-lg font-medium text-white mb-3 flex items-center gap-2">
+                <Mail className="h-4 w-4" />
+                Received ({received.length})
+              </h3>
+              {received.length > 0 ? (
+                <div className="space-y-2">
+                  {received.map((request) => (
+                    <div
+                      key={request.friendship_id}
+                      className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"
+                    >
+                      <div>
+                        <p className="text-white font-medium">{request.name}</p>
+                        <p className="text-sm text-muted-foreground">@{request.username}</p>
+                      </div>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => handleAccept(request.friendship_id)}
+                          className="p-2 bg-green-400/20 hover:bg-green-400/30 rounded-lg transition-colors"
+                          title="Accept"
+                        >
+                          <Check className="h-4 w-4 text-green-400" />
+                        </button>
+                        <button
+                          onClick={() => handleReject(request.friendship_id)}
+                          className="p-2 bg-red-400/20 hover:bg-red-400/30 rounded-lg transition-colors"
+                          title="Reject"
+                        >
+                          <X className="h-4 w-4 text-red-400" />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">No pending requests</p>
+              )}
+            </div>
+
+            {/* Sent Requests */}
+            <div>
+              <h3 className="text-lg font-medium text-white mb-3 flex items-center gap-2">
+                <UserPlus className="h-4 w-4" />
+                Sent ({sent.length})
+              </h3>
+              {sent.length > 0 ? (
+                <div className="space-y-2">
+                  {sent.map((request) => (
+                    <div
+                      key={request.friendship_id}
+                      className="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10"
+                    >
+                      <div>
+                        <p className="text-white font-medium">{request.name}</p>
+                        <p className="text-sm text-muted-foreground">@{request.username}</p>
+                      </div>
+                      <span className="px-3 py-1 bg-yellow-400/20 text-yellow-400 rounded-lg text-sm">
+                        Pending
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">No sent requests</p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/apps/web/supabase/migrations/001_create_users_table.sql b/apps/web/supabase/migrations/001_create_users_table.sql
new file mode 100644
index 0000000..0a52db2
--- /dev/null
+++ b/apps/web/supabase/migrations/001_create_users_table.sql
@@ -0,0 +1,76 @@
+-- Create users table for public profiles
+CREATE TABLE IF NOT EXISTS users (
+  id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
+  username VARCHAR(255) UNIQUE NOT NULL,
+  display_name VARCHAR(255) NOT NULL,
+  profile_picture_url TEXT,
+  bio TEXT,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create index on username for faster searches
+CREATE INDEX IF NOT EXISTS idx_users_username ON users(username);
+
+-- Enable Row Level Security
+ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+
+-- Users can view all profiles (for searching/finding friends)
+DROP POLICY IF EXISTS "Users can view all profiles" ON users;
+CREATE POLICY "Users can view all profiles" ON users
+  FOR SELECT USING (true);
+
+-- Users can only update their own profile
+DROP POLICY IF EXISTS "Users can update their own profile" ON users;
+CREATE POLICY "Users can update their own profile" ON users
+  FOR UPDATE USING (auth.uid() = id);
+
+-- Users can insert their own profile
+DROP POLICY IF EXISTS "Users can insert their own profile" ON users;
+CREATE POLICY "Users can insert their own profile" ON users
+  FOR INSERT WITH CHECK (auth.uid() = id);
+
+-- Function to automatically create a user profile when someone signs up
+CREATE OR REPLACE FUNCTION create_user_profile()
+RETURNS TRIGGER AS $$
+BEGIN
+  INSERT INTO public.users (id, username, display_name)
+  VALUES (
+    NEW.id,
+    COALESCE(NEW.raw_user_meta_data->>'username', split_part(NEW.email, '@', 1)),
+    COALESCE(NEW.raw_user_meta_data->>'display_name', split_part(NEW.email, '@', 1))
+  );
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+-- Trigger to create user profile on signup
+DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;
+CREATE TRIGGER on_auth_user_created
+  AFTER INSERT ON auth.users
+  FOR EACH ROW
+  EXECUTE FUNCTION create_user_profile();
+
+-- Function to automatically update updated_at timestamp
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = NOW();
+  RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Trigger to update updated_at on users
+DROP TRIGGER IF EXISTS update_users_updated_at ON users;
+CREATE TRIGGER update_users_updated_at BEFORE UPDATE ON users
+  FOR EACH ROW EXECUTE FUNCTION update_updated_at_column();
+
+-- Backfill existing users from auth.users
+INSERT INTO public.users (id, username, display_name)
+SELECT 
+  id,
+  COALESCE(raw_user_meta_data->>'username', split_part(email, '@', 1)),
+  COALESCE(raw_user_meta_data->>'display_name', split_part(email, '@', 1))
+FROM auth.users
+WHERE id NOT IN (SELECT id FROM public.users);
+
diff --git a/apps/web/verify_friends.sql b/apps/web/verify_friends.sql
new file mode 100644
index 0000000..aa7ad1f
--- /dev/null
+++ b/apps/web/verify_friends.sql
@@ -0,0 +1,38 @@
+-- Run this in your Supabase SQL Editor to verify friend requests are in the database
+
+-- View all friendships
+SELECT 
+  id,
+  user_id,
+  friend_id,
+  status,
+  created_at,
+  updated_at
+FROM friendships
+ORDER BY created_at DESC;
+
+-- Count by status
+SELECT 
+  status,
+  COUNT(*) as count
+FROM friendships
+GROUP BY status;
+
+-- View friendships with user info (if you have auth access)
+SELECT 
+  f.id,
+  f.status,
+  f.created_at,
+  u1.username as sender_username,
+  u2.username as receiver_username
+FROM friendships f
+LEFT JOIN users u1 ON f.user_id = u1.id
+LEFT JOIN users u2 ON f.friend_id = u2.id
+ORDER BY f.created_at DESC;
+
+-- Check if a specific user has sent any requests
+-- Replace 'YOUR_USER_ID' with your actual user ID
+SELECT * FROM friendships 
+WHERE user_id = 'YOUR_USER_ID' 
+OR friend_id = 'YOUR_USER_ID';
+

From 6b97474ccc2342cb792fea4eb759b24ecf7c6b47 Mon Sep 17 00:00:00 2001
From: Vasanth Anbukumar <182255621+vas2000-emu@users.noreply.github.com>
Date: Mon, 3 Nov 2025 13:38:16 -0500
Subject: [PATCH 5/5] Potential fix for code scanning alert no. 54: Server-side
 request forgery

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 apps/web/app/api/import-playlist/route.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/api/import-playlist/route.js b/apps/web/app/api/import-playlist/route.js
index 86b5d4d..0fd7fe4 100644
--- a/apps/web/app/api/import-playlist/route.js
+++ b/apps/web/app/api/import-playlist/route.js
@@ -240,7 +240,7 @@ async function importYouTubePlaylist(supabase, playlistUrl, userId) {
 async function importSpotifyPlaylist(supabase, playlistUrl, userId) {
   // Extract playlist ID from URL
   const playlistId = extractSpotifyPlaylistId(playlistUrl);
-  if (!playlistId) {
+  if (!playlistId || !isValidSpotifyPlaylistId(playlistId)) {
     throw new Error('Invalid Spotify playlist URL');
   }
 
@@ -320,6 +320,11 @@ function extractSpotifyPlaylistId(url) {
   return match ? match[1] : null;
 }
 
+function isValidSpotifyPlaylistId(playlistId) {
+  // Spotify playlist IDs are 22 character base62 strings (alphanumeric, upper/lowercase)
+  return typeof playlistId === 'string' && /^[a-zA-Z0-9]{22}$/.test(playlistId);
+}
+
 function parseYouTubeDuration(duration) {
   // Parse ISO 8601 duration format (PT1H2M3S)
   const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);