# Project Structure Template

> Use this template when starting a new project with Claude Code.
> Copy this structure and adapt it to your specific needs.

## Recommended Folder Layout

```
my-project/
├── src/
│   ├── app/              # Next.js app router pages
│   ├── components/       # Reusable UI components
│   │   ├── ui/           # Base design system (buttons, inputs)
│   │   └── features/     # Feature-specific components
│   ├── lib/              # Shared utilities & helpers
│   ├── hooks/            # Custom React hooks
│   ├── types/            # TypeScript type definitions
│   └── content/          # Static content & data
├── public/               # Static assets (images, fonts)
├── tests/                # Test files
│   ├── e2e/              # End-to-end tests
│   └── unit/             # Unit tests
├── docs/                 # Documentation
├── CLAUDE.md             # AI assistant context file
├── package.json
├── tsconfig.json
└── README.md
```

## File Naming Conventions

| Type | Convention | Example |
|------|-----------|---------|
| Components | PascalCase | `UserProfile.tsx` |
| Utilities | camelCase | `formatDate.ts` |
| Pages/Routes | kebab-case folders | `app/user-settings/page.tsx` |
| Tests | match source + .test | `UserProfile.test.tsx` |
| Types | PascalCase | `UserTypes.ts` |
| Constants | UPPER_SNAKE | `API_ENDPOINTS.ts` |

## Quick Setup Checklist

- [ ] Initialize project (`npx create-next-app@latest` or similar)
- [ ] Set up version control (`git init`)
- [ ] Install core dependencies
- [ ] Create CLAUDE.md with project context
- [ ] Set up linting (ESLint + Prettier)
- [ ] Configure TypeScript strict mode
- [ ] Create initial folder structure
- [ ] Add .gitignore for your stack
- [ ] Set up environment variables (.env.local)
- [ ] Create first component to verify setup works

## Environment Variables Template

```env
# .env.local
DATABASE_URL=
NEXT_PUBLIC_SITE_URL=http://localhost:3000
API_KEY=
```

---
*Nerdsmith Founder Track — Module 0: Claude Code Bootcamp*