react-typescript-template

Summary

• Introduction
• Features and requirements
• Bonus features and implementations
• Data consumed
• Installation
• Running
• Another scripts
• Critique

Introduction

A simple and intuitive React TypeScript template. The main objective of this project is to practice some development skills through some technologies and concepts:

• ReactJS
• React Hooks
• TypeScript
• CSS-in-JS (styled-components)
• Unity tests (Jest + React Testing Library)
• Linters (eslint, style-lint, lint-staged)
• Formatters (editorconfig, prettier)
• git hooks (husky: pre-commit, prepare-commit-message)
• conventional-commits (commitizen)
• Scaffolding (scaffdog)
• Environment config (.vscode/*, .npmrc)
• Thematization
• Usability
• Responsivity
• Clean Code
• SOLID
• KISS: “Keep It Simple, Stupid!”
• YAGNI: “You Ain’t gonna need it”
• DRY: “Do not Repeat Yourself”

Features and requirements

• ...

Bonus features and implementations

• Friendly messages to show the user some success/error status.
• High level of quality (strong eslint/typescript rules, scaffolding, separation of responsibilities, tests, pre-commit with type-check/linting/tests etc).
• Create a lot of components through the styled-components with a well organized structure of files (instead of using third part libraries).
• Unity tests in the component styles, behaviors, snapshots etc.
• Global tests configuration that provides a simple and standardized way to render the components through the React Testing Renderer or through React Testing Library, with the theme provider already embedded.
• Create a thematization structure that allows you to create how many themes that you want.
• Create a customized theme interface with some structures implemented (borders, colors and typography).
• Implements responsiveness to allow any screen size by using @media queries, flexbox and Grid Layout.
• Usage of React Context, React Hooks.
• Usage of Typescript generics, union type and interface manipulation and interesting Type utilities.

Data consumed

• ...

Installation

• Make sure that you have nodejs installed in you computer. Preference: node 20.9.0.
• yarn install if you have the yarn installed globally or npx yarn install, if not.

Running

• yarn start or npm start

Another scripts

• Typescript type check: yarn type-check
• Prettier formating: yarn format
• Linting code: yarn lint
• Build: yarn build
• Tests: yarn test
• Scaffolding: yarn g

Critique

• It could be done this or that way...