How I Built SciArchitect: Designing a multi-level Academic Dashboard with Gemini & React

Reading academic papers can be grueling. For an undergraduate or a layman trying to learn new concepts from the frontier of biotechnology, physics, or NLP, sifting through the dense vernacular of post-docs is an obstacle.

This problem birthed SciArchitect.

SciArchitect is a high-density, interactive web application that leverages Google's Gemini models to translate complex scientific PDFs into dynamic, visual "research dashboards". Let's deep-dive straight into how we built this system and the underlying architecture that makes it work.

The Scope of Transformation

To make a paper truly "accessible," plain text summaries aren't enough. People learn differently. So we aimed for:

1. Three-Tier Explanations: Real-time toggling between Layman, Undergraduate, and Expert lexicons.
2. Methodology Mapping: Converting a text-heavy methodology section into an interactive logic flowchart.
3. Data Emphasizing: Pulling core quantitative outcomes and visualizing them instantly.
4. Instant Frictionless Importing: Upload local drafts, or paste an ArXiv linkage.

Architecture

To process standard frontend interactions while being able to dynamically fetch remote PDFs seamlessly, we adopted a tight Full-Stack Node+React approach.

1. The Client (React / Vite): Collects the ArXiv URL or the direct PDF buffer.
2. The Server (Express Proxy): A lightweight backend built into the Vite dev server footprint bypasses basic CORS limitations to retrieve public, remote ArXiv PDFs and convert them to Base64 buffers.
3. The Brain (Gemini Flash/Pro): The file payload is directly sent alongside our intricate schema logic (prompted) to fetch strict Structural JSON.
4. The View (Tailwind / Recharts / Mermaid): Ingests the JSON to draw an exploratory dashboard.

Prompting for Consistency

We don't want a "story" from the LLM, we want pure variables. Using the @google/genai SDK, we utilized the responseSchema constraint to enforce that the analysis payload gives us precisely what we needed.

const prompt = `
  Perform a rapid, high-precision analysis of this research paper. 
  1. Flowchart: Generate Mermaid.js code for the methodology.
  2. Metrics: Extract 3-5 key quantitative findings (label, value, unit).
  3. Content: Create 3 versions (Layman, Undergraduate, Expert)...
`;

const response = await ai.models.generateContent({
  model: "gemini-3-flash-preview",
  contents: [
    { parts: [{ text: prompt }, { inlineData: { data: pdfBase64, mimeType: "application/pdf" } }] }
  ],
  config: {
    responseMimeType: "application/json",
    responseSchema: {
       // ... Strict object mapping
    }
  }
});

By switching to gemini-3-flash-preview, we retained incredible multimodal extraction speeds. This is crucial because loading an entire 20-page research paper shouldn't feel like burning a CD.

Rendering System Topologies

Generating Markdown or simple Strings is straightforward, but asking an AI to generate code logic like a Mermaid.js string requires some resilience.

Once we extract the methodology graph logic, we use the mermaid library on React to dynamically target a div node on layout generation. Adding Pan & Zoom features to deeply complex scientific structures allowed us to deliver an intricate level of observation usually missing from vanilla PDF readings.

import mermaid from "mermaid";
mermaid.initialize({ startOnLoad: true, theme: "base" });

export default function MermaidViewer({ chart }) {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && chart) {
      containerRef.current.innerHTML = \`<div class="mermaid">\${chart}</div>\`;
      mermaid.contentLoaded();
    }
  }, [chart]);

  return <div ref={containerRef} />;
}

The "Reader Layout"

The final presentation leverages a "Reader-Mode" style — sticky side navigation, content anchors, and a slider to shift the prose. We utilized lucide-react to inject subtle, but prominent visual identifiers throughout the page, turning a boring document into a highly engineered, modern scientific artifact.

Academic accessibility shouldn't stop at open-source routing. The tools to parse and dissect findings shouldn't just be limited to professors. Tools like SciArchitect bridge that gap instantly!

Code & more: https://www.dailybuild.xyz/project/127-sciarchitect