# 🚀 Quick Setup Guide - MyPowerPost

This guide will help you get MyPowerPost running on your local machine in under 10 minutes.

## Prerequisites Checklist

Before starting, make sure you have:

- [ ] Node.js 18+ installed ([Download](https://nodejs.org/))
- [ ] PostgreSQL installed ([Download](https://www.postgresql.org/download/))
- [ ] Git installed
- [ ] A code editor (VS Code recommended)

## Step-by-Step Setup

### 1. Database Setup

#### Option A: Local PostgreSQL

1. **Start PostgreSQL service**
```bash
# Windows (if using PostgreSQL installer)
# PostgreSQL should start automatically as a service

# Mac (using Homebrew)
brew services start postgresql

# Linux
sudo service postgresql start
```

2. **Create database**
```bash
# Connect to PostgreSQL
psql -U postgres

# Create database
CREATE DATABASE mypowerpost;

# Exit psql
\q
```

#### Option B: Cloud Database (Recommended for beginners)

Use a free PostgreSQL database from:
- [Supabase](https://supabase.com) (Recommended)
- [Neon](https://neon.tech)
- [Railway](https://railway.app)

### 2. Project Setup

```bash
# Clone the repository
git clone <your-repo-url>
cd my-power-post-pwa

# Install dependencies
npm install

# or if you prefer pnpm
pnpm install
```

### 3. Environment Configuration

Create a `.env` file in the root directory with the following content:

```env
# Database - Replace with your actual database URL
DATABASE_URL="postgresql://postgres:password@localhost:5432/mypowerpost"

# NextAuth - For local development
NEXTAUTH_URL="http://localhost:3000"

# NextAuth Secret - Generate with: openssl rand -base64 32
NEXTAUTH_SECRET="replace-this-with-generated-secret"
```

**Important:** To generate a secure secret:
```bash
# On Mac/Linux
openssl rand -base64 32

# On Windows (PowerShell)
[Convert]::ToBase64String((1..32 | ForEach-Object { Get-Random -Maximum 256 }))
```

Copy the output and replace `"replace-this-with-generated-secret"` with it.

### 4. Database Migration

```bash
# Generate Prisma Client
npx prisma generate

# Push schema to database
npx prisma db push
```

You should see output like:
```
✔ Generated Prisma Client
✔ The database is now in sync with your Prisma schema
```

### 5. Verify Setup

Open Prisma Studio to verify your database:
```bash
npx prisma studio
```

This will open a browser at `http://localhost:5555` where you can see your database tables.

### 6. Run the Development Server

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser!

## First Time Usage

### Create Your First Account

1. Navigate to `http://localhost:3000`
2. Click "Get Started" or "Sign Up"
3. Fill in your details:
   - Name
   - Email
   - Username
   - Password (min 6 characters)
4. Click "Sign Up"
5. You'll be logged in automatically!

### Test the App

1. **Create a post**: Click the compose area and write your first post
2. **Like a post**: Click the heart icon
3. **View profile**: Click on your avatar
4. **Explore**: Check out the feed, leaders, and friendlies pages

## Troubleshooting

### Database Connection Error

**Error:** `Can't reach database server`

**Solution:**
1. Make sure PostgreSQL is running
2. Check your `DATABASE_URL` in `.env`
3. Verify database exists: `psql -U postgres -l`

### Port Already in Use

**Error:** `Port 3000 is already in use`

**Solution:**
```bash
# Kill process on port 3000
# Mac/Linux
lsof -ti:3000 | xargs kill -9

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F
```

Or run on a different port:
```bash
PORT=3001 npm run dev
```

### Prisma Client Not Generated

**Error:** `Cannot find module '@prisma/client'`

**Solution:**
```bash
npx prisma generate
npm install
```

### Authentication Issues

**Error:** `Configuration error`

**Solution:**
1. Make sure `NEXTAUTH_SECRET` is set in `.env`
2. Restart the dev server after changing `.env`
3. Clear browser cookies for localhost

## Development Tips

### Viewing Database

```bash
# Open Prisma Studio
npx prisma studio

# Or use psql
psql -U postgres -d mypowerpost
```

### Resetting Database

```bash
# Reset database (WARNING: Deletes all data)
npx prisma db push --force-reset

# Create fresh migration
npx prisma migrate dev --name init
```

### Code Quality

```bash
# Run linter
npm run lint

# Type check
npx tsc --noEmit
```

### Hot Reload Issues

If changes aren't showing:
1. Save all files (Ctrl+S / Cmd+S)
2. Hard refresh browser (Ctrl+Shift+R / Cmd+Shift+R)
3. Restart dev server

## Next Steps

✅ App is running
✅ Database is connected
✅ First account created

**Now you can:**

1. **Customize the app**
   - Edit `app/globals.css` for styling
   - Modify components in `components/`
   - Add new features

2. **Add test data**
   - Create multiple user accounts
   - Make several posts
   - Test the friend system

3. **Deploy to production**
   - Follow the deployment guide in README.md
   - Set up production database
   - Configure environment variables

## Getting Help

- 📖 Check the main [README.md](./README.md)
- 🐛 [Report issues](https://github.com/yourusername/my-power-post-pwa/issues)
- 💬 Join our Discord community
- 📧 Email: support@mypowerpost.com

## Common Commands Reference

```bash
# Development
npm run dev              # Start dev server
npm run build            # Build for production
npm run start            # Run production build

# Database
npx prisma studio        # Open database GUI
npx prisma generate      # Generate Prisma Client
npx prisma db push       # Sync schema to database
npx prisma migrate dev   # Create new migration

# Code Quality
npm run lint             # Run ESLint
npx tsc --noEmit        # Type check

# Dependencies
npm install              # Install dependencies
npm update               # Update dependencies
```

---

**Congratulations! 🎉** You're all set to start building with MyPowerPost!