Frontend

This directory contains the React frontend for the Notion webhook integration application.

Structure

  • index.html - HTML shell that loads the React app
  • index.tsx - React app entry point
  • components/ - React components
    • App.tsx - Main application component
    • NotionBlock.tsx - Renders Notion block content
    • NotionProperty.tsx - Displays Notion page properties

React Configuration

IMPORTANT: All React files must:

  1. Include /** @jsxImportSource https://esm.sh/react@18.2.0 */ at the top
  2. Pin React dependencies to version 18.2.0: ?deps=react@18.2.0
  3. Use consistent React version across all imports

Styling

Uses Pico CSS (minimal CSS framework loaded from CDN in index.html). Pico automatically styles semantic HTML elements without requiring CSS classes, keeping markup clean and maintainable. We use it in classless mode with custom padding styles for proper spacing.

API Communication

  • Fetch data from /api/* endpoints
  • Use shared types from ../shared/types.ts
  • Handle loading and error states in components

Error Handling

The error catching script is included in index.html to capture client-side errors for better debugging.

Development

Since this is a Val Town project, the frontend is served through Hono routes defined in main.http.tsx.