Complete Spelling Game Project with Expo and Supabase

I'll provide you with all the essential files for your project, properly structured for an Expo environment with Supabase integration.

Setting Up Supabase for Your Spelling Game

Here's a complete guide to setting up Supabase for your spelling game project:

1. Create a Supabase Account

1. Go to https://supabase.com/ and click "Start your project" or "Sign Up"
2. Sign up using your GitHub account or email
3. Verify your email if needed

2. Create a New Supabase Project

1. Once logged in, click "New Project"
2. Choose an organization (create one if needed)
3. Enter a name for your project (e.g., "dyslexic-spelling-game")
4. Set a secure database password (save this somewhere safe)
5. Choose a region closest to your users
6. Click "Create new project"
7. Wait for your project to be set up (this may take a few minutes)

3. Set Up Database Tables

1. In your Supabase dashboard, go to the "Table Editor" in the left sidebar
2. Click "New Table" to create a new table

3. Create a table called spelling_words with the following columns:

   • id (type: uuid, primary key, default: uuid_generate_v4())
   • word (type: text, not null)
   • difficulty (type: text, not null)
   • image_url (type: text)
   • audio_url (type: text)
   • created_at (type: timestamp with time zone, default: now())
4. Click "Save" to create the table

5. Optionally, create a users table with:

   • id (type: uuid, primary key, default: uuid_generate_v4())
   • score (type: integer, default: 0)
   • last_played (type: timestamp with time zone)

4. Set Up Storage Buckets

1. Go to "Storage" in the left sidebar
2. Click "Create a new bucket"

3. Create a bucket named spelling_images

   • Set it as public (for easy access to images)

4. Create another bucket named spelling_audio

   • Set it as public (for easy access to audio files)

5. Configure Storage Policies

For each bucket, set up a policy to allow public access:

1. Click on the bucket name
2. Go to the "Policies" tab
3. Click "Add Policies"
4. Choose "Create a policy from scratch"

5. For a simple setup, allow full access:

   • Policy name: "Public access"
   • Allowed operations: Select all (SELECT, INSERT, UPDATE, DELETE)
   • Policy definition: true (this allows anyone to access)
6. Click "Save Policy"

6. Get Your API Keys

1. Go to "Project Settings" (gear icon) in the sidebar
2. Click on "API" in the settings menu

3. You'll find:

   • Project URL: Your Supabase URL
   • anon/public key: Your public API key

7. Configure Your React Native App

1. Open utils/supabaseClient.js in your project
2. Replace the placeholder values with your actual Supabase credentials:

8. Add Sample Data Using the Admin Screen

The easiest way to add data is to use the AdminScreen in your app:

1. In your App.jsx, change const [isAdmin, setIsAdmin] = useState(false); to true to access the admin screen
2. Run your app
3. Use the admin interface to add words, images, and audio files
4. Once you've added enough words, change isAdmin back to false to use the game

9. Alternative: Add Sample Data Directly in Supabase

If you prefer, you can add data directly in Supabase:

1. Go to the "Table Editor" and select your spelling_words table
2. Click "Insert" to add a new row

3. Fill in the details:

   • word: e.g., "apple"
   • difficulty: "easy", "medium", or "hard"
   • image_url: URL to an image (you can upload to Storage first, then copy the URL)
   • audio_url: URL to an audio file (you can upload to Storage first, then copy the URL)
4. Click "Save" to add the word

10. Upload Files to Storage

To upload files directly to Supabase Storage:

1. Go to "Storage" in the sidebar
2. Select the appropriate bucket (spelling_images or spelling_audio)
3. Click "Upload" and select your file
4. After uploading, click on the file to view its details
5. Copy the "URL" field - this is what you'll use in your image_url or audio_url fields

11. Test Your Connection

1. Set isAdmin to false in App.jsx
2. Run your app
3. The app should fetch words from your Supabase database and display them in the game

Troubleshooting

If you encounter issues:

1. Connection problems: Double-check your Supabase URL and API key
2. Empty data: Make sure you've added words to your spelling_words table
3. Storage access issues: Verify your storage bucket policies allow public access
4. CORS errors: In Supabase Project Settings > API, ensure your app's domain is in the allowed list

Security Note

The setup described above uses public access for simplicity. For a production app, you should implement proper authentication and more restrictive storage policies to protect your data and resources 1.