Skip to content

aidenerard/tempr

Repository files navigation

Tempr

AI-powered music queue generation app built with React Native (Expo) and Supabase.

Setup

Prerequisites

1. Supabase Configuration

  1. Create a new Supabase project at supabase.com
  2. Go to Authentication > Providers > Spotify and enable it
  3. Enter your Spotify Client ID and Client Secret
  4. Set the redirect URL to: tempr:// (your app's deep link scheme)

2. Spotify Developer Setup

  1. Go to Spotify Developer Dashboard
  2. Create a new app
  3. Add the redirect URI: https://<your-project>.supabase.co/auth/v1/callback
  4. Copy the Client ID and Client Secret into your Supabase Spotify provider settings

3. Environment Variables

Copy .env.example to .env and fill in your values:

cp .env.example .env
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

4. Install & Run

npm install
npx expo start

Run on your phone (Expo Go)

  1. Download Expo Go:
  • iOS: App Store → search “Expo Go”
  • Android: Google Play → search “Expo Go”
  1. After running npx expo start, Expo will open a dev server page with a QR code.
  2. Open Expo Go on your phone and scan the QR code:
  • iOS: use the Camera app to scan → tap the link → opens in Expo Go
  • Android: use the Scan QR Code option inside Expo Go
  1. The app will load on your device and hot-reload as you edit code.
  • You can also press i for iOS simulator or a for Android emulator if you have them installed.

Project Structure

app/
  _layout.tsx       # Root layout with auth provider & routing
  login.tsx         # Spotify OAuth login screen
  (tabs)/
    _layout.tsx     # Tab navigation layout
    index.tsx       # Authenticated home screen
lib/
  supabase.ts       # Supabase client configuration
  AuthContext.tsx    # React context for auth state management

Auth Flow

  1. User taps "Connect with Spotify" on the login screen
  2. Supabase OAuth opens Spotify login in a web browser
  3. After authorization, Spotify redirects back to Supabase
  4. Supabase redirects back to the app via deep link (tempr://)
  5. The app extracts the session tokens and stores them
  6. User is automatically routed to the authenticated home screen

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors