/** @jsxImportSource https://esm.sh/react */ import { csvParse } from "https://esm.sh/d3-dsv@3.0.1"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface YCCompany { Company: string; Website: string; Size: string; Sector: string; Batch: string; Status: string; Tags: string; } const DEFAULT_CSV = `email,name patrick@stripe.com,Patrick Collison brian@airbnb.com,Brian Chesky drew@dropbox.com,Drew Houston sam@openai.com,Sam Altman tim@apple.com,Tim Cook jeff@amazon.com,Jeff Bezos `; function Hero() { return (

YC Company Employee Finder

Discover Y Combinator company employees in your user list

); } function HowItWorks() { return (

How It Works

Upload your CSV file or paste CSV data containing user emails under a column named "email"
We extract email domains from your user list
We match these domains against our database of YC companies (sourced{" "} here , cached here)
You get a detailed report of matches, enriched with YC company data
This is done entirely client-side. None of your data hits our servers or is stored

); } function App() { const [ycCompanies, setYcCompanies] = useState([]); const [mergedData, setMergedData] = useState([]); const [debugInfo, setDebugInfo] = useState(""); const [isLoading, setIsLoading] = useState(false); const [showDebug, setShowDebug] = useState(false); const [csvText, setCsvText] = useState(DEFAULT_CSV); useEffect(() => { const fetchYCCompanies = async () => { const storedCompanies = localStorage.getItem("ycCompanies"); if (storedCompanies) { const companies = JSON.parse(storedCompanies); setYcCompanies(companies); setDebugInfo(prevInfo => prevInfo + `\nLoaded ${companies.length} companies from localStorage`); } else { const response = await fetch("/companies.json"); const companies = await response.json(); setYcCompanies(companies); localStorage.setItem("ycCompanies", JSON.stringify(companies)); setDebugInfo(prevInfo => prevInfo + `\nFetched ${companies.length} companies from server and stored in localStorage` ); } }; fetchYCCompanies(); }, []); const handleFileUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { setIsLoading(true); setDebugInfo(prevInfo => prevInfo + `\nFile selected: ${file.name}`); const reader = new FileReader(); reader.onload = (e) => { const csv = e.target?.result as string; setCsvText(csv); setDebugInfo(prevInfo => prevInfo + `\nCSV loaded, length: ${csv.length} characters`); }; reader.readAsText(file); } }; const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); setIsLoading(true); processCSV(csvText); }; const processCSV = (csv: string) => { const records = csvParse(csv); setDebugInfo(prevInfo => prevInfo + `\nParsed CSV, ${records.length} records found`); let matchCount = 0; const processedData = records.map((record: any) => { if (!record.email) { setDebugInfo(prevInfo => prevInfo + `\nSkipped record: No email field`); return null; } const domain = extractDomain(record.email); setDebugInfo(prevInfo => prevInfo + `\nProcessing email: ${record.email}, extracted domain: ${domain}`); const matchedCompany = findMatchingCompany(domain); if (matchedCompany) { matchCount++; setDebugInfo(prevInfo => prevInfo + `\nMatched company: ${matchedCompany.Company}`); return { ...record, ...matchedCompany }; } setDebugInfo(prevInfo => prevInfo + `\nNo match found for domain: ${domain}`); return null; }).filter(Boolean); setDebugInfo(prevInfo => prevInfo + `\nProcessing complete. ${matchCount} matches found out of ${records.length} records` ); setMergedData(processedData); setIsLoading(false); }; const extractDomain = (email: string) => { const domain = email.split("@")[1]; return domain.replace(/^(https?:\/\/)?(www\.)?/, "").replace(/\/$/, ""); }; const findMatchingCompany = (domain: string) => { return ycCompanies.find(company => { const companyDomain = company.Website.replace(/^(https?:\/\/)?(www\.)?/, "").replace(/\/$/, ""); return companyDomain === domain; }); }; const toggleDebug = () => { setShowDebug(!showDebug); }; const debugButtonStyle = { position: "fixed" as const, bottom: "20px", right: "20px", zIndex: 1000, }; return (

Upload Your CSV or Paste CSV Data

setCsvText(e.target.value)}
            placeholder="Paste your CSV data here"
            rows={10}
          />
          <button type="submit">Process CSV</button>
        </form>
        {isLoading && <div className="loader">Processing...</div>}
      </div>

{mergedData.length > 0 && (
        <div className="results-section">
          <h2>Results</h2>
          <p>{mergedData.length} YC company employees found in your list!</p>
          <table>
            <thead>
              <tr>
                {Object.keys(mergedData[0]).map(key => <th key={key}>{key}</th>)}
              </tr>
            </thead>
            <tbody>
              {mergedData.map((row, index) => (
                <tr key={index}>
                  {Object.values(row).map((value: any, cellIndex) => <td key={cellIndex}>{value}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

<button onClick={toggleDebug} style={debugButtonStyle}>
        {showDebug ? "Hide" : "Show"} Debug Info
      </button>

<div className="debug-section" style={{ display: showDebug ? "block" : "none" }}>
        <div className="debug-content">
          <h2>Debug Information</h2>
          <h3>YC Companies Data (First 5 Rows)</h3>
          <pre>{JSON.stringify(ycCompanies.slice(0, 5), null, 2)}</pre>
          <h3>Processing Log</h3>
          <pre>{debugInfo}</pre>
        </div>
      </div>

<footer>
        <p>
          <small>
            View source on <a href={import.meta.url.replace("esm.town", "val.town")} target="_top">Val Town</a>
          </small>
        </p>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")!).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  const companies = await fetch("https://stevekrouse-yc_database.web.val.run").then(res => res.json());
  const url = new URL(request.url);
  if (url.pathname === "/companies.json") {
    return new Response(JSON.stringify(companies), {
      headers: { "content-type": "application/json" },
    });
  }

return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>YC Company Employee Finder</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "content-type": "text/html" },
    },
  );
}

const css = `
:root {
  --primary-color: #ff6600;
  --secondary-color: #2c3e50;
  --background-color: #f8f9fa;
  --text-color: #333;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.hero {
  background-color: var(--primary-color);
  color: white;
  padding: 40px 20px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 30px;
}

.hero h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2em;
  max-width: 600px;
  margin: 0 auto;
}

.how-it-works {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.how-it-works h2 {
  color: var(--secondary-color);
  margin-bottom: 20px;
}

.how-it-works ol {
  padding-left: 20px;
}

.how-it-works li {
  margin-bottom: 10px;
}

.upload-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.upload-section h2 {
  color: var(--secondary-color);
  margin-bottom: 20px;
}

input[type="file"] {
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  width: 100%;
}

textarea {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border: 2px solid var(--primary-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
}

.loader {
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
  margin-top: 20px;
}

.results-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  overflow-x: auto;
}

.results-section h2 {
  color: var(--secondary-color);
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

th {
  background-color: var(--primary-color);
  color: white;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
  transition: background-color 0.3s ease;
}

.debug-section {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  margin-bottom: 30px;
}

.debug-section h2, .debug-section h3 {
  color: var(--secondary-color);
  margin-bottom: 20px;
}

.debug-content {
  max-height: 500px;
  overflow-y: auto;
}

pre {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
}

footer {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  background-color: var(--secondary-color);
  color: white;
  border-radius: 8px;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

button {
  background-color: var(--secondary-color);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #34495e;
}
`;</article></body></html>

yc_finder