Beacon

Live Demo

Beacon is a modern humanitarian aid platform that bridges the gap between local community needs and global support. By leveraging AI and direct community connections, Beacon ensures aid reaches those who need it most efficiently.

✨ Unique Value Proposition

• Verified Community Needs: Direct requests from verified local partners across Southeast Asia.
• Local Language First: Leveraging SEA-LION (Southeast Asian Languages in One Network) LLM for accurate, culturally-aware translation between local dialects and English.
• AI-Powered Insights: Uses OpenAI's ChatGPT 5.2 to analyze request trends, summarize donor impact, and identify critical funding gaps.
• Smart Request Submission: Donors or community leaders can snap a photo of supplies, and Google Gemini 3 instantly identifies items, categorizes them, and assesses urgency.
• Premium Neumorphic Design: A modern, tactile user interface designed for trust and engagement.

🛠️ Technology Stack

Frontend

• Framework: Vue.js 3 (Composition API, <script setup>)
• Build Tool: Vite
• Styling: Tailwind CSS 4 (Utility-first, responsive)
• Router: Vue Router 4
• Charts: Chart.js with vue-chartjs
• Icons: Material Icons Round

Backend & AI

• Database & Auth: Supabase
• Edge Functions: Supabase Edge Functions (Deno runtime).
• Translation LLM: SEA-LION for Southeast Asian languages.
• Reasoning LLM: OpenAI ChatGPT 5.2 for insights and data analysis.
• Vision AI: Google Gemini 3 for multimodal image analysis.
• Hosting: Firebase Hosting

🚀 Key Features

1. Community Requests Feed

• Browse verified aid requests.
• AI Insights Dashboard: View real-time data summaries on funding gaps and critical needs powered by ChatGPT 5.2.
• Instant Translation: Seamlessly translate requests using SEA-LION.

2. Smart "New Request" Form

• Multimodal Input: Upload an image or take a photo directly within the app.
• AI Auto-Fill: Google Gemini 3 analyzes the image to automatically extract:
  • Title
  • Detailed Description
  • Category (Food, Medical, Shelter, etc.)
  • Urgency Level
• Interactive UI: Drag-and-drop zone, camera modal with overlay guides, and neumorphic form inputs.

📦 Project Setup

Prerequisites

• Node.js (v20+)
• npm
• Supabase CLI (for Edge Functions)
• Firebase CLI (for deployment)

Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd Beacon

2. Install dependencies:

   npm install

3. Environment Setup:

   • Create a .env file (if needing local secrets, though Supabase handles most).
   • Setup Supabase project and link it.

Development

Start the local development server:

npm run dev

The app will run at http://localhost:5173.

Supabase Edge Functions

This project uses Edge Functions to securely communicate with the Gemini API.

1. Set your Gemini API Key:

   supabase secrets set GEMINI_API_KEY=your_gemini_api_key

2. Deploy Functions:

   supabase functions deploy gemini-extract --no-verify-jwt

☁️ Deployment

The project is hosted on Firebase Hosting at beacon-18918.web.app.

1. Build the project:

   npm run build

2. Deploy:

   firebase deploy

📄 License

MIT License. See LICENSE for more information.