Paywall

Next.js 14 platform that combines authentication, Stripe subscriptions and cloud storage to put premium content behind a pay-wall.

✨ Features

• Next.js App Router (SSR / SSG)
• Authentication with Next-Auth + MongoDB adapter
• Recurring payments & subscription management via Stripe
• Chakra UI for accessible, themeable design
• i18n powered by next-intl
• Image / video upload & optimisation (Sharp, fluent-ffmpeg, BlurHash for lazy-loading placeholders)
• Google Cloud Storage & Cloud Tasks for async jobs
• Redis for caching / job queue
• Front- & back-end validation with Yup + React Hook Form
• Sentry error tracking
• TypeScript everywhere

🏗️ Tech stack

Area	Key libs / services
Front-end	react 18, next 14, chakra-ui, framer-motion, react-hook-form, react-icons
Back-end	API routes / micro, next-connect, stripe, mongoose, redis, jsonwebtoken
DevOps	dotenv, env-cmd, Google Cloud (Storage + Tasks), Vercel (or other)
Quality	eslint, prettier, typescript, winston, sentry

🚀 Getting started

Prerequisites

• Node.js ≥ 18
• pnpm, npm or yarn
• A MongoDB Atlas cluster (or local instance)
• Stripe API keys + webhook secret
• A Google Cloud Storage bucket and service account
• (Optional) Redis local or hosted

Installation

git clone https://github.com/zikmout/pay_wall.git
cd pay_wall
pnpm install             # or npm install / yarn
cp .env.example .env.local   # add your own variables
pnpm run init-db          # seed admin / demo accounts
pnpm run dev              # http://localhost:3000

npm scripts

Script	Purpose
dev	Run Next.js in development mode
init-db	Seed the database with test users
build	Optimised production build
start	Start Next.js in production
lint	Lint & auto-fix code with ESLint / Prettier

Test with Stripe

Login into stripe stripe login

Run this command and change the STRIPE_WEBHOOK_SECRET_KEY in .env file accordingly

stripe listen --forward-to localhost:3000/api/webhooks/stripe

Environment variables (.env.local)

Name	Example	Description
DATABASE_URL	mongodb+srv://user:pass@cluster.mongodb.net/db	MongoDB connection
REDIS_URL	redis://localhost:6379	Cache / jobs
STRIPE_SECRET_KEY	sk_live_…	Stripe secret key
STRIPE_WEBHOOK_SECRET	whsec_…	Verify webhooks
NEXTAUTH_SECRET	complex-random-string	JWT encryption
GCLOUD_PROJECT_ID	my-project	Google Cloud
GCLOUD_CLIENT_EMAIL	service-account@my-project.iam.gserviceaccount.com
GCLOUD_PRIVATE_KEY	"-----BEGIN PRIVATE KEY-----\n…"

A sample .env.example file lists every required variable.

🗂️ Project layout

.
├── app/              # App Router pages + layouts
│   ├── api/          # API routes (Next.js 14)
│   └── (site)/       # UI components
├── components/       # Shared Chakra components
├── lib/              # Helpers (db, stripe, auth…)
├── models/           # Mongoose schemas
├── scripts/          # CLI scripts (user creation…)
└── public/           # Static assets

🧑‍💻 Contributing

1. Fork the repo & create a branch (git checkout -b feat/my-feature)
2. Commit your changes (git commit -m 'feat: my feature')
3. Push (git push origin feat/my-feature) and open a pull request

Issues and PRs are welcome—thanks!

🛣️ Roadmap

• Admin dashboard (Stripe analytics)
• Team mode with multiple seats
• Extra OAuth providers (Google, GitHub…)
• Playwright e2e tests

Feel free to adjust priorities or add your own ideas.

⚖️ License

MIT – © 2025 Simon Sicard

---

Made with ❤️ using Next.js & Chakra UI