Behind the Scenes: Tech & Security of SocialRally (Next.js + Supabase)

Hey Indie Hackers,

A little behind-the-scenes peek for those who like to know what's under the hood: here’s the stack, architecture, and security setup powering SocialRally .

🚀 TL;DR: Solid stack, sharp security, and almost ready to roll out. Dive in 👇

🛠 Framework & Environment:

• Next.js (v14.1.0) + React (v18.3.1)

• TypeScript + Node.js (>=18.17.0)

• SSR optimized, deployed via Vercel (CDG1 – Paris)

💾 Database & Authentication:

• Supabase (DB + Auth + JWT)

• SSR integration + automatic token refresh

🎨 UI & Styling:

• Tailwind CSS, Headless UI, Framer Motion

• Lucide React + React Icons

• Atomic Design Pattern (folder src/ui/)

⚙️ Core Features:

• Drag & Drop (@dnd-kit)

• QR Code Scanning (html5-qrcode)

• Internationalization (i18next)

• Date handling (date-fns)

• Visual effects (canvas-confetti)

• Notifications (react-hot-toast & sonner)

• State & fetch management (SWR)

🔧 Dev Tools:

• Jest + Testing Library (unit & integration tests)

• ESLint + PostCSS + Babel

• Custom scripts for maintenance & migrations

🛡️ Security & Rate Limiting

1️⃣ Content Security Policy (CSP)

• Configured in next.config.js

• Protects against XSS and other client-side vulnerabilities

• Allows: images via HTTPS, YouTube iframe embeds, inline styles (needed for Tailwind & React libs)

• Dev mode: more flexible / Prod mode: tightened

2️⃣ Smart Rate Limiting

• Global middleware based on LRU Cache

• Differentiates between:

  • ✅ Read (GET): 500 requests/hour/IP

  • ✍️ Write (POST, PUT, DELETE): 120 requests/hour/IP

• Informative headers:

  • X-RateLimit-Limit

  • X-RateLimit-Remaining

  • X-RateLimit-Reset

  • X-RateLimit-Type

✔️ Applied automatically to all /api/* routes
✔️ Clear & transparent error messages

🏗️ Architecture:

• ✅ Feature-first (src/features/, src/services/, src/hooks/)

• ✅ Modular services & Atomic Design components

• ✅ Migrations supported (folder migrations/)

📈 CI/CD & Deployment:

• Automated deployment via Vercel (CDG1)

• Roadmap: adding CI pipeline & automated tests

📊 Monitoring (coming soon):

• PostHog, Sentry, etc.

💡 The Bottom Line:
SocialRally is built to be solid and scalable. No overpromises here—just clean architecture and a pragmatic approach. The goal: offer creators & brands a reliable platform that works smoothly, no drama.

We’re now 98% ready 🚀—final stretch before early access.

✨ A little personal note:

“Oh, and for those wondering: why is the database hosted in Paris? Simple: SocialRally was originally built to support my other business (Adorable Sailing), which mainly targeted a European audience. But like many good stories... it evolved. Today, it's grown into a SaaS with international ambitions . The tech setup is ready to scale across multiple regions when the time comes .”

And the front-end? I know you’re curious.
SocialRally isn’t just well-coded—it’s thoughtful, robust, and built to truly engage creators and their communities in a smooth, fun experience. I’m super picky about the details: with the backend nearly done, polishing the front-end feels like the cherry on top 🍒. Can’t wait to show you 💥.

console.log("Hola!!The void?? Anyone out there?! Hello?! 🎤 drop");