## Root Directory Structure
```
etemplate-clean/
├── src/ # Source code directory
├── public/ # Static files
├── scripts/ # Deployment and utility scripts
├── prisma/ # Database schema and migrations
├── .env # Environment variables
├── .gitignore # Git ignore rules
├── next.config.mjs # Next.js configuration
├── package.json # Project dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── README.md # Project documentation
├── DEPLOYMENT.md # Deployment guide
└── PROJECT_STRUCTURE.md # This file
```
## Source Code Structure (`src/`)
```
src/
├── app/ # Next.js 13+ App Router
│ ├── layout.js # Root layout component
│ ├── page.js # Home page component
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── ui/ # UI components
│ ├── forms/ # Form components
│ └── layouts/ # Layout components
├── lib/ # Utility functions and libraries
│ ├── auth.js # Authentication utilities
│ ├── db.js # Database utilities
│ └── utils.js # General utilities
├── hooks/ # Custom React hooks
├── styles/ # CSS modules and styles
└── prisma/ # Database schema and migrations
└── schema.prisma # Prisma schema definition
```
## Key Files and Their Purposes
### Configuration Files
1. `package.json`
- Project metadata
- Dependencies list
- Scripts for development, building, and deployment
- Project configuration
2. `next.config.mjs`
- Next.js framework configuration
- Image optimization settings
- Environment variables
- Build settings
3. `tailwind.config.js`
- Tailwind CSS configuration
- Custom theme settings
- Plugin configurations
- Content paths
4. `.env`
- Environment variables
- Database connection string
- Authentication secrets
- API keys and credentials
### Source Code Files
1. `src/app/layout.js`
- Root layout component
- Global providers
- Common UI elements
- Metadata configuration
2. `src/app/page.js`
- Home page component
- Landing page content
- Main application entry point
3. `src/app/globals.css`
- Global styles
- Tailwind CSS imports
- Custom CSS variables
- Base styles
4. `src/prisma/schema.prisma`
- Database schema definition
- Model definitions
- Relationships
- Database configuration
## Component Organization
### UI Components (`src/components/ui/`)
- Button components
- Input fields
- Cards
- Modals
- Navigation elements
### Form Components (`src/components/forms/`)
- Login form
- Registration form
- Profile form
- Template forms
### Layout Components (`src/components/layouts/`)
- Header
- Footer
- Sidebar
- Dashboard layout
- Auth layout
## Utility Functions (`src/lib/`)
### Authentication (`src/lib/auth.js`)
- Login/logout functions
- Session management
- Token handling
- Auth middleware
### Database (`src/lib/db.js`)
- Database connection
- Query helpers
- Transaction management
- Error handling
### General Utilities (`src/lib/utils.js`)
- Date formatting
- String manipulation
- Validation functions
- Helper methods
## Custom Hooks (`src/hooks/`)
- `useAuth.js` - Authentication state management
- `useForm.js` - Form handling and validation
- `useApi.js` - API request handling
- `useTheme.js` - Theme management
## Styles Organization (`src/styles/`)
- `components/` - Component-specific styles
- `layouts/` - Layout-specific styles
- `themes/` - Theme configurations
- `variables.css` - CSS variables
## Database Structure
### Models
1. User Model
- Authentication fields
- Profile information
- Role and permissions
2. Account Model
- OAuth connections
- Provider information
- Token management
3. Verification Token Model
- Email verification
- Password reset
- Account recovery
## Development Workflow
1. Component Development
- Create component in appropriate directory
- Add styles in corresponding style file
- Import and use in pages
2. Database Changes
- Modify schema in `prisma/schema.prisma`
- Generate migration: `npx prisma migrate dev`
- Update Prisma client: `npx prisma generate`
3. API Development
- Create API route in `app/api/`
- Add handlers and middleware
- Test endpoints
4. Styling
- Use Tailwind classes for utility styles
- Create CSS modules for complex styles
- Maintain theme consistency
## Best Practices
1. Code Organization
- Keep components small and focused
- Use proper file naming conventions
- Maintain consistent directory structure
2. Component Structure
- Separate logic from presentation
- Use custom hooks for complex logic
- Implement proper prop types
3. Database
- Use migrations for schema changes
- Implement proper indexing
- Follow naming conventions
4. Styling
- Use Tailwind for utility classes
- Create reusable components
- Maintain consistent design system
## Testing Structure
```
__tests__/
├── components/ # Component tests
├── pages/ # Page tests
├── lib/ # Utility tests
└── integration/ # Integration tests
```
## Build and Deployment
1. Development
```bash
npm run dev
```
2. Production Build
```bash
npm run build
```
3. Start Production Server
```bash
npm run start
```
## Additional Resources
- [Next.js Documentation](https://nextjs.org/docs)
- [Prisma Documentation](https://www.prisma.io/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [React Documentation](https://reactjs.org/docs)