Skip to content

Latest commit

 

History

History
159 lines (110 loc) · 3.62 KB

README.md

File metadata and controls

159 lines (110 loc) · 3.62 KB

What's the goal?

Build an app for Screens, Envoy's upcoming digital signage platform.

Where to start?

  1. Make sure you have a GitHub account (https://github.com/signup)
  2. Fork this repository (https://github.com/envoy/hack-night-2025/fork)
  3. Fill in the team/app form below
  4. Start hacking!

Rules

  • You have only 2 hours to build the entire app
  • You can use any technology, frameworks, etc. you're comfortable with
  • You may use AI to assist you, but remember you'll be graded on quality
  • Bonus points for leveraging a hardware API (camera, flashlight, etc.)


Team name

Team members

  1. _
  2. _
  3. _

Envoy Screens Dashboard

A real-time monitoring dashboard built for Envoy Screens, displaying GitHub commits, Slack shoutouts, and weather forecasts.

Prerequisites

  • Node.js (v18 or higher)
  • npm or pnpm
  • GitHub account (for OAuth)
  • Slack workspace access (optional)
  • Convex account

Installation

  1. Clone the repository
   git clone <your-repo-url>
   cd envoy-screens-dashboard
  1. Install dependencies
   npm install
  1. Set up Convex
   npx convex dev
  • Follow the prompts to create a new Convex project
  • This will create a .env.local file with VITE_CONVEX_URL
  1. Configure Google OAuth
    • Go to Google Cloud Console
    • Create OAuth credentials
    • Add authorized redirect URIs:
      • http://localhost:5173/api/auth/callback/google
      • https://your-deployment.convex.site/api/auth/callback/google
    • Add environment variables in Convex Dashboard:
     AUTH_GOOGLE_ID=your-google-client-id
     AUTH_GOOGLE_SECRET=your-google-client-secret
     SITE_URL=http://localhost:5173
  1. Configure GitHub API (in Convex Dashboard)
   GITHUB_ACCESS_TOKEN=your-github-token
  1. Configure Slack API (in Convex Dashboard)
   SLACK_BOT_TOKEN=xoxb-your-token
   SLACK_CHANNEL_ID=C1234567890

Running Development Server

  1. Start Convex backend
   npm run dev:backend
  1. Start frontend (in another terminal)
   npm run dev:frontend
  1. Or run both together
   npm run dev
  1. Open your browser
   http://localhost:5173

Building for Production

npm run build

Tech Stack

  • Frontend: React, TypeScript, Vite, Tailwind CSS
  • Backend: Convex (database, auth, serverless functions, cron jobs)
  • APIs: GitHub API, Slack API, Open-Meteo Weather API
  • Auth: Convex Auth with Google OAuth

Features

  • ✅ Real-time GitHub commit monitoring
  • ✅ Slack shoutouts from team channels
  • ✅ Weather forecasts with 3-day outlook
  • ✅ User authentication with Google
  • ✅ Customizable settings per user
  • ✅ Automatic data syncing via cron jobs

Environment Variables

Create these in the Convex Dashboard (Settings → Environment Variables):

Variable Description
AUTH_GOOGLE_ID Google OAuth Client ID
AUTH_GOOGLE_SECRET Google OAuth Client Secret
SITE_URL Your site URL (http://localhost:5173 for dev)
GITHUB_ACCESS_TOKEN GitHub Personal Access Token
SLACK_BOT_TOKEN Slack Bot User OAuth Token
SLACK_CHANNEL_ID Slack Channel ID to monitor