# Racelbook - Facebook-Style Social Media Platform

A fully functional social media web application built with Next.js, React, and Supabase.

## Features

- **Authentication System**
  - User signup and login
  - Session management
  - Secure logout

- **User Profiles**
  - View and edit profile
  - Upload profile photos
  - Custom bio and username
  - View user's posts

- **News Feed**
  - Create posts with text and images
  - View posts in chronological order
  - Real-time updates

- **Post Composer**
  - Rich text input
  - Photo/video upload
  - Feeling/emotion selector
  - Post button

- **Engagement System**
  - Like posts
  - Comment on posts
  - Real-time like and comment counts
  - View all comments

- **Friend System**
  - Send friend requests
  - Accept/decline requests
  - View all friends
  - Friend suggestions
  - Unfriend functionality

- **Responsive Design**
  - Mobile-friendly interface
  - Tablet and desktop optimization
  - Facebook-style blue and white theme
  - Modern UI with smooth transitions

## Tech Stack

- **Frontend**: Next.js 14, React 18, TypeScript
- **Styling**: Tailwind CSS
- **Backend**: Supabase (PostgreSQL)
- **Authentication**: Supabase Auth
- **Storage**: Supabase Storage (for images)
- **Real-time**: Supabase Realtime

## Prerequisites

- Node.js 18+ installed
- A Supabase account and project
- npm or yarn package manager

## Setup Instructions

### 1. Clone and Install Dependencies

```bash
# Install dependencies
npm install
```

### 2. Set Up Supabase

1. Go to [Supabase](https://supabase.com) and create a new project
2. Wait for the project to be fully provisioned

### 3. Configure Database

1. In your Supabase dashboard, go to the SQL Editor
2. Copy the contents of `supabase-schema.sql`
3. Paste and run the SQL script to create all tables, policies, and functions

### 4. Create Storage Buckets

1. Go to Storage in your Supabase dashboard
2. Create two public buckets:
   - `avatars` (for profile pictures)
   - `posts` (for post images)
3. Make both buckets public

### 5. Configure Environment Variables

1. Copy `.env.local.example` to `.env.local`:
   ```bash
   cp .env.local.example .env.local
   ```

2. Update `.env.local` with your Supabase credentials:
   ```
   NEXT_PUBLIC_SUPABASE_URL=your-project-url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
   ```

   You can find these in:
   - Supabase Dashboard → Settings → API
   - Project URL: The URL shown
   - Anon key: The `anon` `public` key

### 6. Run the Development Server

```bash
npm run dev
```

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

### 7. Build for Production

```bash
npm run build
npm start
```

## Database Schema

The application uses the following main tables:

- **profiles** - Extended user information
- **posts** - User posts with content and images
- **likes** - Post likes
- **comments** - Post comments
- **friend_requests** - Friend request management
- **friendships** - Accepted friendships

All tables have Row Level Security (RLS) enabled for data protection.

## Features Overview

### Authentication
- Users can sign up with email, password, username, and full name
- Login with email and password
- Automatic profile creation on signup
- Session persistence

### News Feed
- View all posts from all users
- Posts display in reverse chronological order
- Real-time updates when new posts are created
- Rich post cards with user info, content, and images

### Post Creation
- Text content with multi-line support
- Image upload with preview
- Feeling/emotion selector (😊 happy, ❤️ loved, etc.)
- Instant post publishing

### Interactions
- Like posts with visual feedback
- Comment on posts
- Real-time like and comment counts
- View all comments on a post

### User Profiles
- View any user's profile
- Edit your own profile (name and bio)
- Upload and change profile picture
- View all posts by a user
- Profile URL: `/profile/[user-id]`

### Friend System
- View all friends
- See pending friend requests
- Get friend suggestions
- Send friend requests
- Accept or decline requests
- Unfriend users
- Real-time friend count updates

### Navigation
- Responsive navbar with icons
- Home (Feed)
- Friends
- Messages (placeholder)
- Notifications (placeholder)
- Profile dropdown menu

## File Structure

```
├── app/
│   ├── feed/              # Main news feed
│   ├── friends/           # Friends management
│   ├── login/             # Login page
│   ├── signup/            # Signup page
│   ├── profile/[id]/      # User profile pages
│   ├── messages/          # Messages (placeholder)
│   ├── notifications/     # Notifications (placeholder)
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page (redirects)
│   └── globals.css        # Global styles
├── components/
│   ├── Navbar.tsx         # Navigation bar
│   ├── PostComposer.tsx   # Create post component
│   └── PostCard.tsx       # Post display component
├── contexts/
│   └── AuthContext.tsx    # Authentication context
├── lib/
│   └── supabase.ts        # Supabase client
├── supabase-schema.sql    # Database schema
└── package.json           # Dependencies
```

## Customization

### Colors
The app uses a Facebook-inspired color scheme defined in `tailwind.config.js`:
- `facebook-blue`: #1877f2
- `facebook-hover`: #166fe5
- `facebook-light`: #e7f3ff

You can customize these colors to match your brand.

### Features to Add
- Direct messaging system
- Notifications for likes, comments, and friend requests
- Post sharing functionality
- Search functionality
- Groups and pages
- Stories feature
- Video posts
- Emoji reactions

## Troubleshooting

### Images Not Loading
- Ensure storage buckets are created and set to public
- Check that storage policies are correctly configured
- Verify the image URLs in the Supabase Storage dashboard

### Authentication Issues
- Verify your `.env.local` file has correct Supabase credentials
- Check that the auth policies in the database are properly set up
- Clear browser cache and cookies

### Real-time Updates Not Working
- Ensure Supabase Realtime is enabled in your project
- Check that the table subscriptions are correctly configured
- Verify RLS policies allow reading the data

## License

This project is open source and available for personal and commercial use.

## Support

For issues and questions, please refer to:
- [Next.js Documentation](https://nextjs.org/docs)
- [Supabase Documentation](https://supabase.com/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)