# Quick Start — SDK

> Install the Aerostack React SDK, set up the provider, add authentication, query your database, and subscribe to realtime updates.

Get a React app connected to Aerostack with auth, database queries, and realtime subscriptions in under three minutes.

  **Beta** -- The Aerostack SDK is in active beta. Pin your dependency versions for production use.

1. **Install the SDK**

   ```bash
   npm install @aerostack/react
   ```

1. **Wrap your app with the provider**

   Find your **Project ID** and **Public API Key** in the [Aerostack Dashboard](https://app.aerostack.dev) under Project Settings.

   ```tsx title="src/main.tsx"
   import ReactDOM from 'react-dom/client'
   import { AerostackProvider } from '@aerostack/react'
   import App from './App'

   ReactDOM.createRoot(document.getElementById('root')!).render(
     
       
     
   )
   ```

1. **Add authentication**

   ```tsx title="src/components/AuthForm.tsx"
   import { useAuth } from '@aerostack/react'

   export function AuthForm() {
     const { user, signIn, signUp, signOut, loading, error } = useAuth()
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')

     if (loading) return <p>Loading...</p>

     if (user) {
       return (
         <div>
           <p>Signed in as {user.email}</p>
           <button onClick={signOut}>Sign out</button>
         </div>
       )
     }

     return (
       <form onSubmit={async (e) => {
         e.preventDefault()
         await signIn(email, password)
       }}>
         <input
           type="email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           placeholder="Email"
         />
         <input
           type="password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           placeholder="Password"
         />
         {error && <p style={{ color: 'red' }}>{error}</p>}
         <button type="submit">Sign in</button>
         <button type="button" onClick={() => signUp(email, password, { name: 'New User' })}>
           Sign up
         </button>
       </form>
     )
   }
   ```

1. **Query your database**

   Use the `useDb` hook to run SQL queries from your React components. Queries run through your server-side Logic Modules, keeping API keys secure.

   ```tsx title="src/components/UserList.tsx"
   import { useDb } from '@aerostack/react'

   export function UserList() {
     const { query, loading, error } = useDb()
     const [users, setUsers] = useState([])

     useEffect(() => {
       async function load() {
         const { results } = await query('SELECT id, name, email FROM users ORDER BY created_at DESC LIMIT 20')
         setUsers(results)
       }
       load()
     }, [])

     if (loading) return <p>Loading users...</p>
     if (error) return <p>Error: {error}</p>

     return (
       <ul>
         {users.map(u => <li key={u.id}>{u.name} ({u.email})</li>)}
       </ul>
     )
   }
   ```

1. **Subscribe to realtime updates**

   Get live updates when rows change in your database. No polling required.

   ```tsx title="src/components/LiveOrders.tsx"
   import { useSubscription } from '@aerostack/react'

   export function LiveOrders() {
     const [orders, setOrders] = useState([])

     useSubscription('orders', {
       onInsert: (payload) => {
         setOrders(prev => [payload.data, ...prev])
       },
       onUpdate: (payload) => {
         setOrders(prev => prev.map(o => o.id === payload.data.id ? payload.data : o))
       },
       onDelete: (payload) => {
         setOrders(prev => prev.filter(o => o.id !== payload.data.id))
       },
     })

     return (
       <div>
         <h2>Live Orders</h2>
         {orders.map(order => (
           <div key={order.id}>
             Order #{order.id} -- {order.status}
           </div>
         ))}
       </div>
     )
   }
   ```

## What to explore next

| Module | Guide | What you can build |
|--------|-------|-------------------|
| Auth | [Authentication](/sdk/auth) | Registration, OTP, magic links, password reset, profiles |
| Database | [Database](/sdk/database) | CRUD, batch transactions, parameterized queries |
| Realtime | [Realtime](/sdk/realtime) | Live chat, presence, DB subscriptions, collaborative editing |
| Storage | [Storage](/sdk/storage) | File uploads, CDN URLs, avatars, document management |
| AI | [AI & Vector Search](/sdk/ai-vector) | Chat completions, streaming, RAG, semantic search |
| Cache & Queue | [Cache & Queue](/sdk/cache-queue) | Session storage, background jobs, counters |
| Error Handling | [Error Handling](/sdk/error-handling) | Error types, retry strategies, debugging |

## Server-side quick start (Node.js)

If you are building a Node.js backend, Cloudflare Worker, or edge function instead of a React app:

```ts title="server.ts"

const client = new AerostackClient({
  projectId: process.env.PROJECT_ID,
  apiKey: process.env.API_KEY,
  baseUrl: 'https://api.aerostack.dev/v1',
})

const { sdk } = client

// Query the database
const { results: users } = await sdk.db.query('SELECT * FROM users WHERE active = 1')

// Cache a result
await sdk.cache.set('active-users', users, { ttl: 300 })

// Send a background job
await sdk.queue.enqueue('send-welcome-email', { userId: users[0].id })
```