# Racelbook - Quick Setup Guide

This guide will help you get Racelbook up and running in minutes.

## Step-by-Step Setup

### 1. Install Dependencies

```bash
npm install
```

This will install all required packages including Next.js, React, Supabase, and Tailwind CSS.

### 2. Create a Supabase Project

1. Visit [https://supabase.com](https://supabase.com)
2. Click "Start your project"
3. Sign in or create an account
4. Click "New Project"
5. Fill in:
   - Name: `racelbook` (or your preferred name)
   - Database Password: (choose a strong password and save it)
   - Region: (choose closest to your users)
6. Click "Create new project"
7. Wait 2-3 minutes for project setup

### 3. Set Up Database Tables

1. In your Supabase dashboard, click on "SQL Editor" in the left sidebar
2. Click "New Query"
3. Open the `supabase-schema.sql` file in this project
4. Copy all the SQL code
5. Paste it into the SQL Editor in Supabase
6. Click "Run" (or press Cmd/Ctrl + Enter)
7. You should see "Success. No rows returned"

This creates all necessary tables, security policies, indexes, and triggers.

### 4. Create Storage Buckets

1. In Supabase dashboard, click "Storage" in the left sidebar
2. Click "Create a new bucket"
3. Name: `avatars`
4. Toggle "Public bucket" to ON
5. Click "Create bucket"
6. Repeat steps 2-5 for a second bucket named `posts`

### 5. Configure Environment Variables

1. In Supabase dashboard, click "Settings" (gear icon) at the bottom left
2. Click "API" in the settings menu
3. You'll see two important values:
   - **Project URL** (looks like: https://xxxxx.supabase.co)
   - **anon/public key** (long string starting with "eyJ...")

4. In your project folder, copy the example env file:
   ```bash
   cp .env.local.example .env.local
   ```

5. Open `.env.local` and update it:
   ```
   NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
   NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx...your-key-here
   ```

### 6. Start the Development Server

```bash
npm run dev
```

The app will start at [http://localhost:3000](http://localhost:3000)

### 7. Create Your First Account

1. Open [http://localhost:3000](http://localhost:3000)
2. You'll be redirected to the login page
3. Click "Create new account"
4. Fill in the signup form:
   - First name
   - Last name
   - Username (unique)
   - Email
   - Password (minimum 6 characters)
5. Click "Sign Up"
6. You'll be logged in and redirected to the feed!

## Verify Everything Works

### Test Authentication
- ✅ Sign up with a new account
- ✅ Log out from profile dropdown
- ✅ Log in with existing credentials

### Test Profile
- ✅ Click your profile icon in the navbar
- ✅ Click "Edit Profile"
- ✅ Change your name and bio
- ✅ Upload a profile picture
- ✅ Save changes

### Test Posts
- ✅ Create a post with text only
- ✅ Create a post with an image
- ✅ Create a post with a feeling
- ✅ View your post in the feed

### Test Interactions
- ✅ Like a post (heart should turn blue)
- ✅ Unlike a post
- ✅ Comment on a post
- ✅ View comment count

### Test Friends (Create a second account in another browser/incognito)
- ✅ Go to Friends page
- ✅ View friend suggestions
- ✅ Send a friend request
- ✅ Accept friend request (on second account)
- ✅ View friends list
- ✅ Visit friend's profile

## Common Issues

### "Cannot connect to Supabase"
- Check that your `.env.local` file exists and has the correct values
- Restart the dev server after changing `.env.local`
- Verify your Supabase project is fully provisioned (not still setting up)

### "Images not uploading"
- Make sure both `avatars` and `posts` storage buckets are created
- Verify buckets are set to "Public"
- Check browser console for specific errors

### "Cannot create profile"
- Run the SQL schema again to ensure the trigger function exists
- Check Supabase dashboard → Authentication → Users to see if user was created
- Check Supabase dashboard → Table Editor → profiles to see if profile exists

### "Friend requests not working"
- Verify all tables were created (check Table Editor in Supabase)
- Make sure RLS policies are enabled
- Check browser console for errors

## Next Steps

Now that your app is running:

1. **Customize the theme**: Edit `tailwind.config.js` to change colors
2. **Add more users**: Share the app with friends to test with real users
3. **Deploy**: Deploy to Vercel, Netlify, or your preferred hosting platform
4. **Enhance features**: Add notifications, messages, or other features

## Production Deployment

### Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Go to [vercel.com](https://vercel.com)
3. Click "Import Project"
4. Select your GitHub repository
5. Add environment variables:
   - `NEXT_PUBLIC_SUPABASE_URL`
   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
6. Click "Deploy"

Your app will be live in minutes!

### Environment Variables for Production

Make sure to set the same environment variables in your hosting platform:
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`

## Support

If you encounter issues:
1. Check the [README.md](README.md) for detailed documentation
2. Review the [Supabase Documentation](https://supabase.com/docs)
3. Check the [Next.js Documentation](https://nextjs.org/docs)

## Security Notes

- Never commit `.env.local` to git (it's in `.gitignore`)
- Never share your Supabase service_role key
- The anon/public key is safe to use in frontend code
- All data access is protected by Row Level Security policies

Enjoy building with Racelbook! 🚀