Paradox Merch Website

An interactive, modern merch and experiences platform built for Paradox, powered by Next.js 15, Tailwind CSS 4, and a Go + GraphQL backend.

This platform allows users to explore exclusive merchandise, book time slots for experiences like Lazer Tag and LinkedIn Headshots, and enjoy a seamless, beautiful UI throughout their shopping journey.

---

🚀 Tech Stack

• Frontend: Next.js 15, Tailwind CSS 4
• Backend: Go (Golang) with GraphQL
• Deployment: Vercel

---

✨ Features

🖥️ Modern Responsive Design

• Fully responsive design optimized for mobile, tablet, and desktop
• Tailwind CSS 4 with system-based theming and utility-first design
• Smooth animations and dark/light mode support

👕 Dynamic Experiences and Merch Section

• Live merch listings fetched via GraphQL
• Categories, price filtering, and detail pages for each product

🎯 Experiences Booking

• Dedicated section for experiences like:
  • Lazer Tag
  • LinkedIn Headshots
• Time Slot Management System to prevent overbooking
• Auto-updated availability shown to users

🖼️ Beautiful Gallery Page

• Showcases all merchandise in a visual-first layout
• High-quality product images and grid-based display
• Optimized for performance and lazy loading

🛒 Elegant Cart Experience

• Add merch and experiences to a unified cart
• Intuitive cart drawer or dedicated cart page
• Quantity management, subtotal calculation, and checkout CTA

---

🙌 Contributors

Built with the help of Sales & Merch Team and Tech Leads at Paradox 25, with inputs from multiple departments and stakeholders.

---

🏁 Getting Started

1. Clone the repository
2. Set up Firebase config in .env.local

   NEXT_PUBLIC_FIREBASE_API_KEY
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
   NEXT_PUBLIC_FIREBASE_PROJECT_ID
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
   NEXT_PUBLIC_FIREBASE_APP_ID
   NEXT_PUBLIC_GRAPHQL_URL
   NEXT_PUBLIC_BACKEND_URL
   

3. Run locally:

npm install
npm run dev