# My Project

## Overview
This is a Next.js e-commerce storefront with Stripe payments, NextAuth
authentication, and a PostgreSQL database via Prisma ORM.

## Tech Stack
- Framework: Next.js 14 (App Router, server components by default)
- Database: PostgreSQL with Prisma ORM
- Auth: NextAuth.js with GitHub and Google providers
- Payments: Stripe Checkout and webhooks
- Styling: Tailwind CSS with shadcn/ui components

## Development Phase
Currently building the product catalog and cart system. Authentication
and payment flows are complete. Next up: order history and admin dashboard.

## Code Style
- TypeScript strict mode enabled
- Prefer server components; use "use client" only when needed
- Use server actions for mutations (app/actions/)
- Validate all inputs with Zod schemas

## Commands
- `npm run dev` — start development server on port 3000
- `npm run build` — production build
- `npm run db:push` — push Prisma schema to database
- `npm run db:seed` — seed database with sample data
- `npm test` — run Jest test suite

## External Resources
- Design system: https://ui.shadcn.com
- API docs: Stripe API at https://stripe.com/docs/api

---
description: React component conventions and patterns
globs: "*.tsx,*.jsx"
alwaysApply: false
---
# React Component Rules

1. Use functional components with TypeScript interfaces for props
2. Prefer server components by default — add "use client" only for interactivity
3. Colocate component tests in adjacent __tests__/ directories
4. Use named exports, not default exports
5. Extract custom hooks into hooks/ directory when reused across components

## Styling
- Use Tailwind CSS v4 utility classes
- Follow mobile-first responsive design
- Keep component-specific styles colocated

## State Management
- Use React 19 use() for async data in server components
- Prefer URL state (searchParams) over client state where possible
- Use Zustand for complex client-side state