First things first, log into your Asana dashboard. Pick an existing project that you want to enhance with Supabase's database support. Make sure this project has some tasks in it, as we'll need them for our demo later on.

Next up, create an account on Supabase. Once you're all signed up, head over to the Supabase dashboard and create a new project. This will be our main hub for linking Asana with Supabase.

To connect Asana with Supabase, you'll need an access token. Click on your user icon in the top right corner of Asana's dashboard, then go to 'My Profile Settings'. Switch to the 'Apps' tab and find 'Manage Developer Apps'. Here, you can generate your 'Personal Access Token'. Make sure to save it somewhere safe, because you won't be able to see it again once you refresh the page.

In the Supabase dashboard, go to the 'Settings' page of your new project. Click on the 'API' section and note down the 'Database URL' and 'Anon Key'. We'll need these later.

Now, create a new .env file in the root of your project directory. Add these lines to the file:

• REACT_APP_SUPABASE_URL= “{Supabase URL}”
• REACT_APP_SUPABASE_ANON_KEY= “{Supabase Anon Key}”
• REACT_APP_ASANA_ACCESS_TOKEN= “{Asana Personal Access Token}”

Replace the placeholders in curly braces {} with the actual values you got from the previous steps. Save and close the .env file.

To see if everything's working, run npm start in the root of your project directory. If you've set everything up correctly, you should see Asana's task stats showing up in your Supabase table. Any changes you make to tasks in Asana—whether adding, modifying, or deleting—should automatically update in Supabase.