ReactAI Web

A modern React + Vite application with Supabase authentication and Tailwind CSS styling.

Features

• ⚡ Vite - Fast build tool and development server
• ⚛️ React 18 with TypeScript
• 🔐 Supabase Authentication - Email/password authentication
• 🎨 Tailwind CSS - Modern UI with white gradient theme
• 🛣️ React Router - Client-side routing
• 🏗️ Professional Structure - Organized codebase with separation of concerns

Project Structure

src/
├── components/          # Reusable UI components
│   └── ProtectedRoute.tsx
├── contexts/           # React contexts
│   └── AuthContext.tsx
├── hooks/             # Custom React hooks
├── pages/             # Page components
│   ├── Login.tsx
│   ├── SignUp.tsx
│   └── Dashboard.tsx
├── utils/             # Utility functions
│   └── supabase.ts
└── assets/            # Static assets

Setup Instructions

1. Environment Variables

Create a .env file in the root directory and add your Supabase credentials:

VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

You can find these values in your Supabase project dashboard under Settings > API.

2. Install Dependencies

npm install

3. Run Development Server

npm run dev

The application will be available at http://localhost:5173/

4. Build for Production

npm run build

Authentication Flow

1. Sign Up (/signup) - New users can create an account with email and password
2. Login (/login) - Existing users can sign in
3. Dashboard (/dashboard) - Protected route accessible only to authenticated users
4. Auto-redirect - Unauthenticated users are redirected to login page

Supabase Setup

1. Create a new project at supabase.com
2. Go to Authentication > Settings and configure:
   • Enable email authentication
   • Configure email templates (optional)
   • Set up custom SMTP (optional)
3. Copy your project URL and anon key to the .env file

Design Theme

The application uses a modern AI-related design with:

• White gradient backgrounds
• Clean, minimalist UI
• Indigo accent colors
• Responsive design with Tailwind CSS

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Technologies Used

• React 18.3.1
• TypeScript 5.5.3
• Vite 7.1.5
• Supabase for authentication and backend
• React Router 6.x for routing
• Tailwind CSS for styling
• ESLint for code linting

License

MIT License