cv-react-ts-graphql

Source code for my online CV: React, TypeScript, and GraphQL

Overview

This codebase contains the source for my online CV: cv.mattcalthrop.com.

The application follows a modern React/Next.js architecture with a content-driven approach:

• Frontend Framework: Built with Next.js using React Server Components for optimal performance
• Content Management: Contentful CMS serves as a headless CMS, allowing changes to content without redeploying the application
• Data Layer: Apollo Client handles data fetching and caching via Contentful's GraphQL API
• Component Structure: Modular component architecture using the Chakra UI component library
• Data Flow: Server-side data fetching via fetchCvData() function that queries Contentful's GraphQL API
• Type Safety: Full TypeScript integration with generated GraphQL types for end-to-end type safety
• Styling: Chakra UI component library provides responsive design and theming capabilities
• Testing: Unit tests with Vitest and React Testing Library
• Linting & Formatting: oxlint and Prettier for code quality and consistency
• Dead Code Analysis: knip identifies unused dependencies, exports, and files to maintain a clean codebase
• Dependency Management: Renovate automatically manages dependency updates with intelligent grouping and scheduling
• CI/CD: GitHub Actions workflow for linting, testing, and deploying the application
• Deployment: Statically generated site deployed on Vercel with automated deployments via GitHub

Setup

You can fork this repo, and run it locally yourself. Following are instructions for setting it up and running it.

Install nvm

Follow instructions here:

github.com/nvm-sh/nvm

Then download and install the correct version of node:

nvm install

Install pnpm

Follow the instructions here:

pnpm.io/installation

Install NodeJS packages

Install the NodeJS packages:

pnpm install

Running the app

During development

pnpm start:dev

This will open a web browser at this URL:

http://localhost:3000/

Tests

All

To run all tests:

pnpm test

Linting

Check eslint.config.js for the eslint rules.

To run the linter:

pnpm lint

And to auto-correct any errors that can be corrected:

pnpm lint:fix

Code formatting

Check .prettierrc.json for the Prettier rules.

To check the TypeScript formatting:

pnpm format

And to auto-correct any errors that can be corrected:

pnpm format:fix

Building & compilation

To build the app:

pnpm build

With bundle analysis:

ANALYZE=true pnpm build

To check the TypeScript compilation:

pnpm compile

License

MIT