https://github.com/juanpablodiaz/beertv

A Next.js Full Stack app to displays funny Beer TV Ads
https://github.com/juanpablodiaz/beertv

api-routes data next tailwindcss

Last synced: about 2 months ago
JSON representation

A Next.js Full Stack app to displays funny Beer TV Ads

• Host: GitHub
• URL: https://github.com/juanpablodiaz/beertv
• Owner: JuanPabloDiaz
• License: mit
• Created: 2021-11-01T23:56:27.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-07-07T00:17:33.000Z (12 months ago)
• Last Synced: 2025-07-07T00:17:44.027Z (12 months ago)
• Topics: api-routes, data, next, tailwindcss
• Language: JavaScript
• Homepage: https://beer-tv.vercel.app
• Size: 470 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🍺 Beer TV - Super Bowl Commercial Experience

A full-stack Next.js application that showcases iconic beer commercials with a Super Bowl aesthetic. This application allows users to browse and watch beer commercials from various brands.

## 🧠 Features

- **Bold, cinematic UI** styled like a Super Bowl beer ad experience

- **Featured commercial** highlighted at the top of the homepage

- **Filter by brand** to find commercials from your favorite beer brands

- **Responsive design** works on mobile, tablet, and desktop

- **Video-first layout** optimized for watching beer commercials

- **API endpoints** for accessing beer commercial data

## 🧱 Tech Stack

- **Framework**: Next.js (App Router)

- **Styling**: Tailwind CSS

- **Language**: TypeScript

- **Database**: Local JSON file (data/beer-tv-ads.json)

- **Backend**: Next.js API Routes

## 📋 Getting Started

### Prerequisites

- Node.js 18.0.0 or later

- npm or yarn

## 📁 Project Structure

```

/beertv

  /app                   # Next.js App Router

    /api                 # API Routes

      /ads               # Beer ad API endpoints

    /ads                 # Ad detail pages

    page.tsx             # Homepage

  /components            # Reusable React components

    AdCard.tsx           # Beer commercial card

    BrandFilter.tsx      # Brand filter component

    Footer.tsx           # Application footer

    Header.tsx           # Application header

    VideoPlayer.tsx      # Video player component

  /data                  # Data source

    beer-tv-ads.json     # Local JSON database for beer ads

  /public                # Static assets

```

## 🛠️ API Endpoints

- `GET /api/ads`: Returns all beer commercials

- `GET /api/ads?brand=Budweiser`: Filter commercials by brand name

- `GET /api/ads?spot_language=en`: Filter commercials by language

- `GET /api/ads?brand_parent_name=Anheuser-Busch`: Filter commercials by parent brand

- `GET /api/ads/[id]`: Get details for a specific commercial by ID

## 🎨 Design Approach

The UI is designed to evoke the bold, cinematic feel of Super Bowl beer commercials with:

- Dark theme with gold accents

- Bold typography using Bebas Neue font

- Cinematic video layouts

- Responsive grid design for all device sizes

- Smooth animations and transitions

## 📝 License

This project is MIT licensed.

## Acknowledgments

- [Dataset](https://huggingface.co/datasets/dnaoblivion/Beer-Tv-Ads)