Idea Guru Template

A modern Next.js starter template with a curated tech stack, designed for rapid development of full-featured web applications.

Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS 4
UI Components	shadcn/ui (base-nova style, powered by @base-ui/react)
State Management	Zustand 5 (client state) + TanStack Query 5 (server state)
Forms	React Hook Form + Zod 4
HTTP Client	Axios with interceptors
Animation	Framer Motion
Icons	Lucide React
Auth	NextAuth.js v5
i18n	next-intl
Theming	next-themes
Toasts	Sonner
Dates	date-fns
Monitoring	Sentry
Linting	ESLint (flat config) + Prettier + prettier-plugin-tailwindcss

Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Lint code
pnpm lint

Open http://localhost:3000 to view the app.

Project Structure

src/
├── app/                    # Next.js App Router (pages & layouts)
│   ├── globals.css         # Global styles & shadcn/ui theme variables
│   ├── layout.tsx          # Root layout with providers
│   └── page.tsx            # Home page
├── components/
│   ├── ui/                 # shadcn/ui components (Button, Card, Input, etc.)
│   ├── layout/             # Layout components (Header, Footer, etc.)
│   └── common/             # Reusable app-level components
├── hooks/                  # Custom React hooks
│   ├── use-example.query.ts  # Example TanStack Query hook
│   └── use-media-query.ts    # Responsive media query hook
├── lib/                    # Utility modules
│   ├── axios.ts            # Axios instance with auth & error interceptors
│   ├── env.ts              # Zod-validated environment variables
│   ├── query-client.ts     # TanStack Query client configuration
│   ├── utils.ts            # cn() utility for conditional classNames
│   └── validations.ts      # Zod schemas for form validation
├── providers/              # React context providers (Theme, QueryClient)
│   └── index.tsx           # Unified providers wrapper
├── stores/                 # Zustand stores
│   └── use-app-store.ts    # App store with persist middleware
└── types/                  # Shared TypeScript type definitions
    └── index.ts            # ApiResponse, PaginatedResponse, etc.

Conventions

• Package manager - Always use pnpm
• Imports - Use the @/* path alias (maps to src/*)
• Styling - Tailwind CSS utility classes; use cn() from @/lib/utils for conditional classes
• Components - shadcn/ui as the base component library. Add new components via pnpm dlx shadcn@latest add <component-name>
• State - Zustand for client-side global state; TanStack Query for server/async state
• Data fetching - Wrap Axios calls in TanStack Query hooks (see src/hooks/use-example.query.ts)
• Forms - React Hook Form + Zod schemas from @/lib/validations.ts

Environment Variables

Copy .env.example to .env.local and fill in the values:

cp .env.example .env.local

Client-side variables (prefixed with NEXT_PUBLIC_) and server-side variables are validated at runtime using Zod schemas defined in src/lib/env.ts.