A Sorare-inspired platform for football jersey collectors to showcase, trade, and connect around their passion for classic and rare football kits.
URL: https://lovable.dev/projects/a7723404-d14a-45f4-82e1-f14aded58ba7
There are several ways of editing your application.
Use Lovable
Simply visit the Lovable Project and start prompting.
Changes made via Lovable will be committed automatically to this repo.
Use your preferred IDE
If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
The only requirement is having Node.js & npm installed - install with nvm
Follow these steps:
# Step 1: Clone the repository using the project's Git URL.
git clone <YOUR_GIT_URL>
# Step 2: Navigate to the project directory.
cd <YOUR_PROJECT_NAME>
# Step 3: Install the necessary dependencies.
npm i
# Step 4: Start the development server with auto-reloading and an instant preview.
npm run devEdit a file directly in GitHub
- Navigate to the desired file(s).
- Click the "Edit" button (pencil icon) at the top right of the file view.
- Make your changes and commit the changes.
Use GitHub Codespaces
- Navigate to the main page of your repository.
- Click on the "Code" button (green button) near the top right.
- Select the "Codespaces" tab.
- Click on "New codespace" to launch a new Codespace environment.
- Edit files directly within the Codespace and commit and push your changes once you're done.
This project is built with:
- Frontend: Next.js 15, React 19, TypeScript, shadcn-ui, Tailwind CSS
- Backend: Next.js API Routes (in
apps/web/app/api/v1/) - Database: PostgreSQL with Row Level Security (RLS) via Supabase
- Real-time: Supabase Realtime for live auctions and messaging
- Authentication: Clerk (with Supabase integration)
- Storage: Supabase Storage for jersey images
- Monorepo: npm workspaces (
apps/*,packages/*)
Note: Legacy Vite frontend has been migrated to Next.js (completed 2025-11-27). See .project/08-Migration_Plan.md for details.
Implemented comprehensive search analytics to track user behavior and surface trending content:
- Database: Created
search_analyticstable with RLS policies - Tracking: Automatic logging of all search queries with user attribution
- Trending Searches: Command bar displays popular searches from the last 7 days when empty
- Insights: Query aggregation and counting for trend analysis
Files Modified:
supabase/migrations/- Search analytics schemasrc/components/CommandBar.tsx- Trending search display and query logging
Transformed the home dashboard from a basic layout into a premium, high-energy sports platform with modular sections and dynamic content.
Purpose: Featured jersey showcase with premium visual treatment
Features:
- Full-width hero card with stadium-inspired blurred textures
- Ambient neon gradient backgrounds (cyan/blue/green)
- Large centered jersey image with dramatic lighting
- Side info panel displaying price, condition, and rarity
- Neon-accented primary CTAs
- Smooth fade-in animations
Component: src/components/home/HeroSpotlight.tsx
Purpose: User's personal stats at a glance
Design Evolution:
- Changed from individual boxes to one connected horizontal strip
- Glowing separators between metric sections
- Hover effects with scale and neon highlights
Metrics Displayed:
- Wardrobe: Total jerseys collected
- For Sale: Active listings count
- Auctions: Live auction count
- Followers: Weekly follower count
Data Source: Real-time queries to jerseys, sale_listings, auctions, and follows tables
Component: src/components/home/ActivitySnapshot.tsx
Purpose: High-contrast action cards for core user flows
Actions:
- Upload Jersey: Launch jersey upload modal
- List for Sale: Create new sale listing
- Start Auction: Begin a new auction
- Find Nearby: Discover local collectors (with geolocation hint)
Visual Design:
- Large 2×2 card grid
- High-contrast neon gradients
- Strong iconography (Lucide icons)
- Animated hover states with glow effects
- Minimal text, maximum visual impact
Component: src/components/home/QuickActions.tsx
Purpose: Personalized marketplace recommendations
Sub-sections:
- Trending Now: Hot items based on views and saves
- Ending Soon: Auctions closing within 24 hours
Features:
- Horizontal scroll carousels
- Large jersey cards with
JerseyCardcomponent - Real-time data from
sale_listingsandauctionstables - "View all" CTAs to full marketplace
Component: src/components/home/MarketplaceForYou.tsx
Purpose: Social engagement preview
Features:
- Latest 6 posts from community feed
- User avatars and names
- Jersey images (when attached to posts)
- Like counters
- "Open Community Feed" CTA
- Animated grid layout
Data Source: posts table with joined profiles and jerseys data
Component: src/components/home/CommunityPreview.tsx
Purpose: Real-time engagement and dynamic data hub
Sections:
-
Watchlist (Saved Jerseys)
- User's saved items
- Price drops highlighted
- "Ending soon" indicators for auctions
- Quick navigation to jersey details
-
Live Auctions
- Real-time countdown timers
- Current highest bid display
- Auction status badges
- Quick bid access
-
Community Activity
- Recent follows
- New jersey uploads
- Auction wins
- Social pulse indicators
-
Marketplace Metrics
- Trending clubs
- Most viewed jerseys
- Recent price drops
- Market insights
-
Huddle News
- Jersey culture content
- Platform updates
- Classic kit spotlights
- Community highlights
Visibility:
- Hidden on mobile (< 1024px)
- Fixed sidebar on desktop
- Scrollable content area
Component: src/components/home/RightSidebar.tsx
Updated design tokens and utility classes for premium sports aesthetic:
- Base: Deep charcoal (
#0D0D0D) for dark backgrounds - Neon Accents: Electric blue, cyan, green (used sparingly)
- Gradients:
--gradient-neon: Primary brand gradient--gradient-hero: Epic hero section background--gradient-primary: Subtle primary transitions--gradient-subtle: Ambient background layers
--shadow-elevated: Premium card elevation--shadow-neon: Glowing neon effect for highlights--shadow-glow: Soft ambient glow
.stadium-texture: Blurred ambient backgrounds.neon-border: Animated glowing borders- Enhanced hover states and micro-interactions
File: src/index.css
- Search button (opens CommandBar with Cmd+K)
- Notifications bell with pulse indicator
- User avatar with profile navigation
- Glassmorphism backdrop blur effect
- Mobile-first with bottom navigation
- Desktop: full layout with right sidebar
- Tablet: adaptive grid layouts
File: src/pages/Home.tsx
The Huddle dashboard follows Sorare's proven approach:
✅ Modular Structure: Clear section hierarchy
✅ High Contrast: Dark backgrounds, neon highlights
✅ Dynamic Data: Real-time updates and live content
✅ Emotional Design: Premium sports atmosphere
✅ Progressive Disclosure: From personal context → discovery → community
CREATE TABLE search_analytics (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
query TEXT NOT NULL,
user_id UUID REFERENCES auth.users,
created_at TIMESTAMPTZ DEFAULT now()
);Indexes:
queryfor aggregationcreated_atfor time-based queriesuser_idfor user behavior analysis
- Lazy loading for sidebar sections
- Debounced search query logging
- Efficient PostgreSQL queries with proper indexing
- React memoization for expensive computations
- Skeleton loaders for async data fetching
Based on today's foundation, potential next steps:
- Live Scores Section: Real-time match scores for clubs in user's wardrobe
- Advanced Personalization: ML-based recommendations
- Enhanced Animations: Parallax effects, transition choreography
- News Section: Curated jersey culture content
- Geolocation Features: Nearby collectors and local pickup options
Simply open Lovable and click on Share -> Publish.
Yes, you can!
To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
Read more here: Setting up a custom domain