Next.js 16

ShipNowKit uses Next.js 16 (App Router) as its core web framework:

• Server-First Architecture: Fully leverages the App Router's Server Components and Route Handlers to host both frontend UI and backend APIs in a single codebase.
• File-System Routing: Multi-language pages under app/[locale]/ and API routes under app/api/ naturally follow Next.js conventions.
• Production-Grade Capabilities: Built-in support for image optimization, SEO, and mixed static/dynamic rendering strategies, combined with next-sitemap for out-of-the-box sitemap and SEO support.

With Next.js, ShipNowKit can implement marketing landing pages, user dashboards, admin configuration interfaces, and all necessary API endpoints with a single codebase.

---

React 19 & Component System

On the view layer, ShipNowKit is built on React 19:

• Latest Concurrency Features: Provides ample room for future performance optimizations and complex interactions.
• Component-Based Design: Landing page components, auth components, dashboard components, pricing & payment components are all split into the components/ directory for easy reuse and customization.
• Animation & Interaction: Implements modern interactive effects using framer-motion and custom animation components.

Thanks to the React ecosystem, ShipNowKit maintains a clear code structure while being easy to integrate with third-party component libraries and visualization libraries.

---

Prisma & Multi-Database Support

The data access layer uses Prisma ORM and supports multiple databases via scripts:

• Type-Safe Data Access: db/prisma/schema.prisma defines models for users, sessions, subscriptions, one-time payments, price configurations, system settings, etc., with Prisma automatically generating a strongly-typed client.
• Multi-Database Switching: Switch between MySQL, PostgreSQL, SQLite, and MongoDB with a single script command: npm run db:use:mysql / postgresql / sqlite / mongodb.
• Migrations & Toolchain: Scripts like db:migrate, db:push, db:deploy, and db:studio assist in local development and production evolution.

ShipNowKit includes not only basic user tables but also built-in models for:

• Subscription and one-time payment records
• Transaction history (amount, period, provider, status, etc.)
• System configuration and audit logs (SystemConfig & ConfigAuditLog)

These models lay a solid foundation for the "Billing + Configuration Center" capabilities common in SaaS scenarios.

---

Authentication: better-auth

ShipNowKit uses better-auth as its unified authentication solution:

• Multiple Login Methods: Supports Email/Password, Magic Link, and common OAuth providers (Google, GitHub, Apple, Discord, etc.). The 9+ login methods listed in the README are all implemented around better-auth.
• Session Management & Security: Models like User, Account, Session, and Verification in db/prisma/schema.prisma work with better-auth to handle login states, verification emails, and session expiration.
• Type Safety: lib/auth/index.ts directly exports the Session type, facilitating safe use of user session information on both server and client sides.

Compared to building authentication from scratch, better-auth strikes a great balance between security, extensibility, and development efficiency, allowing you to focus more on your business.

---

Payment System: Stripe & Paddle

ShipNowKit features Dual Payment Gateways: Stripe and Paddle, supporting both Subscriptions and One-Time Payments:

• Stripe Integration:

  • Uses the official stripe SDK and @stripe/stripe-js.
  • Encapsulates billing-related logic in lib/payment/stripe/, such as dynamic key loading via getStripeInstance combined with the configuration center.
  • Supports subscription renewals and one-time payments, with scripts like test:stripe:renewal to simulate renewal flows.

• Paddle Integration:

  • Relies on @paddle/paddle-js and @paddle/paddle-node-sdk.
  • A dedicated lib/payment/paddle/ directory abstracts Paddle's customer, subscription, and billing logic.

At the database level, models like Subscription, OneTimePayment, SubscriptionTransaction, and Price unify the differences between Stripe and Paddle. A PaymentProvider enum (stripe / paddle) distinguishes them, making it smooth to switch payment providers in the code.

---

Styling System: Tailwind CSS 4

The styling layer adopts Tailwind CSS 4, combined with a suite of tools to provide a modern design experience:

