Build the React Frontend

Build the interface users interact with. Fetch from your FastAPI backend, display results clearly, and handle loading states and errors gracefully.

~1 hour Hands-on Precision AI Academy

Today's Objective

A complete React frontend: text input, three analysis buttons, loading spinner, and a results panel that displays summary, key points, and generated questions in a clean layout.

code

import { useState } from 'react';
import axios from 'axios';

const API = 'http://localhost:8000';

function App() {
  const [text, setText] = useState('');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const callAPI = async (endpoint) => {
    setLoading(true); setError(null);
    try {
      const res = await axios.post(`${API}/${endpoint}`, { text });
      setResult(res.data);
    } catch (e) {
      setError(e.response?.data?.detail || 'Something went wrong');
    } finally {
      setLoading(false);
    }
  };

The JSX Template

src/App.js (continued)

javascript

  return (
    <div style={{maxWidth:'760px',margin:'0 auto',padding:'40px 20px'}}>
      <h1>AI Document Analyzer</h1>

      <textarea
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Paste your text here..."
        rows={8}
        style={{width:'100%',padding:'12px',fontSize:'15px'}}
      />

      <div style={{display:'flex',gap:'10px',marginTop:'12px'}}>
        {['analyze', 'summarize', 'questions'].map(ep => (
          <button key={ep} onClick={() => callAPI(ep)}
            disabled={loading || !text}
            style={{padding:'10px 20px',textTransform:'capitalize'}}>
            {loading ? 'Loading...' : ep}
          </button>
        ))}
      </div>

      {error && <p style={{color:'red'}}>{error}</p>}
      {result && <pre>{JSON.stringify(result, null, 2)}</pre>}
    </div>
  );
}
export default App;

Better Results Display

Replace the raw JSON display with a proper UI that renders each result type correctly:

src/ResultPanel.js

javascript

function ResultPanel({ result }) {
  if (!result) return null;
  return (
    <div style={{marginTop:'24px',padding:'20px',border:'1px solid #e0e0e0',borderRadius:'8px'}}>
      {result.summary &&
        <div><h3>Summary</h3><p>{result.summary}</p></div>}
      {result.key_points?.length > 0 &&
        <div><h3>Key Points</h3>
          <ul>{result.key_points.map((pt,i) =>
            <li key={i}>{pt}</li>
          )}</ul></div>}
      {result.sentiment &&
        <p>Sentiment: <strong>{result.sentiment}</strong></p>}
    </div>
  );
}
export default ResultPanel;

Want live instruction and hands-on projects? Browse free courses — 3 days, 5 cities.

Day 3 Checkpoint

Before moving on, confirm understanding of these key concepts:

What is the core concept introduced in this lesson?
How does the main technique or tool work in practice?
What common mistakes should be avoided?
How would this apply in a real-world project?
What is the next logical step to build on this knowledge?

Build the React Frontend

Today's Objective

The JSX Template

Better Results Display

Supporting References & Reading

Go deeper with these external resources.

Day 3 Checkpoint