Challenges Solved

Next.js

• Using App Router
• Setting up the directory structure that you will probably make when actually creating a service
• Providing examples based on several code patterns
  • Server Components + Form + Server Actions
  • Client Components + useTransition + react-hook-form + Server Actions
  • Client Components + useActionState + Form + Server Actions
  • Parallel Route + intercepting route
• Adding tests including middleware, server actions, etc
• Supporting Instrumentations
• Supporting Dockerfile
• Supporting Stripe using Server Actions and Route Handlers

NOTE

This repository will use dynamicIO so the code will be changed when the canary version will be stable from now on

Auth

• Introducing Google Oauth provider
• Connecting to Prisma
• Setting up Next.js api routes
• Using JWT strategy to authenticate users on middleware
• Supporting updating all JWTs for the same user, allowing access from multiple devices
• Separating the edge-compatible configuration from the rest, as some adapters may not support Edge

Prisma

• Adding schema required by @auth/prisma-adapter
• Generating Database ER diagram by prisma-erd-generator automatically
• Resolving Next.js’s HMR issue when development

Unit Test

• Supporting parallel execution using a real isolated database in a sandbox
• Using testing-library with vitest

E2E Test Optional

• Supporting Multiple dummy accounts using storageState to skip logging in multiple times
• Mocking and working around next-auth's JWT strategy
• Writing code using Page Object Models suggested by Playwright

Accessibility Test Optional

• Checking all pages's accessibility via Playwright

Observability Optional

• Setting up OpenTelemetry on Next.js
• Building Opentelemetry Collector and Jaeger

Payment Optional

• Building payment codebase and database schema using Stripe
• Supporting webhook to change status by Stripe for example expired subscription

Git

• Setting up pre-commit as git hook
• Checking code of TypeScript, JavaScript, Markdown, JSON, YAML, and Prisma by biome, prettier, prisma at pre-commit phase.

Linter and Formatter

• Setting up editorconfig, biome, and prettier
• Removing unused variables, functions, etc by Knip

CI

• Adding Lint, Build, unit-test, and e2e-test jobs

Dependencies

• Supporting renovate configuration like grouping deps
• Fixing version of packages using pnpm

VSCode

• Supporting recommended extensions for team members
• Setting up some workspace configurations mainly linter, formatter, and cSpell
• Supporting instructions for GitHub Copilot Edits

IMPORTANT

If you find yourself writing similar code often or think this repository can be optimized more than now, please submit an issue !