johan-mouchet.com

Johan Mouchet's portfolio, open sourced on GitHub.

About This Website

This website is,

• Bootstrapped with Next.js
• Built with React
• Pulling data from Prismic using GraphQL and Apollo
• Maintaining a design system with Storybook, deployed with Chromatic
• Type-checked with TypeScript
• Unit and snapshot tested with Vitest and React Testing Library
• Using CSS Modules, Sass and post-processing
• Linted with ESlint and Stylelint; formatted with Prettier; enforced by Husky and lint-staged
• Deployed, pre-rendered, with Netlify

npm Scripts

In the project directory, you can pnpm + :

• dev: Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
• storybook: Runs Storybook, an open source tool for developing UI components in isolation. Open http://localhost:9009/ to view it in the browser.
• test: Launches the Vitest test runner in the interactive watch mode.
• type-check: Runs TypeScript, as a static type checker.
• lint:js: Runs the ESLint linter, a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
• lint:css: Runs the stylelint linter, a mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• format: Runs ESLint and stylelint with the --fix option, as well as Prettier with the --write option to automatically fix problems.
• analyze: Runs @next/bundle-analyzer to analyze, and debug JavaScript and Sass code bloat through source maps.
• build: Builds the app for production to the .next folder.
• build:storybook: Builds Storybook for production to the storybook-static folder.
• build:all: Builds both the app and Storybook for production to the respective folders.
• codegen: Generates TypeScript types for the Prismic GraphQL schema, requires to set a PRISMIC_CUSTOM_TYPES_API_TOKEN environment variable.