• Utility-First Styling: Greatly reduces handwritten CSS, enabling rapid construction of exquisite marketing pages and dashboard interfaces.
• Design System Capabilities: Easily reuse standardized typography, spacing, and animation styles via tailwind-merge, tailwindcss-animate, and encapsulated UI components.
• Flexibility & Consistency: Even with heavy Tailwind usage, component encapsulation ensures unified page style and easy theme replacement.

Global styles, theme styles, and loading animation styles can be found in the styles/ directory, ensuring consistency in the basic design language.

---

UI Components: shadcn/ui & Radix UI

For basic UI components, ShipNowKit selects the Radix UI ecosystem and shadcn/ui:

• Radix UI: Provides accessible, unstyled, and composable primitives (like Dialogs, Dropdowns, Toggles, Tabs, etc.).
• shadcn/ui: In components/ui/, you can find encapsulated components like Buttons, Inputs, Dialogs, Tables, Sidebars, Tabs, etc., based on shadcn/ui specifications.
• Consistent Design Language: All upper-level feature pages (Login, Dashboard, Settings, Payment Dialogs, etc.) are built on this UI system, ensuring UI consistency and maintainability.

This combination avoids designing every interaction detail from scratch while retaining enough customization space, making it suitable for SaaS products to gradually evolve their visual style during brand upgrades.

---

Internationalization: next-intl

To support global users, ShipNowKit builds in the next-intl internationalization solution:

• Multi-Language Routing: The routing structure in app/[locale]/ naturally supports multi-language pages based on locale codes.
• Message Dictionary: messages/en.json and messages/zh.json store multi-language copy; adding a new language only requires supplementing the corresponding JSON file.
• Language Configuration Center: config/languages.ts unifies definitions for language codes, display names, native names, flag emojis, and ogLocale, facilitating frontend display and SEO.

Compared to handwritten i18n logic, next-intl offers a more natural experience in App Router integration, type support, and multi-language route handling.

---

Documentation & Content: Fumadocs + MDX

ShipNowKit uses Fumadocs as the foundation for its documentation system, managing content with MDX:

• Content Organization: MDX files in content/docs and content/blog manage documentation and blog content respectively, with meta.json defining navigation and structure.
• Developer Experience: fumadocs-core, fumadocs-mdx, and fumadocs-ui provide full-link support from MDX rendering to frontend UI.
• Code Integration: Documentation content is stored in the same repository as the code, facilitating immediate updates as features evolve and making it easier for secondary developers to read source code and docs.

---

Email System: React Email & Resend

For email sending and templates, ShipNowKit chooses React Email paired with Resend:

• React Email Templates: Verification and Magic Link email templates written as React components can be found in the emailTemplate/ directory.
• Unified Sending Service: These templates are rendered and sent via the resend SDK, managing sender configurations for different environments via environment variables.
• Deep Integration: Email templates are integrated with better-auth and payment notification scenarios, used for login verification, account change notifications, payment reminders, etc.

Using React to describe email templates makes component reuse, style maintenance, and local preview much smoother.

---

Analytics & Monitoring: Analytics & Logs

To better observe application operation in production, ShipNowKit provides basic analytics and logging capabilities:

• Frontend Analytics: Integrates Vercel Analytics via @vercel/analytics to gather statistics on traffic and page performance.
• Logging System: The backend uses winston and winston-daily-rotate-file, encapsulating logging logic in lib/logger.ts to support daily log rotation and leveled output.

This combination serves as a default lightweight observability solution, easily extendable to heavier monitoring (like APM, error tracking services) if needed.

---

Configuration & Extensibility

Beyond individual tech stack components, ShipNowKit is designed for "Configurability and Extensibility":

• Configuration Center: Through SystemConfig and ConfigAuditLog models, plus the config-manager service, dynamic configuration and change auditing are implemented for core capabilities like site, auth, payment, email, and analytics.
• Multi-Template Support: scripts/switch-template.js combined with multiple templates under app/_templates/ (T1, T2, etc.) allows switching marketing pages and layout styles with a single command.
• Environment Scripts & Tools: The scripts/ directory contains database switching, Stripe testing, cleanup scripts, etc., helping you operate efficiently in local and production environments.

This means you can adjust themes, payment schemes, authentication strategies, and even database types without significantly altering business code.