Build and Ship an AI SaaS in 48 Hours · 30 min · react-pdf · Next.js

Polish & PDF Export

The features all work. Today decides whether it feels like a product someone would pay for, or a working demo with rough edges.

Hiring signal: Handling loading/error/empty states properly and shipping a real PDF export is unglamorous, high-leverage polish -- the difference between a technically-complete build and one that survives real user contact.

What you will learn

Generate a formatted PDF from a saved proposal
Implement loading, error, and empty states throughout the app
Run the full user journey and apply the 'would a real user pay for this' test honestly

What You're Building

The unglamorous 30 minutes that decides whether this feels shippable: a real PDF a client could actually receive, and honest handling of every state that isn't "the happy path with fast wifi."

PDF export with react-pdf

import { Document, Page, Text, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer';

const styles = StyleSheet.create({
  page: { padding: 40, fontSize: 11 },
  heading: { fontSize: 18, marginBottom: 12 },
});

function ProposalPDF({ clientName, content }: { clientName: string; content: string }) {
  return (
    <Document>
      <Page style={styles.page}>
        <Text style={styles.heading}>Proposal for {clientName}</Text>
        <Text>{content}</Text>
      </Page>
    </Document>
  );
}

// In the UI:
<PDFDownloadLink document={<ProposalPDF clientName={clientName} content={content} />} fileName="proposal.pdf">
  Download PDF
</PDFDownloadLink>

react-pdf renders PDFs client-side using its own component model (Document, Page, Text) -- not HTML converted to PDF, which is why the styling API looks different from regular CSS. This matters for a proposal generator specifically: a client receiving a plain text email feels informal; the same content as a formatted PDF feels like something they'd actually forward to a decision-maker.

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Every state, not just the happy path, The honest test, What you're building today — plus a hands-on lab, quiz, and project artifact.

Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.

Key terms in this lesson

ReAct