This is Drew Tsun's personal website coded using Next.js, bootstrapped with create-next-app. The app uses the Material UI component library and is styled using Emotion. Data is fetched from Firestore with assets stored in Firebase Cloud Storage. In the future, I plan to migrate data to DynamoDB and store assets in S3.

Local Development

Dependencies should first be installed with yarn install.

The development server (next dev docs) can be started with

yarn dev

Open http://localhost:3000 with a web browser to see the result.

Production Deployment

The Vercel Platform is used to deploy this site (Next.js deployment documentation).

The Vercel Platform normally creates a production build, but sometimes, a production build might need to be replicated locally. This can be done by building the Next.js site locally (next build docs)

yarn build

and starting the build that was just created (next start docs)

yarn start

Ignored build steps for Vercel deployments can be configured in vercel_ignored_build_step.sh (ignored build step docs).

Testing

To assert the functionality of this application, Jest is used to perform unit testing, testing Next.js components via the React Testing Library. Test files can be created via creating <component-name>.test.ts(x) files.

A test server that watches for changed tests can be started via:

yarn test

In the event that Jest snapshots need to be updated, run

yarn test:update-snapshots

To simulate the testing that happens during a deployment to Vercel, use:

yarn test:ci

In order to reduce the amount of unit tests required for commits, a modified command is used for commits:

yarn test:commit

Testing rules can be configured in jest.config.js and jest.setup.js.

Linting

Linting rules are fairly simple, using the recommended ruleset for eslint, TypeScript, Next.js and Prettier. Only simple-import-sort was added to ensure that imports are sorted correctly.

Linting can be achieved using

yarn lint

To auto-fix errors while linting, run:

yarn lint:fix

Lint rules can be configured in .eslintrc.js.

Storybook

I will support development of new components using Storybook in the future.

Dependency Management

dependabot helps automatically keep dependencies updated. Dependabot can be configured at .github/dependabot.yml. More information on how to configure Dependabot can be found here.

Committing Files

Prior to committing files to the repo, all files must pass the following:

• Linting
• Unit Tests

Husky runs prior to every commit, and can be configured via .husky/

Style Guide

Creating Tests

Do not test:

• Constants (src/const/)
• Next.js pages (app/)
• Styled Components (i.e. components styled with MUI's styled function, located in src/components/**/styled/)
• Types (src/types/)
• Themes (src/themes/)

Ideally tests should cover all control flow paths if possible.

Creating Styled Components

For one-off components, it is better to utilize the sx property of each component.

Only use MUI's styled function for the following cases:

• Styling the component depends on the MUI theme.
• Styling a component that isn't a part of MUI (e.g. Next.js Link, Next.js Image.

The component will need to be stored in src/component/<type>/styled, where <type> is the classification of the component.

MUI Integration

When using hyperlinks, use the MuiNextLink component found in src/components/text/NextLinkComposed.tsx file.

If any MUI components need to be composed via the component prop that needs to integrate with Next.js's Link component, use the NextLinkComposed component found in src/components/text/NextLinkComposed.tsx file.