Akshith985/Hackathon

★ 0Forks 0HTMLGitHub ↗Compare

Project website ↗

README

DevChennai — setup checklist

Everything that could be built without an account of yours is done. Here's what's left, in the order you'll hit them.

1. Get a domain + host (covers "Force HTTPS")

Pick a host that gives you free automatic HTTPS on a custom domain — Netlify, Vercel, and Cloudflare Pages all do this with zero config. There is nothing to "turn on" for HTTPS beyond deploying there; it's automatic. Once you have a real domain, find-and-replace devchennai.example.com across these files with your real domain:

  • index.html, login.html, register.html, privacy.html, terms.html
  • robots.txt, sitemap.xml

2. Firebase (accounts + database)

  1. Create a project at https://console.firebase.google.com
  2. Enable Authentication -> Email/Password.
  3. Enable Firestore Database (start in production mode).
  4. Paste your web app config into firebase-config.js (replace the REPLACE_WITH_... placeholders). This file is safe to expose publicly — see the comment at the top of that file for why.
  5. In Firestore -> Rules, paste the rules shown in the comment at the bottom of firebase-config.js, so people can only read their own registration.

3. Forms API (collab message form)

Went with Formspree — free, no backend, just a POST endpoint.

  1. Create a form at https://formspree.io
  2. Copy the endpoint it gives you (looks like https://formspree.io/f/xxxxxxx)
  3. Paste it into index.html, replacing YOUR_FORM_ID in the COLLAB_FORM_ENDPOINT line near the bottom of the file.

4. Analytics

Added a Google Analytics 4 loader in script.js that only fires after someone accepts the cookie banner (so it's consent-gated by default).

  1. Create a GA4 property at https://analytics.google.com
  2. Copy your Measurement ID (G-XXXXXXXXXX)
  3. Paste it into script.js, replacing GA_MEASUREMENT_ID's placeholder value.

If you'd rather not use Google Analytics, Plausible or Fathom are privacy-friendlier drop-in alternatives — say the word and I'll wire one in instead.

5. Social preview image

assets/og-image.png (1200×630) is already built from your Skynet coin logo and wired into the <meta property="og:image"> tags. Regenerate it any time your branding changes and it'll pick up automatically.

What's already handled

  • Secrets off the frontend — there aren't any true secrets to hide. Firebase's web config and a Formspree form ID are both meant to be public; real access control lives in Firestore security rules (see step 2).
  • Cookie consent banner — bottom-of-page banner, accept/decline, remembered via localStorage, gates analytics loading.
  • Meta titles + descriptions — unique per page.
  • Favicon — assets/favicon.ico + apple-touch-icon, generated from your logo.
  • Sitemap + robots.txt — done (update the domain per step 1).
  • Alt text — descriptive alt text on the logo image; decorative images are marked alt="" so screen readers skip them.
  • Image compression — logo assets exported optimized at the sizes actually used (96px header, 192px favicon-adjacent use, 180px apple-touch).
  • Color contrast — checked the palette against WCAG: body text, muted text, and button text all clear AA/AAA comfortably (12.4:1, 7.2:1, and 13.3:1+ respectively).
  • Mobile friendly — responsive nav, grid, and type sizes down to ~360px.
  • Custom 404 page — 404.html, on-brand.
  • Form validation — client-side required/email/length checks on both forms.
  • Spam protection — honeypot field + submission-speed trap on both forms (no external captcha account needed). If spam still gets through once it's live, adding Google reCAPTCHA is a quick follow-up — it needs its own site key from your Google account, which is why it's not wired in yet.
  • One clear CTA — hero's primary action is "Register for an event"; everything else is secondary (ghost-style buttons).
  • Scroll animations — event cards fade/slide in on scroll via IntersectionObserver, respecting prefers-reduced-motion.

Checking page speed once it's deployed

Run your live URL through https://pagespeed.web.dev — the page is already lightweight (no build step, two small external libraries: NES.css and one Google Font), so it should score well out of the box.

Contributors

awiseguy123

Issues