Everything that could be built without an account of yours is done. Here's what's left, in the order you'll hit them.
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.htmlrobots.txt,sitemap.xml
- Create a project at https://console.firebase.google.com
- Enable Authentication -> Email/Password.
- Enable Firestore Database (start in production mode).
- Paste your web app config into
firebase-config.js(replace theREPLACE_WITH_...placeholders). This file is safe to expose publicly — see the comment at the top of that file for why. - 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.
Went with Formspree — free, no backend, just a POST endpoint.
- Create a form at https://formspree.io
- Copy the endpoint it gives you (looks like
https://formspree.io/f/xxxxxxx) - Paste it into
index.html, replacingYOUR_FORM_IDin theCOLLAB_FORM_ENDPOINTline near the bottom of the file.
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).
- Create a GA4 property at https://analytics.google.com
- Copy your Measurement ID (
G-XXXXXXXXXX) - Paste it into
script.js, replacingGA_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.
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.
- 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.
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.