'use client'
import { useMemo, useState, useEffect, useRef } from "react";
import ReCAPTCHA from "react-google-recaptcha";
// ==================================================================
// Config (supports Next.js & Vite safely at runtime)
// ------------------------------------------------------------------
const viteEnv: any = typeof import.meta !== "undefined" ? (import.meta as any).env : undefined;
const nextEnv: any = typeof process !== "undefined" ? (process as any).env : undefined;
const SUBMIT_URL: string =
(viteEnv && viteEnv.VITE_SUBMIT_URL) ||
(nextEnv && nextEnv.NEXT_PUBLIC_SUBMIT_URL) ||
"https://example.com/api/rare-disease/submit"; // TODO: replace with prod
const RECAPTCHA_SITE_KEY: string =
(viteEnv && viteEnv.VITE_RECAPTCHA_SITE_KEY) ||
(nextEnv && nextEnv.NEXT_PUBLIC_RECAPTCHA_SITE_KEY) ||
""; // must be set for live submit
// ==================================================================
// Utils
// ------------------------------------------------------------------
function countWords(text: string): number {
const t = text.trim();
return t ? t.split(/\s+/).length : 0;
}
function nowYear() {
try {
return new Date().getFullYear();
} catch {
return 2025;
}
}
function useQueryFlag(name: string) {
const [flag, setFlag] = useState(false);
useEffect(() => {
try {
const sp = new URLSearchParams(window.location.search);
setFlag(sp.has(name));
} catch {
setFlag(false);
}
}, [name]);
return flag;
}
// ==================================================================
// Page
// ------------------------------------------------------------------
export default function RareDiseaseChallengePage() {
const showTests = useQueryFlag("tests");
return (
);
}
function TopNav() {
const [open, setOpen] = useState(false);
return (
{open && (
)}
);
}
function Hero() {
return (
);
}
function HeroCard() {
const bullets = [
{ title: "Who applies", body: "AI engineers, clinicians, researchers, patient orgs, and builders." },
{ title: "Focus", body: "High‑impact ideas for neglected and understudied rare diseases." },
{ title: "Entry requirement", body: "A 500‑word essay. Clear vision. Realistic plan. Demonstrated commitment." },
];
return (
);
}
function HowItWorks() {
const steps = [
{
title: "Write your essay (500 words)",
body: "Explain the rare disease focus, the problem to solve, your proposed AI approach, team skills, and expected impact.",
},
{
title: "Shortlisting",
body: "We select standout essays for interviews and due diligence on feasibility and patient impact.",
},
{
title: "Build sprint",
body: "Teams join a focused sprint with mentors and domain experts to validate approach and deliver a proof‑of‑concept.",
},
{
title: "Demo day",
body: "Show results to clinicians, advocates, and partners. Top teams advance within the Santa Rosa project.",
},
];
const [active, setActive] = useState(0);
useEffect(() => {
const id = setInterval(() => setActive((a) => (a + 1) % steps.length), 5000);
return () => clearInterval(id);
}, []);
return (
);
}
function Tracks() {
const tracks = [
{
name: "Early Diagnosis & Screening",
desc: "Models and tools that identify rare diseases earlier from limited data, symptoms, or imaging.",
tag: "Diagnostic AI",
},
{
name: "Therapeutic Discovery & Repurposing",
desc: "Computational discovery and repurposing strategies to accelerate treatment options.",
tag: "Drug/Target AI",
},
{
name: "Patient Support & Care Navigation",
desc: "Assistive agents that streamline care coordination, trials matching, or at‑home monitoring.",
tag: "Assistive Tools",
},
{
name: "Open Data & Benchmarks",
desc: "Curate/standardize datasets and challenge tasks to catalyze rare disease research.",
tag: "Data Commons",
},
];
const [tab, setTab] = useState(0);
return (
);
}
function JudgingCriteria() {
const criteria = [
{ name: "Impact", desc: "Clear potential to improve outcomes for patients with rare diseases." },
{ name: "Feasibility", desc: "Practical scope with a credible plan and needed expertise." },
{ name: "Innovation", desc: "Novel ideas, models, or data that push the field forward." },
{ name: "Technical quality", desc: "Sound methods, clean implementation, and thoughtful evaluation." },
{ name: "Ethics & safety", desc: "Patient‑first design, privacy, and risk mitigation." },
];
return (
);
}
function Timeline() {
const items = [
{ label: "Applications open", detail: "Submit your 500‑word essay.", span: "Now" },
{ label: "Shortlist & interviews", detail: "Top essays invited for interviews.", span: "T+2–3 weeks" },
{ label: "Build sprint", detail: "Mentored sprint to validate and build.", span: "2–4 weeks" },
{ label: "Demo day", detail: "Present to clinicians, advocates, and partners.", span: "Following week" },
];
return (
);
}
function ApplyForm() {
const prompts = [
"Which rare disease will you target and why now?",
"What data and methods will you use?",
"Who is on your team and what are their strengths?",
"What’s the initial proof‑of‑concept you can deliver in 4 weeks?",
"What are the ethical risks and mitigations?",
];
const [essay, setEssay] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [role, setRole] = useState("");
const [org, setOrg] = useState("");
const [agree, setAgree] = useState(false);
const recaptchaRef = useRef(null);
const [submitting, setSubmitting] = useState(false);
const [status, setStatus] = useState<"idle" | "ok" | "err">("idle");
const hasRecaptcha = Boolean(RECAPTCHA_SITE_KEY);
const limit = 500;
const words = useMemo(() => countWords(essay), [essay]);
const over = words > limit;
const canSubmit = Boolean(name && email && !over && words >= 150 && agree && hasRecaptcha && !submitting);
const onSubmit = async (e: any) => {
e.preventDefault();
if (!hasRecaptcha) {
alert("reCAPTCHA is not configured. Set NEXT_PUBLIC_RECAPTCHA_SITE_KEY / VITE_RECAPTCHA_SITE_KEY.");
return;
}
setSubmitting(true);
setStatus("idle");
try {
const token = await recaptchaRef.current?.executeAsync();
recaptchaRef.current?.reset();
const payload = { name, email, role, org, essay, recaptchaToken: token };
const res = await fetch(SUBMIT_URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
setStatus("ok");
setEssay("");
setName("");
setEmail("");
setRole("");
setOrg("");
setAgree(false);
} catch (err) {
console.error(err);
setStatus("err");
} finally {
setSubmitting(false);
}
};
return (
AI Vibe Coding for Rare Disease Challenge
We unite elite AI developers, rare disease specialists, and patient advocates to build transformative solutions for neglected conditions. Entry is based on a compelling 500‑word essay that demonstrates your vision, expertise, and commitment.
Hosted by ScientificInnovation.org • Santa Rosa Project
{bullets.map((b, i) => (
))}
{b.title}
{b.body}
{label}
{value}
{items.map((x, i) => (
))}
{x.title}
{x.body}
How it works
A concise, merit‑based pathway from idea to impact.
{steps.map((s, i) => (
))}
Details
{steps[active].body}
Suggested tracks
Customize these categories to match your challenge focus areas.
{tracks.map((t, i) => (
))}
{tracks.map((t, i) => (
))}
{t.tag}
{t.name}
{t.desc}
Judging criteria
Use these guardrails when crafting your 500‑word essay and building your proof‑of‑concept.
{criteria.map((c, i) => (
))}
{c.name}
{c.desc}
Timeline
Indicative milestone schedule. Adjust dates as needed.
{items.map((it, i) => (
))}
{it.span}
{it.label}
{it.detail}
Submit your 500‑word essay
Make a concise case for your idea and team. Use the prompts for structure (optional) and keep it under 500 words.
-
{prompts.map((p, i) => (
- {p} ))}