Dune: Awakening Drops Tracker 🏜️

A beautiful, modern web application specifically designed for tracking Dune: Awakening streamers and discovering exclusive Twitch drops campaigns on Arrakis. The spice must flow, and so must the rewards!

✨ Features

🎯 Dune: Awakening Streamer Tracking

• Real-time monitoring of streamers playing Dune: Awakening
• Game-specific filtering - only shows streamers currently playing on Arrakis
• Dynamic grid layout with beautiful cards showing stream thumbnails, viewer counts, and stream titles
• Auto-refresh every 30 seconds to keep desert intelligence current
• Loading states with elegant skeleton placeholders

📋 Dune: Awakening Drops Management

• Interactive accordion interface for browsing Dune-themed drop campaigns
• Lore-rich campaigns featuring House Atreides, Fremen secrets, spice harvesting, and sandworm encounters
• Detailed campaign information including requirements, dates, and exclusive rewards
• Full-screen image viewer for drop screenshots and desert-themed rewards
• Smart sorting by campaign status (active campaigns shown first)

🎨 Beautiful Design

• Desert-themed aesthetic with orange/amber gradients inspired by Arrakis
• Glassmorphism effects with backdrop blur and transparency
• Smooth animations and hover effects throughout the interface
• Fully responsive design that works perfectly on all devices
• Dark theme optimized for the harsh desert environment

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• A Twitch Developer account (for live data)

Installation

1. Clone the repository

   git clone https://github.com/your-username/drops.planetologist.app.git
   cd drops.planetologist.app

2. Install dependencies

   npm install

3. Set up environment variables (optional for demo)

   cp .env.example .env

   Add your Twitch API credentials to .env:

   TWITCH_CLIENT_ID=your_twitch_client_id
   TWITCH_ACCESS_TOKEN=your_twitch_access_token

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

🐳 Docker Deployment

Quick Start with Docker

1. Create environment file

   # Create .env file with your Twitch credentials
   TWITCH_CLIENT_ID=your_actual_client_id
   TWITCH_CLIENT_SECRET=your_actual_client_secret

2. Build and run with Docker Compose

   docker-compose up --build -d

3. Access the application Navigate to http://localhost:3010

Docker Commands

# Start services
docker-compose up -d

# Stop services  
docker-compose down

# View logs
docker-compose logs -f

# Rebuild after changes
docker-compose up --build -d

For detailed Docker setup instructions, see DOCKER_SETUP.md.

🔧 Configuration

Twitch API Setup

To use real Twitch data instead of mock data:

1. Create a Twitch application at dev.twitch.tv
2. Get your Client ID from the application dashboard
3. Generate an access token using the Client Credentials flow
4. Add credentials to your .env file
5. Uncomment the real API code in src/app/api/streamers/route.ts

Customizing Streamers

Edit the streamer list in src/app/api/streamers/route.ts:

const STREAMER_USERNAMES = [
  "your_favorite_streamer",
  "another_streamer",
  // Add more streamers here
];

Customizing Drops

Update drop campaigns in src/data/sample-data.ts or connect to your preferred drops data source.

🛠️ Tech Stack

This project is built with:

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library
• T3 Stack - Typesafe full-stack development

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run typecheck - Run TypeScript compiler check
• npm run format:write - Format code with Prettier

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Built on the T3 Stack
• Icons by Lucide
• UI components by Radix UI
• Not affiliated with Twitch Interactive, Inc.