Skip to main content

​
Core framework

Astro 5.16

SSR framework that renders HTML on the server and ships minimal JavaScript to the client. Provides the routing layer, layouts, and island architecture that lets React components hydrate selectively.

React 19

UI component library for all interactive islands. Uses useState, useEffect, and useCallback hooks for local state, data fetching, and memoised callbacks. No external state manager is needed.

​
Styling

Tailwind CSS 4

Utility-first CSS framework. Styles are applied directly in JSX and .astro templates via class names. Version 4 uses a CSS-native configuration via @tailwindcss/vite instead of tailwind.config.js.

​
Data visualisation

Chart.js

Canvas-based charting library that renders interactive line charts for dollar exchange rate history and inflation trends.

react-chartjs-2

React wrapper around Chart.js. Provides declarative <Line> and other chart components that accept Chart.js config objects as props, integrating cleanly with React’s render cycle.

​
Utilities

date-fns

Lightweight date manipulation and formatting library. Used to parse API date strings, format labels for chart axes, and compute date ranges for the dollar history chart.

​
Deployment and monitoring

@astrojs/vercel

Official Astro adapter for Vercel. Compiles the Astro project into a Vercel serverless function that handles SSR, routing, and static asset serving.

@vercel/analytics

Vercel’s privacy-friendly analytics. Tracks page views and user flows without storing personally identifiable information.

@vercel/speed-insights

Measures Core Web Vitals (LCP, CLS, INP) in real user sessions and surfaces them in the Vercel dashboard.

​
Development tooling

Vitest

Fast unit test runner built on Vite. Used with @testing-library/react to test React components in a jsdom environment. Configured in vitest.config.ts using getViteConfig from astro/config.

astro check

Astro’s built-in TypeScript and type-checking command. Runs before every production build (astro check && astro build) to catch type errors in .astro files and imported TypeScript modules.

​
Dependency versions

PackageVersionPurpose
astro5.16SSR framework and build tool
react19UI component library
react-dom19React DOM renderer
@astrojs/react—Astro integration for React islands
@astrojs/vercel—Vercel SSR adapter
tailwindcss4Utility-first CSS
chart.js—Canvas charting engine
react-chartjs-2—React wrapper for Chart.js
date-fns—Date formatting and arithmetic
@vercel/analytics—Page view analytics
@vercel/speed-insights—Core Web Vitals monitoring
vitest—Unit test runner
@testing-library/react—React component testing utilities
Check package.json at the project root for exact pinned versions of every dependency and devDependency.

​
Project structure

src/
├── components/      # React (.jsx) and Astro (.astro) components
├── layouts/         # Astro page layouts
├── pages/           # Astro pages — each file is a route
├── styles/          # Global CSS (Tailwind imports)
├── test/            # Vitest setup and test files
└── Icons/           # SVG icon assets
docs/
└── architecture.md  # Architecture reference
React components live in src/components/ alongside Astro components. Astro components (.astro) handle static structure; React components (.jsx) handle interactivity and data fetching.

Build docs developers (and LLMs) love

Get started for freeTalk to us