BruinBoard
A SvelteKit web application that aggregates UCLA Instagram content into an organized platform
Overview
BruinBoard is a SvelteKit 2.0 web application that aggregates UCLA Instagram content into an organized platform with calendar events, posts, and AI-generated summaries. It serves as a centralized hub for UCLA students to discover campus events and activities from various Instagram accounts.
Key Features
- Calendar view with event extraction from Instagram posts
- Instagram feed aggregation from multiple UCLA accounts
- AI-generated summaries of events and content
- Category-based filtering system
- Responsive design optimized for mobile devices
Design & Structure
BruinBoard uses SvelteKit with a component-based architecture. The application leverages AI to extract event information from Instagram posts and generate summaries. Data is stored in JSON files for simplicity, with a future plan to migrate to a database.
Key Components
- Calendar Component: Month/Week/Day views for events
- Posts Component: Instagram feed display
- Summaries Component: AI-generated content display
- CategoryFilter Component: Filtering mechanism for content
- Navigation Component: Fixed bottom navigation for mobile
Project Structure
The application follows a clean structure with routes for different views (calendar, posts, summaries), components for UI elements, and AI services for data processing. The design emphasizes UCLA branding with appropriate color schemes and responsive layouts.
AI Event Extraction
// Example AI event extraction from Instagram post
import { openai } from './config';
export async function extractEvents(post) {
const prompt = `
Extract event details from this Instagram post caption:
---
${post.caption}
---
If there is an event mentioned, provide the following details in JSON format:
{
"title": "Event title",
"start_time": "YYYY-MM-DD HH:MM:SS",
"end_time": "YYYY-MM-DD HH:MM:SS",
"location": "Location name",
"description": "Brief description"
}
If no event is mentioned, return { "is_event": false }
`;
const response = await openai.createChatCompletion({
model: "gpt-4o",
messages: [{ role: "user", content: prompt }],
temperature: 0.2,
max_tokens: 500
});
try {
const content = response.choices[0].message.content;
return JSON.parse(content);
} catch (error) {
console.error("Failed to parse event data:", error);
return { is_event: false, error: "Failed to parse response" };
}
}Database Schema
BruinBoard currently uses JSON files for data storage, with a planned migration to a database. The schema below represents the planned database structure for storing Instagram accounts, posts, events, and AI-generated summaries.
Database Schema
schools
Schools with their configuration and Instagram accounts
Relationships:
- posts.school_id → id
- events.school_id → id
posts
Instagram posts collected from tracked accounts
Relationships:
- school_id → schools.id
events
Events extracted from Instagram posts using AI
Relationships:
- school_id → schools.id
Technologies
Frontend
- SvelteKit 5 with runes for state management
- TailwindCSS for styling
- Responsive layout using viewport units
Backend
- Python scripts for Instagram scraping
- OpenAI API for event extraction and summarization
- JSON data storage (future migration to database)
AI
- GPT-4o-mini for event extraction from post captions
- AI-powered summarization of content
- Natural language processing for date extraction
- Multi-stage AI processing pipeline for data refinement
- Event consolidation to remove duplicates and merge related events
Tools
- Instagram API (via scraping tools)
- Date handling with timezone support
- Calendar visualization libraries
AI Processing Pipeline
BruinBoard uses a sophisticated AI pipeline to extract, process, and consolidate event data from Instagram posts:
1. Data Collection
Automated scraping of Instagram accounts for posts and media
2. Event Extraction
GPT-4o-mini processes post captions to extract structured event data
3. Event Consolidation
AI-powered deduplication and merging of related events
Prompt Engineering
Sophisticated prompt engineering to maximize extraction accuracy and minimize repetition
API Endpoints
BruinBoard provides API endpoints for accessing and managing data:
Database Access
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/db/read | Execute read-only SQL queries against the database (SELECT only) |
| POST | /api/db/write | Execute write operations against the database (requires API key) |
Views
| Method | Endpoint | Description |
|---|---|---|
| GET | /[school]/calendar | Calendar view of events extracted from Instagram posts |
| GET | /[school]/posts | Instagram posts feed from tracked accounts |
| GET | /[school]/summaries | AI-generated summaries of events and content |
Future Directions
Roadmap
- Event date verification system
- Multi-day event support
- Fine-tuning GPT to process events better
- Search functionality across all content
- User accounts with personalized feeds
- Native Mobile Application via Capacitor
Challenges
- Ensuring accurate event extraction from unstructured text
- Handling Instagram API limitations and changes
- Managing data freshness with periodic scraping
- Optimizing AI processing costs
Opportunities
- Expanding to other universities and organizations
- Developing a mobile application
- Creating an event recommendation system
- Integrating with other campus information systems