ranger-app/README.md

Ranger Portal

This portal template is populated from .env.local

The automation works like this:

1. Google form - https://forms.gle/kFYjiegnsRDNscja6

Submission triggers the code to run in this GAS app

2. Google Apps Script - https://script.google.com/u/3/home/projects/18VXOKc_7bvOCCUoif6LMt5tQj7NLqwdmn75eXVc0YxUsYXQ1u3KjR9SA

Running this script hits http://143.198.37.25:3000/deploy with the relevant data

3. Ranger Backend - https://github.com/mito-systems/ranger-backend

Has two endpoints:

• /deploy, used above, which publishes the relevant AppRecords to the Laconic Registry to trigger an app deployment
• /publishRecord, used by this portal app to publish PhotoRecords to the Laconic Registry: https://github.com/mito-systems/ranger-app/blob/main/src/services/laconicService.ts#L42

User types

Portal Creator

Anyone who wants a custom portal can use the Google form and receive an e-mail with a link to share as far and wide as they'd like.

End users

Receive links to custom portals and are invited to add data by uploading photographs

Data consumers

Query a data set from any custom portal

Social Login Setup

This application supports social login with Google and GitHub. To set up social login, follow these steps:

1. Set up environment variables: Update the following variables in your .env.local file:

   # Authentication
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-nextauth-secret-key-at-least-32-chars
   
   # OAuth Providers
   GOOGLE_CLIENT_ID=your-google-client-id
   GOOGLE_CLIENT_SECRET=your-google-client-secret
   
   GITHUB_CLIENT_ID=your-github-client-id
   GITHUB_CLIENT_SECRET=your-github-client-secret
   

2. Create OAuth applications:

   For Google:

   • Go to Google Cloud Console
   • Create a new project or select an existing one
   • Navigate to "APIs & Services" > "Credentials"
   • Click "Create Credentials" > "OAuth client ID"
   • Select "Web application" as the application type
   • Add your app's URL to the authorized JavaScript origins (e.g., http://localhost:3000)
   • Add your app's callback URL to the authorized redirect URIs (e.g., http://localhost:3000/api/auth/callback/google)
   • Copy the Client ID and Client Secret to your .env.local file

   For GitHub:

   • Go to GitHub Developer Settings
   • Click on "New OAuth App"
   • Fill in the application details
   • Set the Authorization callback URL to your app's callback URL (e.g., http://localhost:3000/api/auth/callback/github)
   • Copy the Client ID and Client Secret to your .env.local file

3. Generate a secure NEXTAUTH_SECRET: Run the following command to generate a secure secret:

   openssl rand -base64 32
   

   Copy the output to your .env.local file as the NEXTAUTH_SECRET value.

4. Install required packages:

   npm install next-auth@4.22.1
   

5. Restart your application:

   npm run dev
   

Points System Setup with Supabase

This application uses Supabase to track user points for contributing wildlife images.

Setup Instructions

1. Create a Supabase account at https://supabase.com
2. Create a new project
3. Go to the SQL Editor and execute the SQL in supabase-schema.sql to create the necessary tables and functions
4. Get your project URL and anon key from Settings > API
5. Add these values to your .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Points System Features

• Users earn 1 point for each successful wildlife image upload
• Points are displayed on the "My Points" page which shows:
  • Total points accumulated
  • A history of all contributions with images
  • Details about each uploaded image
• The system prevents duplicate image uploads and point awards
• Only authenticated users can earn and view points