Competitor Tweet Tracker

\n \n

Daily Tweet Mentions

\n \n

Total Tweet Mentions

\n\n \n\n",[18,66],"8fb5b488-4087-11f0-97d4-76b3cceeab13",["D",1748961142424],"// Function to generate random colors for chart\nfunction generateColors(count) {\n const colors = [\n '#4299E1', '#48BB78', '#F6AD55', '#F56565', '#9F7AEA',\n '#ED64A6', '#38B2AC', '#ECC94B', '#667EEA', '#FC8181'\n ];\n \n // If we need more colors than in our predefined list, generate random ones\n if (count > colors.length) {\n for (let i = colors.length; i < count; i++) {\n const r = Math.floor(Math.random() * 255);\n const g = Math.floor(Math.random() * 255);\n const b = Math.floor(Math.random() * 255);\n colors.push(`rgb(${r}, ${g}, ${b})`);\n }\n }\n \n return colors.slice(0, count);\n}\n\n// Fetch data and render charts\nasync function renderCharts() {\n try {\n const response = await fetch('/api/data');\n const data = await response.json();\n console.log({ data });\n \n renderDailyChart(data.dailyCounts);\n renderTotalChart(data.totalCounts);\n } catch (error) {\n console.error('Error fetching data:', error);\n document.body.innerHTML += '

Error loading data. Please try again later.

';\n }\n}\n\n// Render daily tweet chart\nfunction renderDailyChart(dailyData) {\n if (!dailyData || dailyData.length === 0) {\n document.getElementById('dailyChart').parentNode.innerHTML = '

No data available yet.

';\n return;\n }\n \n // Process data for chart\n const days = [...new Set(dailyData.map(item => item.day))].sort();\n const competitors = [...new Set(dailyData.map(item => item.competitor))];\n const colors = generateColors(competitors.length);\n \n // Create datasets\n const datasets = competitors.map((competitor, index) => {\n const competitorData = days.map(day => {\n const match = dailyData.find(item => item.day === day && item.competitor === competitor);\n return match ? match.count : 0;\n });\n \n return {\n label: competitor,\n data: competitorData,\n backgroundColor: colors[index],\n borderColor: colors[index],\n borderWidth: 2,\n tension: 0.1,\n fill: false\n };\n });\n \n // Create chart\n new Chart(document.getElementById('dailyChart'), {\n type: 'line',\n data: {\n labels: days,\n datasets: datasets\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: 'Tweet Count'\n }\n },\n x: {\n title: {\n display: true,\n text: 'Date'\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n },\n tooltip: {\n mode: 'index',\n intersect: false\n }\n }\n }\n });\n}\n\n// Render total tweet chart\nfunction renderTotalChart(totalData) {\n if (!totalData || totalData.length === 0) {\n document.getElementById('totalChart').parentNode.innerHTML = '

No data available yet.

