Social Media App with Supabase

A React Native social media app built with Expo and Supabase backend.

Features

• User authentication (sign up/sign in)
• Create and view posts
• Share posts
• User profiles
• Real-time data with Supabase

Setup Instructions

1. Install Dependencies

npm install

2. Set up Supabase

1. Create a new project at supabase.com
2. Go to Settings > API to get your project URL and anon key
3. Update lib/supabase.ts with your credentials:

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

3. Set up Database Schema

1. Go to your Supabase dashboard
2. Navigate to SQL Editor
3. Copy and paste the contents of supabase-schema.sql
4. Run the SQL to create tables and policies

4. Configure Authentication

1. In Supabase dashboard, go to Authentication > Settings
2. Enable email authentication
3. Optionally configure email templates

5. Run the App

npm start

Project Structure

├── components/          # Reusable UI components
│   ├── button.tsx      # Custom button component
│   └── TextInput.tsx   # Custom text input component
├── lib/                # Utilities and configuration
│   ├── auth.tsx        # Authentication context
│   ├── supabase.ts     # Supabase client configuration
│   └── theme.ts        # App theme and styling
├── screens/            # App screens
│   ├── AddPostScreen.tsx
│   ├── HomeScreen.tsx
│   ├── LoginScreen.tsx
│   └── ProfileScreen.tsx
├── types/              # TypeScript type definitions
│   └── index.ts
├── App.tsx             # Main app component
└── supabase-schema.sql # Database schema

Database Schema

Tables

• users: User profiles (extends Supabase auth.users)
• posts: User posts/content
• comments: Comments on posts
• shares: Post shares/reposts

Key Features

• Row Level Security (RLS) enabled
• Automatic user profile creation on signup
• Proper foreign key relationships
• Timestamp tracking with auto-update

Usage

1. Sign Up/Sign In: Create an account or sign in with existing credentials
2. View Feed: Browse posts from all users on the home screen
3. Create Posts: Tap the + button to create new posts
4. Share Posts: Tap the share button on any post
5. Profile: View your profile, posts, and stats

Environment Variables

Create a .env file (optional) or update lib/supabase.ts directly:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

Development

The app uses:

• Expo for React Native development
• Supabase for backend and authentication
• React Navigation for navigation
• TypeScript for type safety

Troubleshooting

1. Authentication Issues: Ensure your Supabase URL and keys are correct
2. Database Errors: Make sure you've run the schema SQL in Supabase
3. Navigation Issues: Ensure all navigation dependencies are installed

Next Steps

Potential enhancements:

• Image upload for posts
• Real-time comments
• Push notifications
• User following/followers
• Post likes/reactions
• Search functionality