Frontend Design

Jovie Joy coloring book

I made this website for my wife to sell digital products online with Stripe

About the project

jovie-joy-colouring-book

Printable colouring books for tiny hands. Monorepo with Next.js frontend + ASP.NET Core backend + Postgres.

Stack

Layer	Tech
Frontend	Next.js 15 (App Router), TypeScript
Backend	ASP.NET Core 9, Entity Framework Core
Database	PostgreSQL 17
Auth	Google OIDC (id_token via JWKS) + admin email/password, JWT sessions
Payments	Stripe Checkout (one-time, digital PDF downloads)
Deploy	GitHub Actions → self-hosted runner on VM

Repo layout

.
├── apps/
│   ├── web/                Next.js frontend
│   └── api/                ASP.NET Core backend
│       └── uploads/        PDF and image uploads (git-ignored)
├── .github/workflows/      CI + deploy pipelines
├── docker-compose.yml      Local dev
├── docker-compose.prod.yml Production
└── README.md

Local development

Prerequisites

Node 20+
.NET 9 SDK
Docker (for Postgres)

First-time setup

# 1. Start Postgres
docker compose up -d db

# 2. Backend
cd apps/api
cp .env.example .env               # fill in Google + Stripe keys
dotnet restore
dotnet ef database update          # apply migrations (seeds admin user too)
dotnet run                         # http://localhost:8080

# 3. Frontend (new terminal)
cd apps/web
npm install
NEXT_PUBLIC_API_URL=http://localhost:8080 npm run dev   # http://localhost:3000

Admin dashboard

The admin panel lives at /admin. Visit /admin/login to sign in with your admin credentials.