Supabase React Tutorial: Creating a Supabase Project with React and TypeScript

This repository contains the code for the tutorial: Creating a Supabase Project with React and TypeScript by Mobisoft - App Development Company, Houston.

How to Run the Project

To run the project locally:

1. Clone the repository:

git clone https://github.com/mobisoftinfotech/supabase-react-tutorial.git

2. Navigate to the project directory:

cd supabase-react-tutorial

3. Install the dependencies:

npm install

4. Update supabaseUrl and supabaseAnonKey in src/supabaseClient.ts file, Grab the key and URL from your Supabase dashboard under Settings > Data API:

const supabaseUrl = 'https://your-project.supabase.co'
const supabaseAnonKey = 'your-anon-key'

5. Start the development server:

npm run dev

6. Open your browser and navigate to http://localhost:5173 to view the application.

Features

• Authentication System

  • Complete user authentication flow
  • Session management
  • Protected routes

• Social Media Features

  • Posts management
  • Followers system
  • Real-time updates

• Modern Tech Stack

  • React with TypeScript
  • Vite as build tool
  • Supabase for backend
  • React Router for navigation

Project Structure

• src/Auth.tsx - Authentication component
• src/Posts.tsx - Posts management
• src/Followers.tsx - Followers system
• src/supabaseClient.ts - Supabase client configuration
• src/App.css - Styling

Demo Components

You can find the integrated demo components in the following files:

• App.tsx - Main application component with routing
• Posts.tsx - Posts management interface
• Followers.tsx - Followers management interface
• Auth.tsx - Authentication interface

The application implements a complete authentication flow with protected routes and real-time data synchronization using Supabase.