# 📦 React Native + Expo + Supabase Starter

A minimal yet powerful starter to quickly launch a mobile app using Expo and Supabase, including:

-   🔐 Authentication (sign up / sign in)
-   ⚛️ React authentication context with session management
-   🧭 Expo Router for file-based navigation
-   � React Query for data management
-   🔒 Secure storage for redirect handling
-   �💅 Clear and extensible structure
-   📱 Android / iOS / Web compatible

## 🚀 Getting Started

```bash
git clone https://github.com/vandevelde-dimitri/starter_react-native.git
cd starter
npm install
npx expo start
```

---

## 🧠 Features

-   ✅ Supabase Auth (login, signup, auto-refresh)
-   🧭 Expo Router for file-based navigation
-   ⚙️ Global Auth Context (AuthProvider) with session state
-   🔄 React Query for efficient data management
-   🔒 Secure storage for authentication redirects
-   🧱 Simple and modular project structure
-   ✨ TypeScript with strict mode enabled
-   🎨 Styled components with consistent form styles

---

## 🗂️ Project Structure

```
.
├── app/
│   ├── (public)/           # Public screens (auth)
│   │   ├── signin.tsx     # Login screen
│   │   ├── signup.tsx     # Registration screen
│   │   ├── welcome.tsx    # Welcome/landing screen
│   │   └── test.tsx       # Test screen
│   ├── (tabs)/            # Protected tabbed screens
│   │   ├── _layout.tsx    # Tab navigation layout
│   │   ├── index.tsx      # Home tab
│   │   ├── explore.tsx    # Explore tab
│   │   └── test.tsx       # Test tab
│   ├── _layout.tsx        # Root layout with auth routing
│   ├── index.tsx          # App entry point
│   └── +not-found.tsx     # 404 screen
├── components/            # Shared UI components
│   ├── ui/               # UI-specific components
│   └── ...               # Reusable components
├── hooks/
│   ├── authContext.tsx   # Global auth context
│   ├── useRequireAuth.ts # Auth guard hook
│   └── ...               # Custom hooks
├── styles/
│   └── form.styles.ts    # Form styling
├── utils/
│   └── supabase.ts       # Supabase client instance
├── constants/            # App constants
├── assets/              # Static assets
└── ...
```

---

## 🔑 Supabase Setup

1. Create a project on [supabase.com](https://supabase.com)

2. Go to Project Settings > API

3. Copy your anon key and project URL

4. Create a `.env.local` file at the root:

```ini
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_KEY=your-anon-key
```

5. The Supabase client in `utils/supabase.ts` will automatically use these environment variables.

## 🔐 Authentication Flow

-   **Public routes**: `(public)` group - accessible without authentication
-   **Protected routes**: `(tabs)` group - requires authentication
-   **Auto-redirect**: Users are automatically redirected based on auth state
-   **Secure storage**: Handles redirect paths for better UX after login

---

## 📄 Scripts

```bash
npm run start    # Start the app with Expo
npm run android  # Start on Android emulator
npm run ios      # Start on iOS simulator
npm run web      # Start web version
npm run lint     # Lint the codebase with ESLint
```

## 📦 Key Dependencies

-   **Expo**: Framework and platform
-   **Expo Router**: File-based navigation
-   **Supabase**: Backend and authentication
-   **React Query**: Data fetching and caching
-   **Expo Secure Store**: Secure local storage
-   **TypeScript**: Type safety

---

## 🧑‍💻 Author

Made with ❤️ by [@vandevelde-dimitri](https://github.com/vandevelde-dimitri)