Introduction

This website is built with Next.js, TailwindCSS, Supabase, and Framer Motion. It aims to deliver a modern, aesthetic UI/UX experience with smooth animations, Discord API integration, and advanced customization features.

Setup & Installation

1. Install Node.js and npm/yarn. 2. Run `npx create-next-app@latest`. 3. Install dependencies: `npm install tailwindcss framer-motion @supabase/supabase-js`. 4. Configure TailwindCSS: `npx tailwindcss init -p`. 5. Set up Supabase project and get your API keys.

Authentication

We're using Supabase OAuth for Discord authentication: 1. Create an OAuth app on Discord Developer Portal. 2. Add the client ID and secret to your Supabase dashboard. 3. Use Supabase's built-in auth functions for login and sign-out. 4. Store user data (e.g., bio, profile picture, and YouTube URL) directly in the `users` table.

UI/UX Design

- TailwindCSS for rapid styling. - Framer Motion for smooth animations and hover effects. - React Icons for modern iconography. - Custom sidebar and modern design inspired by guns.lol.

API Integration

- Fetch Discord live game status via Discord's API. - Supabase REST API for user data. - YouTube API for background video support. - Real-time updates with Supabase's `onSnapshot` feature.

Database Structure

- Supabase Database Schema: - Users Table: Store user ID, bio, profile picture, theme, and YouTube URL. - Links Table: Social media links for each user. - OAuth Table: Store Discord tokens for authentication.

Deployment

1. Connect your GitHub repo to Vercel. 2. Add environment variables (Supabase API URL and anon key). 3. Deploy with one click. 4. Automatic CI/CD for future updates.