# ⚡ Quick Reference - MyPowerPost

## 🚀 Getting Started (5 Minutes)

```bash
# 1. Install
npm install

# 2. Setup .env file (see .env.example)
DATABASE_URL="postgresql://..."
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-here"

# 3. Database
npx prisma generate
npx prisma db push

# 4. Run
npm run dev
```

## 📁 File Locations

| What | Where |
|------|-------|
| **Pages** | `app/` |
| **Components** | `components/` |
| **Server Actions** | `actions/` |
| **Database Schema** | `prisma/schema.prisma` |
| **Types** | `types/` |
| **Styles** | `app/globals.css` |
| **Public Assets** | `public/` |
| **Config** | `next.config.mjs` |

## 🎨 Component Library

All components in `components/ui/`:
- `button.tsx` - Buttons with variants
- `card.tsx` - Card containers
- `avatar.tsx` - User avatars
- `dialog.tsx` - Modal dialogs
- `form.tsx` - Form components
- `input.tsx` - Text inputs
- `toast.tsx` - Notifications
- ...and 40+ more!

## 🗄️ Database Commands

```bash
npx prisma studio          # Open GUI
npx prisma generate        # Generate client
npx prisma db push         # Sync schema
npx prisma migrate dev     # Create migration
npx prisma db seed         # Seed database
```

## 🔧 Common Commands

```bash
# Development
npm run dev               # Start dev server (port 3000)
npm run build            # Build for production
npm run start            # Run production build
npm run lint             # Run linter

# Type Checking
npx tsc --noEmit         # Check types

# Database
npx prisma studio        # Database GUI
```

## 📝 Creating New Features

### 1. Add Database Model
```prisma
// prisma/schema.prisma
model YourModel {
  id        String   @id @default(cuid())
  field     String
  createdAt DateTime @default(now())
}
```

### 2. Create Types
```typescript
// types/your-model.ts
export interface YourModel {
  id: string
  field: string
  createdAt: Date
}
```

### 3. Create Server Action
```typescript
// actions/your-model-actions.ts
"use server"
import { db } from "@/lib/db"

export async function getYourModel(id: string) {
  return await db.yourModel.findUnique({ where: { id } })
}
```

### 4. Create Component
```typescript
// components/your-component.tsx
"use client"
export function YourComponent() {
  return <div>Your Component</div>
}
```

### 5. Create Page
```typescript
// app/your-page/page.tsx
import { YourComponent } from "@/components/your-component"

export default function YourPage() {
  return <YourComponent />
}
```

## 🎯 Key Files to Know

### Authentication
- `auth.ts` - NextAuth config
- `actions/auth-actions.ts` - Login/signup
- `app/(auth)/login/page.tsx` - Login page
- `app/(auth)/signup/page.tsx` - Signup page

### Posts
- `actions/post-actions.ts` - Post CRUD
- `components/posts/post-card.tsx` - Post display
- `components/posts/create-post-modal.tsx` - Create post
- `app/feed/page.tsx` - Main feed

### Users
- `app/profile/[userId]/page.tsx` - User profile
- `actions/frindle-actions.ts` - Friend system

## 🛠️ Troubleshooting

### Port in Use
```bash
# Kill process on port 3000
npx kill-port 3000
```

### Database Issues
```bash
# Reset database (deletes all data!)
npx prisma db push --force-reset
```

### Type Errors
```bash
# Regenerate Prisma client
npx prisma generate
npm install
```

### Cache Issues
```bash
# Clear Next.js cache
rm -rf .next
npm run dev
```

## 🔐 Environment Variables

Required:
```env
DATABASE_URL=""          # PostgreSQL connection
NEXTAUTH_URL=""         # App URL
NEXTAUTH_SECRET=""      # Auth secret (generate with: openssl rand -base64 32)
```

## 🌐 URLs

| What | URL |
|------|-----|
| **App** | http://localhost:3000 |
| **Database GUI** | http://localhost:5555 |
| **API Docs** | http://localhost:3000/api |

## 📱 Main Routes

```
/                  Landing page
/login            Login
/signup           Signup
/feed             Main feed
/profile          Your profile
/profile/[id]     User profile
/leaders          Leaderboard
/friendlies       Friends list
/messages         Messages
/alerts           Notifications
/search           Search
```

## 🎨 Theme Colors

Edit in `app/globals.css`:
```css
@theme {
  --color-primary: /* purple-600 */
  --color-secondary: /* pink-600 */
  --color-accent: /* indigo-600 */
}
```

## 💾 Database Schema Overview

```
User
  ├── posts (Post[])
  ├── replies (Reply[])
  ├── likes (Like[])
  ├── sentRequests (FrindleRequest[])
  ├── receivedRequests (FrindleRequest[])
  └── notifications (Notification[])

Post
  ├── author (User)
  ├── replies (Reply[])
  └── likes (Like[])
```

## 🔗 Useful Links

- **Next.js Docs**: https://nextjs.org/docs
- **Prisma Docs**: https://www.prisma.io/docs
- **Tailwind Docs**: https://tailwindcss.com/docs
- **NextAuth Docs**: https://authjs.dev
- **Radix UI**: https://www.radix-ui.com

## 🐛 Common Errors & Fixes

| Error | Fix |
|-------|-----|
| `Port 3000 in use` | `npx kill-port 3000` |
| `Cannot find '@prisma/client'` | `npx prisma generate` |
| `Database connection error` | Check DATABASE_URL in .env |
| `NEXTAUTH_SECRET missing` | Add to .env file |
| `Module not found` | `npm install` |
| `Type errors` | `npx tsc --noEmit` to check |

## 📊 Project Stats

- **Lines of Code**: ~15,000+
- **Components**: 50+
- **Pages**: 15+
- **Database Models**: 8
- **Server Actions**: 20+

## 🎯 Best Practices

1. ✅ Always use TypeScript types
2. ✅ Use Server Actions for data mutations
3. ✅ Use Server Components by default
4. ✅ Add "use client" only when needed
5. ✅ Handle errors gracefully
6. ✅ Add loading states
7. ✅ Optimize images
8. ✅ Use proper SEO metadata

## 🚀 Deploy Checklist

- [ ] Set production DATABASE_URL
- [ ] Set production NEXTAUTH_URL
- [ ] Generate secure NEXTAUTH_SECRET
- [ ] Run `npx prisma generate`
- [ ] Run `npx prisma migrate deploy`
- [ ] Test in production mode: `npm run build && npm start`
- [ ] Set up error monitoring (Sentry)
- [ ] Set up analytics
- [ ] Configure CDN for images

---

**Need More Help?**
- 📖 README.md - Full documentation
- 🚀 SETUP.md - Detailed setup guide
- 🤝 CONTRIBUTING.md - Contribution guide
- 🔧 FIXES_APPLIED.md - Recent changes

**Version:** 1.0.0  
**Last Updated:** December 1, 2025