Overview
This is the site you're reading. CosmicBytez Labs is an IT and cybersecurity intelligence hub — news, how-tos, project writeups, IT exam prep, IT tools, and a weekly newsletter — all powered by a single Next.js content site. This writeup covers the pipeline.
Stack
- Framework: Next.js 16.1.6 + React 19 + TypeScript
- Content: velite (MDX files in
content/) - Styling: Tailwind CSS v4
- State: Zustand
- Analytics: Vercel Analytics + Speed Insights
- Fonts: Syne + Space Mono
- Newsletter: Resend, sent via Vercel cron (Wednesdays 2pm UTC)
- Deployment: Vercel (auto-deploy on push to
master)
Content Pipeline
content/*.mdx → velite (velite.config.ts) → Next.js App Router → server-rendered pages
Seven content collections are defined: News, Howtos, Newsletters, Projects, Checklists, Outages, and Security advisories. Each collection has a strict zod-style schema that validates frontmatter at build time — bad MDX surfaces as a npm run build failure instead of a runtime exception.
Key Features
- Cybersecurity news feed with automated generation (
scripts/generate-news.mjs) - IT how-to guide library
- Newsletter system with Resend (weekly send via Vercel cron, Wednesdays 2pm UTC)
- IT exam prep at
/study— 11 cert tracks (AZ-104, AZ-500, NSE4-7, MS-/MD-series, and more) with exam simulation, flashcards, and practice modes (770 practice questions across all tracks) - IT tools suite at
/tools: Base64, DNS lookup, hash generator, invoice generator, JWT debugger, password generator, subnet calculator, text diff - Community leaderboard
- Threat ticker on the homepage
- Service uptime monitoring
Routes
| Route | Purpose |
|---|---|
/ | Home — hero, threat ticker, featured, latest, categories |
/news | Cybersecurity news feed |
/howtos | IT how-to guide library |
/newsletter | Newsletter archive and subscribe |
/projects | Project writeups |
/checklists | IT checklists |
/outages | Outage log |
/security/[slug] | Security advisory detail pages |
/study | IT exam prep |
/tools | IT tools index (8 tools) |
Environment Variables
| Variable | Purpose |
|---|---|
ADMIN_SECRET | Secret for protected API endpoints |
RESEND_API_KEY | Resend newsletter API key |
RESEND_AUDIENCE_ID | Resend audience ID for subscribers |
CRON_SECRET | Vercel cron job secret |
NEXT_PUBLIC_BASE_URL | Site base URL |
CI/CD
Three GitHub Actions: ci.yml (lint, test, build), generate-news.yml (automated news generation), update-leaderboard.yml (leaderboard data updates). Vercel auto-deploys on push to master.
The newsletter cron is wired in vercel.json and hits /api/newsletter/send every Wednesday at 14:00 UTC, validated against CRON_SECRET.
Lessons Learned
- The site uses
master, notmain. Match the existing branch convention rather than fighting it. - velite errors only surface during
npm run build— nevernpm run dev. Run a build locally before pushing or you'll find out from the deploy. - New MDX frontmatter must match the velite schema exactly. The schema is the contract.
src/proxy.tshandles CSRF protection, origin validation, and protected-route auth in one place. Don't sprinkle that logic across API routes.
Testing
57 Vitest tests covering the content pipeline, route helpers, and newsletter logic.