Skip to content

README.md

Latest commit

 

History

History
154 lines (117 loc) · 5.24 KB

README.md

File metadata and controls

154 lines (117 loc) · 5.24 KB

Dev Code – CSS Golf Contest Platform

Node.js Express MongoDB React TailwindCSS Puppeteer Google OAuth2

Type Setup API PRs welcome

🎬 Demo

  • Video walkthrough: Watch the demo

🚀 What is Dev Code?

Dev Code is a web platform for hosting time-bound CSS challenges. Players log in with Google, receive an HTML snippet and a reference image, and race to write CSS that visually matches the target. Submissions are auto-evaluated using headless rendering and pixel comparison. Includes upcoming/past contests and real-time standings.

  • Backend: Node.js + Express + MongoDB
  • Frontend: React + Tailwind CSS
  • Auth: Google OAuth2 (client-side)
  • Judging: Puppeteer screenshot comparison with pixel-diff

✨ Features

  • Google Sign-In with one-click onboarding
  • Upcoming and Past contests listing
  • Code Playground to write CSS against an HTML prompt
  • Automated verdict via headless rendering and image diff
  • Contest window enforcement (1-hour window) and one valid submission per contest
  • Contest standings with participant names and timestamps

🧭 Architecture

flowchart LR
  A[React Frontend] -- Axios --> B[(Express API)]
  B -- Mongoose --> C[(MongoDB)]
  B -- Puppeteer --> D[Headless Browser]
  D -- PNG Buffer --> B
  B -- JSON --> A
Loading

📦 Monorepo Layout

Dev_Code/
  backend/
    index.js           # Express server & routes
    comparision.js     # Puppeteer + image comparison utilities
    package.json
    vercel.json
  frontend/
    src/pages/         # Home, Login, Upcoming, Past, Playground, etc.
    src/components/    # Header, Footer
    package.json

🔐 Environment Variables

Backend (Dev_Code/backend/.env):

PORT=8000
MONGO=<your-mongodb-connection-string>

🛠 Quick Start

1) Backend

cd Dev_Code/backend
npm install
npm run server   # dev with nodemon
# or
npm start        # prod

The server listens on PORT (default 8000).

2) Frontend

cd Dev_Code/frontend
npm install
npm start

Frontend runs on React Scripts (default http://localhost:3000).

🔌 API Reference (selected)

Base URL: http://localhost:8000

  • POST /login

    • Body: { response: { credential: <google_id_token> } }
    • Returns: Google sub (user id). Creates user if new.

  • POST /getuserdetails

    • Body: { u: <google_sub> }
    • Returns: { name, email }

  • GET /admin/override/createcontest

    • Creates a new contest with a random question starting now.

  • POST /question

    • Body: { qId } → Returns question { element, image(base64), css }

  • GET /upcomingcontests

    • Returns contests with startTime > now - 1h.

  • GET /pastcontests

    • Returns contests with startTime < now - ~1h.

  • POST /submit

    • Body: { css, qId, cId, uId }
    • Validates during contest window (1 hour). If CSS matches target (pixel-equal), records submission and returns true; else false.

  • POST /conteststandings

    • Body: { cId }
    • Returns chronological submissions with user names/emails.

  • POST /addquestion

    • Body: { css, element } → Generates preview image (base64) and stores the question.

🧪 How Judging Works

  • The server renders two screenshots with Puppeteer: one for the user’s CSS and one for the canonical CSS against the same HTML snippet.
  • Images are normalized and compared. If pixel difference is 0, the submission is accepted.

👤 Author & Contact