• React.js
• Next.js
• linaria CSS-in-Js

npm run dev
# or
yarn dev

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Open https://localhost:3000/ or followig the QR-code with your browser to see the result.

# prepare
yarn global add turbo
# or
npm install turbo --global

npm run build
# or
yarn build

# then 

npm run start
# or
yarn start

Open http://localhost:3000/ or followig the QR-code with your browser to see the result.

We use husky and lint-staged for executing the pre-commit and pre-push works. The pre-commit will do the lint things and make some auto-fix automatically. WE can modify the .husky/pre-commit to change the actions of pre-commit. Modifing the .lintstagedrc can change the action of lint-staged which controls the lint cli for staged files. We can add husky hook by this guideline:

// adding pre-push for example
npx husky add .husky/pre-push "npm test"
git add .husky/pre-push

For the campatibility of Linaria, we use the set of "next", "prettier", and "plugin:react-hooks/recommended" as the basement.

• next: the limit rule set of lint
• prettier: better support for vs-code formattor
• react-hooks/recommended: check the hook dependencies

If we want to modify the rule individually, just change the rules section in .eslintrc.json. Please take reference to eslint rules.

We use jest + React Testing Library for UI / unit test tools. Just write testings in tests directory.

// basic unit testing
describe('inintial case for test', () => {
  it('jest should be run', () => {
    expect(1 + 1).toEqual(2)
  })
})

//basic UI testing
describe('Home', () => {
  it('snapshot testing', () => {
    const { container } = render(<Home />)
    expect(container).toMatchSnapshot()
  })
})

We use playwright for E2E testing. The setting files is

• .github/ci-e2e.yml (for branch push / pull_request)
• .github/e2e-deployment.yml (for github deployment signal)

The testing steps:

• develop PR
  • unit / lint / build testing
  • E2E testing
• --> main PR
  • unit / lint / build testing
  • -> deployment signal
    • E2E testing
• --> main PUSH
• --> Production