HypeShelf 🍿

The Ultimate Movie Crew's Top Picks — Your Personal Shelf for Media Discovery.

Live Demo » · Report Bug · Request Feature

---

✨ Overview

HypeShelf is a premium, community-driven platform designed for movie buffs and media enthusiasts to curate and share their favorite discoveries. Using a modern, mobile-first Bento Grid layout, it transforms simple lists into a visually stunning exploration of taste.

🌟 Key Features

• 📱 Adaptive Bento Grid: A dynamic, responsive layout that treats every recommendation with visual hierarchy.
• ✨ Social-First Identity: Deep Clerk integration for profile photo management and personal contributor cards.
• 🖼️ Magic OG Previews: Automatic link metadata scraping to generate rich, beautiful visual previews for any URL.
• 🔥 Hype Interaction: Real-time engagement features to support and discover trending community picks.
• ⏳ Infinite Discovery: Blazing fast infinite scroll for a seamless "app-like" experience on mobile.
• 🌑 Glassmorphism UI: A high-end dark-mode first design with subtle animations and premium typography.

---

🛠️ Tech Stack

• Framework: Next.js 14+ (App Router)
• Backend: Convex (Real-time DB & Cloud Functions)
• Auth: Clerk (User Management & Social Identity)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React

---

🚀 Getting Started

1. Prerequisites

Ensure you have the following accounts:

• Clerk Dashboard (For Auth)
• Convex Account (For Backend)

2. Installation

# Clone the repository
git clone https://github.com/FenrirDWolf/HypeShelf.git

# Enter the directory
cd HypeShelf

# Install dependencies
npm install

3. Environment Setup

Create a .env.local file in the root directory and add your keys:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
CLERK_JWT_ISSUER_DOMAIN=https://...clerk.accounts.dev

# Deployment URL provided after running npx convex dev
NEXT_PUBLIC_CONVEX_URL=https://...convex.cloud

4. Running Locally

# Start the Convex development backend
npx convex dev

# In a new terminal, start the Next.js dev server
npm run dev

Open http://localhost:3000 to see your local HypeShelf.

---

🎨 Branding & Identity

HypeShelf follows a SaaS-grade aesthetic guideline:

• Hue: Tailored HSL color scales for depth.
• Gradients: Subtle background blurs and border-beam effects.
• Layout: Native lazy-loading and skeleton screens for a zero-jank experience.

---

📜 License

Distributed under the MIT License. See LICENSE.md for more information.

(back to top)