jessilyneh / boilerplate

A simple project starter to work with TypeScript, React, NextJS and Styled Components

Boilerplate frontend

A simple project starter to work with TypeScript, React, NextJS and Styled Components

Project status:

✅ Done!

Improvements roadmap:

100% test coverage

Project

Run project locally:

npm run dev
http://localhost:3000

Build projetc:

npm rum build

Start build project:

npm start

Run tests:

npm test
npm run test:watch

Run eslint

eslint src

Fix files

eslint src --fix

SETUP TECHNOLOGIES

Create the next-app:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Install Typescript

create tsconfig.json
run npm install --save-dev typescript @types/react @types/node
run npm run dev again, to populatetsconfig.json

Install Eslint

npm install eslint --save-dev
npm init @eslint/config

Install Prettier

npm install --save-dev --save-exact prettier
npm install --save-dev eslint-config-prettier

Install Husky 🐺

npx husky-init
npm install

Install Styled Components 💅

npm install --save-dev @types/styled-components babel-plugin-styled-components
npm install --save styled-components

Install Next PWA

npm install next-pwa

Install Webpack5

npm install webpack@5

SETUP TESTS

Install Jest

npm i jest @babel/preset-typescript @types/jest

Install React Test Library and Jest Dom

npm install --save-dev @testing-library/react @testing-library/jest-dom

Install Jest Styled Components

npm install --save-dev jest-styled-components

🐐 CheatSheet Test Library