Tutorial
Project Structure
Understand how TikShip is organized
TikShip follows a clear, opinionated directory layout based on the Next.js App Router.
tikship/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── admin/ # Admin panel pages
│ │ ├── api/ # API routes
│ │ ├── blog/ # Blog pages
│ │ ├── docs/ # Documentation pages
│ │ └── products/ # Product pages
│ ├── components/ # React components
│ │ ├── ui/ # Base UI components
│ │ ├── admin/ # Admin-specific components
│ │ ├── layout/ # Header, Footer, layout wrappers
│ │ └── providers/ # Context providers
│ ├── lib/ # Business logic
│ │ ├── auth/ # Authentication & RBAC
│ │ ├── db/ # Prisma client
│ │ ├── email/ # Email service
│ │ ├── payment/ # Stripe & PayPal
│ │ └── utils/ # Shared utilities
│ ├── hooks/ # Shared React hooks
│ ├── config/ # App config (site, permissions)
│ └── locales/ # i18n translation files
├── prisma/ # Database schema & migrations
├── public/ # Static assets
└── scripts/ # Setup & maintenance scriptsKey Conventions
| Directory | Purpose |
|---|---|
src/app/api/admin/** | Admin REST API routes |
src/lib/** | Server-side services & utilities |
src/components/ui/** | Reusable base UI components |
src/hooks/** | Shared client-side logic |
src/config/ | Static configuration constants |
content/docs/ | MDX documentation pages |
Import Aliases
All source imports use the @/ alias pointing to src/:
import { prisma } from '@/lib/db/prisma'
import { Button } from '@/components/ui/Button'
import { siteConfig } from '@/config/site'