Chai Landau - Portfolio Frontend

This is the frontend for my portfolio. It is a headless build using Next.js coupled with a PayloadCMS backend.

Tech stack

This is not an exhaustive list, rather, the main tech stack

• Next.js with App Dir - Using revalidate on demand allows incremental updates without the whole site having to be rebuilt (while staying static for SEO).
• TypeScript - Adds type safeties and reduces potential errors further down the road
• Storybook - Acts as documentation and serves as a building block for snapshot and visual regression tests
• Jest - Comprehensive testing library to ensure code is doing what it is supposed to
  • Uses jest-axe as an additional A11y safety net (on top of extensive manual testing)
• React Testing Library Adds APIs on top of DOM Testing Library for easier React component testing
• Loki - Generates screenshots of Storybook stories to use with reg-cli
• reg-cli - Generates report from screenshots generated by Loki to easily scan for visual regression.
• Framer Motion - Powerful motion library for React animations

Behind the scenes

Some of the tech used behind the scenes, unnoticed, but super useful

• CapRover - Open source Docker-based app and database deployment manager that handles automatic deployments (with backups) when the main branch is updated
• GitHub Actions - Runs Jest tests and Loki / reg-cli visual regression tests on open pull requests
• Linting - Comprehensive ESLint and Prettier rule sets automatically run with each commit through Husky and lint-staged.

Getting started

• Node version
• Dependencies
• Secrets
• Next.js
  • Development server
  • Production server
• Storybook
  • Development Server
• Codegen
  • Update types
  • Production build
• Jest
  • Watch mode
  • Coverage
  • Update
• Loki
  • Run tests
  • Generate report
  • Update references
• Deploy

Node version

This project uses Node v18.10.0.

If you're using nvm, you can run nvm use to switch to the right version.

If you don't have nvm installed yet, you can get it here.

Dependencies

Install all necessary dependencies using yarn.

yarn

Secrets

You will need to add the appropriate secrets in an .env file.

Next.js

Development server

Run the development server

yarn dev

Production server

Generate an optimized production build

yarn build

Run the production build locally

yarn start

Storybook

Development Server

Run Storybook's development server

yarn storybook

Codegen

Update types

Codegen is used to create or update GraphQL types for use with TypeScript. The app must be running for this to work.

yarn update-types

Production build

Generate an optimized production build of Storybook

yarn storybook:build

Jest

Watch mode

Run Jest in watch mode

yarn test

Coverage

Run Jest and generate an updated coverage report

yarn test:coverage

Update

Run Jest and update snapshots

yarn test:update

Loki

You will need a production Storybook build before running Loki.

Run tests

 yarn loki:test

Generate report

Uses reg-cli to generate HTML and JSON reports

yarn loki:report

Update references

Updates Loki and ref-cli references. This is typically used after expected visual regressions are flagged in a PR.

yarn loki:update

Deploy

The repo is connected to CapRover via webhook. Anytime the main branch updates, the site will be automatically updated and deployed.