';\n return;\n }\n \n // Sort by count descending\n totalData.sort((a, b) => b.count - a.count);\n \n const competitors = totalData.map(item => item.competitor);\n const counts = totalData.map(item => item.count);\n const colors = generateColors(competitors.length);\n \n // Create chart\n new Chart(document.getElementById('totalChart'), {\n type: 'bar',\n data: {\n labels: competitors,\n datasets: [{\n label: 'Total Tweets',\n data: counts,\n backgroundColor: colors,\n borderColor: colors,\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n y: {\n beginAtZero: true,\n title: {\n display: true,\n text: 'Tweet Count'\n }\n },\n x: {\n title: {\n display: true,\n text: 'Competitor'\n }\n }\n },\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n}\n\n// Initialize charts when page loads\ndocument.addEventListener('DOMContentLoaded', renderCharts);",[18,80],"d627d3f6-4087-11f0-8470-76b3cceeab13",["D",1748961260610],"# Views Directory\n\nThis directory contains the frontend HTML and JavaScript files for the Competitor Tweet Tracker.\n\n## Files\n\n- **`index.html`**: Main HTML template with chart containers and styling\n- **`charts.js`**: JavaScript for fetching data and rendering Chart.js visualizations\n\n## Features\n\n- Responsive design using TailwindCSS\n- Interactive charts using Chart.js\n- Automatic color generation for multiple competitors\n- Error handling for data loading failures\n- Real-time data fetching from the API\n\n## Chart Types\n\n1. **Daily Chart**: Line chart showing tweet mentions over time for each competitor\n2. **Total Chart**: Bar chart showing total tweet counts per competitor\n\nThe charts automatically handle empty data states and dynamically adjust to the number of competitors being tracked.",[18,91],"pulls","branches","forks","envVars",{"_207":111,"_209":26},"connections",{"_207":26,"_208":26},"count","unfilledCount","emptyCount",{"_35":278,"_13":277,"_64":271,"_45":-5,"_37":38,"_179":272,"_180":24,"_39":279,"_41":26,"_67":93,"_182":-5,"_68":30,"_183":-5,"_228":280,"_17":281},{"_35":268,"_13":269,"_64":270,"_45":271,"_37":38,"_179":272,"_180":24,"_39":273,"_41":26,"_67":81,"_182":274,"_68":30,"_183":-5,"_228":275,"_17":276},{"_35":178,"_13":18,"_64":92,"_45":-5,"_37":38,"_179":42,"_180":24,"_39":265,"_41":26,"_67":93,"_182":-5,"_68":30,"_183":-5,"_228":266,"_17":267},{"_35":196,"_13":91,"_64":90,"_45":92,"_37":38,"_179":84,"_180":24,"_39":262,"_41":26,"_67":21,"_182":198,"_68":30,"_183":-5,"_228":263,"_17":264},{"_35":192,"_13":80,"_64":79,"_45":92,"_37":38,"_179":74,"_180":24,"_39":259,"_41":26,"_67":81,"_182":194,"_68":30,"_183":-5,"_228":260,"_17":261},{"_35":188,"_13":66,"_64":65,"_45":92,"_37":38,"_179":42,"_180":24,"_39":256,"_41":26,"_67":21,"_182":190,"_68":30,"_183":-5,"_228":257,"_17":258},{"_35":248,"_13":91,"_64":249,"_45":-5,"_37":38,"_179":250,"_180":24,"_39":251,"_41":252,"_67":21,"_182":253,"_68":30,"_183":-5,"_228":254,"_17":255},{"_35":239,"_13":240,"_64":106,"_45":-5,"_37":38,"_179":241,"_180":24,"_39":242,"_41":243,"_67":244,"_182":245,"_68":30,"_183":-5,"_228":246,"_17":247},{"_35":231,"_13":232,"_64":233,"_45":-5,"_37":38,"_179":234,"_180":24,"_39":235,"_41":26,"_67":81,"_182":236,"_68":30,"_183":-5,"_228":237,"_17":238},{"_35":220,"_13":221,"_64":222,"_45":-5,"_37":38,"_179":223,"_180":24,"_39":224,"_41":225,"_67":226,"_182":227,"_68":30,"_183":-5,"_228":229,"_17":230},"bd537f6a-4087-11f0-8fd7-76b3cceeab13","main.tsx","573aad4c-19b9-4099-aa1a-6ca58ff30ffe",24,["D",1748961218953],9,"interval","import { twitterSearch } from \"https://esm.town/v/stevekrouse/twitterSearch\";\nimport { initDb, storeTweet } from \"./db.ts\";\nimport { getCompetitors, validateCompetitors } from \"./utils/competitors.ts\";\n\n// This function runs every hour via cron\nexport default async function({ lastRunAt }: Interval) {\n console.log(`Starting competitor tweet tracking at ${new Date().toISOString()}`);\n\n // Validate environment variables\n validateCompetitors();\n\n // Initialize the database\n await initDb();\n\n // Get competitors from environment variable\n const competitors = getCompetitors();\n console.log(`Tracking ${competitors.length} competitors: ${competitors.join(\", \")}`);\n\n // Track tweets for each competitor\n for (const competitor of competitors) {\n await trackCompetitorTweets(competitor, lastRunAt);\n }\n\n console.log(`Completed competitor tweet tracking at ${new Date().toISOString()}`);\n}\n\nasync function trackCompetitorTweets(competitor: string, lastRunAt: Date | undefined) {\n try {\n console.log(`Tracking tweets for ${competitor}`);\n\n // Create a query for this competitor\n const query = `\"${competitor}\" -is:retweet`;\n\n // Search Twitter\n const bearerToken = Deno.env.get(\"TWITTER_BEARER_TOKEN\");\n if (!bearerToken) throw new Error(\"TWITTER_BEARER_TOKEN is required\");\n const results = await twitterSearch({\n query,\n start_time: lastRunAt,\n bearerToken,\n });\n\n if (!results.length) {\n console.debug(`No new tweets for ${competitor} since ${lastRunAt}`);\n return;\n }\n\n console.log(`Found ${results.length} tweets for ${competitor}`);\n\n // Store tweets in the database (filtering out retweets again just to be safe)\n let storedCount = 0;\n for (const tweet of results.filter(result => !result.is_retweet)) {\n const stored = await storeTweet({\n id: tweet.id,\n competitor: competitor,\n author_username: tweet.author_username,\n created_at: tweet!.created_at,\n });\n\n if (stored) storedCount++;\n }\n\n console.log(`Stored ${storedCount} new tweets for ${competitor}`);\n } catch (error) {\n console.error(`Error tracking tweets for ${competitor}:`, error);\n }\n}","children",[],[221],"b1596ce6-34ee-11f0-ab9e-9e149126039e","db.ts","b1596dae-34ee-11f0-ab9e-9e149126039e",3,["D",1747686023074],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table to store tweets mentioning competitors\nconst TWEETS_TABLE = 'competitor_tweets';\n\n// Initialize the database\nexport async function initDb() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TWEETS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n tweet_id TEXT UNIQUE NOT NULL,\n competitor TEXT NOT NULL,\n author_username TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`);\n}\n\n// Store a tweet in the database\nexport async function storeTweet(tweet: {\n id: string;\n competitor: string;\n author_username: string;\n created_at: string;\n}) {\n try {\n await sqlite.execute(\n `INSERT INTO ${TWEETS_TABLE} (tweet_id, competitor, author_username, created_at)\n VALUES (?, ?, ?, ?)`,\n [tweet.id, tweet.competitor, tweet.author_username, tweet.created_at]\n );\n return true;\n } catch (error) {\n // If the tweet already exists (due to UNIQUE constraint), this will fail silently\n if (error.message.includes('UNIQUE constraint failed')) {\n return false;\n }\n throw error;\n }\n}\n\n// Get tweet counts per competitor per day\nexport async function getTweetCountsByDay() {\n const result = await sqlite.execute(\n `SELECT \n competitor,\n date(created_at) as day,\n COUNT(DISTINCT tweet_id) as count\n FROM ${TWEETS_TABLE}\n GROUP BY competitor, day\n ORDER BY day DESC, count DESC`\n );\n \n return result;\n}\n\n// Get the total tweet count for each competitor\nexport async function getTotalTweetCounts() {\n const result = await sqlite.execute(\n `SELECT \n competitor,\n COUNT(DISTINCT tweet_id) as count\n FROM ${TWEETS_TABLE}\n GROUP BY competitor\n ORDER BY count DESC`\n );\n \n return result;\n}",[],[232],"acb8e50a-4087-11f0-90dc-76b3cceeab13","api.ts",22,["D",1748961191095],4,"http","import { getTotalTweetCounts, getTweetCountsByDay, initDb } from \"./db.ts\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nexport default async function(req: Request) {\n // Initialize the database\n await initDb();\n\n const url = new URL(req.url);\n\n // API endpoint to get tweet data as JSON\n if (url.pathname === \"/api/data\") {\n const dailyCounts = await getTweetCountsByDay();\n const totalCounts = await getTotalTweetCounts();\n\n return new Response(\n JSON.stringify({ dailyCounts, totalCounts }),\n {\n headers: {\n \"Content-Type\": \"application/json\",\n \"Cache-Control\": \"no-cache\",\n },\n },\n );\n }\n\n // Serve static files from views directory\n if (url.pathname.startsWith(\"/views/\")) {\n try {\n const filePath = url.pathname;\n const fileContent = await readFile(filePath, import.meta.url);\n \n // Determine content type based on file extension\n const contentType = filePath.endsWith(\".js\") ? \"application/javascript\" : \n filePath.endsWith(\".css\") ? \"text/css\" : \n \"text/plain\";\n \n return new Response(fileContent, {\n headers: {\n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=3600\", // Cache static files for 1 hour\n },\n });\n } catch (error) {\n return new Response(\"File not found\", { status: 404 });\n }\n }\n\n // Serve the main HTML page\n return serveHtmlPage();\n}\n\nasync function serveHtmlPage() {\n try {\n const html = await readFile(\"/views/index.html\", import.meta.url);\n \n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n } catch (error) {\n console.error(\"Error serving HTML page:\", error);\n return new Response(\"Error loading page\", { status: 500 });\n }\n}",[],[240],"c85bd01a-4087-11f0-98e8-76b3cceeab13","623a97b9-7fbb-4e77-b25c-572e68c9eb26",25,["D",1748961237459],6,"# Competitor Tweet Tracker\n\nThis Val Town project tracks tweets mentioning competitor URLs and visualizes the data in charts.\n\n## Project Structure\n\n```\n├── main.tsx (cron) # Hourly cron job to collect tweet data\n├── api.ts (http) # HTTP API and static file server\n├── db.ts # Database operations and schema\n├── utils/\n│ └── competitors.ts # Competitor configuration utilities\n└── views/\n ├── index.html # Main HTML template\n └── charts.js # Chart rendering JavaScript\n```\n\n## Environment Variables\n\n### Required\n\n- **`TWITTER_BEARER_TOKEN`**: Your Twitter API bearer token for searching tweets\n\n### Optional\n\n- **`COMPETITORS`**: Comma-separated list of competitor hostnames to track (default: `val.town`)\n \n Examples:\n - `val.town` (default)\n - `val.town,poe.com,shapes.inc`\n - `poe.com,character.ai,pi.ai,coze.com,gumloop.com,n8n.io`\n\n## Popular Competitor Suggestions\n\nHere are some popular competitors you might want to track:\n```\nval.town,poe.com,character.ai,pi.ai,coze.com,gumloop.com,n8n.io,shapes.inc,manus.im,genspark.ai\n```\n\n## Components\n\n1. **Cron Job** (`main.tsx`): Runs hourly to search Twitter for mentions of competitor URLs and stores the results in a database.\n2. **Database** (`db.ts`): Uses SQLite to store tweet data and provides functions to query the data.\n3. **Web Interface** (`api.ts`): Serves the HTML page and provides API endpoints for chart data.\n4. **Views** (`views/`): Contains the HTML template and JavaScript for rendering charts.\n\n## How to Use\n\n1. Set up the `TWITTER_BEARER_TOKEN` environment variable with your Twitter API bearer token.\n2. Optionally set the `COMPETITORS` environment variable with your list of competitors to track.\n3. The cron job will automatically run every hour to collect data.\n4. Visit the HTTP endpoint to view the charts showing tweet counts.\n\n## Features\n\n- Tracks tweets mentioning competitor URLs\n- Configurable competitor list via environment variables\n- Avoids double-counting tweets by storing unique tweet IDs\n- Visualizes data in daily trend charts and total count charts\n- Automatically updates as new data is collected\n- Separated HTML/CSS/JS from API logic for better maintainability",[],[91],["D",1748961118991],[],[18,66],["D",1748961142424],[],[18,80],["D",1748961260610],[],[18,91],["D",1748961118991],[213,214,215],[18],"94f557c8-4087-11f0-a555-76b3cceeab13","competitors.ts","94f5589a-4087-11f0-a555-76b3cceeab13","21020d56-b425-451f-b850-6aab22a73c88",20,["D",1748961151227],"/**\n * Parse competitors from environment variable\n * Expected format: comma-separated list of hostnames\n * Example: \"val.town,poe.com,shapes.inc\"\n */\nexport function getCompetitors(): string[] {\n const competitorsEnv = Deno.env.get(\"COMPETITORS\");\n \n if (!competitorsEnv) {\n // Default to val.town if no competitors are specified\n return [\"val.town\"];\n }\n \n return competitorsEnv\n .split(\",\")\n .map(competitor => competitor.trim())\n .filter(competitor => competitor.length > 0);\n}\n\n/**\n * Validate that competitors list is not empty\n */\nexport function validateCompetitors(): void {\n const competitors = getCompetitors();\n if (competitors.length === 0) {\n throw new Error(\"No competitors specified. Please set the COMPETITORS environment variable.\");\n }\n}",[],[277,269],"utils","94f561fa-4087-11f0-a555-76b3cceeab13",["D",1748961151227],[211],[277],["D",1747685840126],{"_11":12,"_146":71},{"_11":12,"_142":-5,"_70":71,"_31":69,"_143":144,"_145":30},{"_41":84,"_13":16,"_35":38,"_131":95,"_132":133,"_134":135,"_136":100,"_137":138,"_139":44,"_140":14,"_141":12},"ctx",{"_54":-5,"_167":319,"_320":321,"_322":323,"_324":30,"_325":30,"_326":30,"_327":24,"_328":-5,"_329":-7,"_330":-7,"_331":26,"_332":30,"_333":30,"_334":-5,"_335":30,"_336":30,"_337":30,"_338":-5},"ENV",{"_290":291,"_292":293,"_294":16,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · views