Dev Code – CSS Golf Contest Platform

---

🎬 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

• Frontend Lead: Deepak (Me)
• Backend Lead: Ashish (https://github.com/ironwol2004)
• Open to contributions via PRs