Antonio's Cats Home - React TypeScript implementation

Hi,

This is the React TypeScript implementation for Antonio's Cats Home. The project is configured with npm and Gulp. CSS code is written with PostCSS using the BEM pattern. styled-components is used for the styling on React components. Most of the CSS is on the React components. Just a few classes dealing with edge cases are on `scss` files.

The project is implemented from scratch, without using any quick starter project like Create React App or React Starter Kit.

JS (Kb minified)	CSS (Kb minified)	JS imports	CSS imports	Front-end framework	HTTP requests	Routing	Transitions	Other libraries	CSS framework	Building tools	Linting	Tests	Server-side rendering	Server	Readme file	Ready out of the box
260	- (no native CSS)	1	0 (plus fonts)	React 16.7	Axios	React Router	ReactTransitionGroup	Redux, Reselect	styled-components using BEM	npm, Gulp, Rollup	TSLint, stylelint	Jest on Node.js	Yes	Node.js	In HTML	On `dist` folder

JavaScript is written using TypeScript. Rollup is used to bundle all modules together.

Redux with Reselect is used to implement the model layer and decouple state from React views. The app stores the state on localStorage. So if you refresh the window or reopen it on another tab the cat selected and the filtering string will load automatically.

React Router is used to implement routing between tabs. Every of the two tabs can be accessed straightaway from its URL.

The projects implements server-side rendering. In order to make it work firstly a bundle is created for the server with the npm run build:ssr. Then this bundled is execuded on a Node.js server with npm run serve accessible from http://localhost:3000.

You do not need to run any npm command or Gulp task since all the processed files are already generated in the dist folder.

In order to see the project working:

Visit https://antonioredondo.github.io/AntoniosCatsHome/reactTypeScript/dist.
Or download the repository and with a browser supporting the file:/// standard with CORS (Firefox on Windows supports it) open dist/index.htm.
Or download the repository and run npm i && npm start. A Node.js server will start and the system default browser will open automatically at http://localhost:3000/dist/index.htm. A server with React server-side rendering can be started with npm run serve.

JavaScript dependencies are React, Redux, React Router, styled-components, some supporting libs and a couple of shims (see package.json for details). No jQuery, no Bootstrap. No real need for polyfills like Webshim or babel-polyfill, or browser compatibility libraries like Modernizr.

Dependencies

The only CSS dependency are the fonts downloaded from Google Fonts.

The application has a small code size: no CSS and ~250 KB of minified JavaScript. The CSS is generated by styled-components and stored on each corresponding React component. The JavaScript is inlined in the HTML delivered from the server thanks to the code in serverSSR.jsx and the gulp-inline Gulp plugin.

Best practices

Strict practices and habits are paramount for good software development. For this project the React official documentation is followed. TDD was applied to build the project (see Testing section).

Linting

The project lints JavaScript and CSS code with ESLint and stylelint repectively. The linting tasks are executed with its own task npm run lint or with the npm run build:watch task. JavaScript linting also works within the most common IDEs if you have them properly configured. CSS within the React components is also linted with stylelint-processor-styled-components.

Thanks to Husky the linting task is also executed when committing. If linting fails changes aren't committed.

Testing

Tests cover every React component, Redux actions and Redux reducer. They are on the tests folder.

To run the tests execute npm t (you must have executed npm i before).

Jest is the testing framework. Snapshots are used to test components. Code coverage information is shown after tests have run. Thanks to xmlhttprequest tests are executed on Node.js, not in the browser (faster and no need for Karma and PhamtonJS).

Thanks to Husky the testing task is also executed when committing changes. If tests fail changes aren't commited.

Command tools

There are several npm scripts configured dealing with project tasks. The project makes uses of Gulp but it's not necessary to have it installed globally since Gulp tasks are mapped to npm scripts which call Gulp from the node_modules folder:

Available npm scripts:

npm i (alias for npm install): installs all dependencies so that the project can be developed, tested and deployed. You must execute npm i before executing any other npm command.
npm run lint: lints JavaScript and CSS code.
npm run build:watch: executes the default task every time a file from the src folder is modified. This is the script you should run most of the time when developing together with the script npm start.
npm run build:prod: generates the usable web in the dist folder by minimising the JavaScript, HTML and CSS code, removing dev code and inlining JavaScript, CSS and SVGs files. This script execute the npm run build script first.
npm run build:ssr: creates the bundle used for server-side rendering. The server using this bundled is started with npm run serve.
npm run clean: removes the dist folder with all its content.
npm t (alias for npm test): executes tests.
npm start: initiates a Node.js server configured on server.js and automatically opens the default browser with the project page.
npm serve: initiates a Node.js server with the SSR bundled created with npm run build:ssr.

Folder structure

Source code and distributable code are stored in src and dist folders respectively. Tests are on the tests folder with .test.jsx extension. This folder copies src folder structure.

Screen sizes

The page has two different layouts: one desktop view with a max-width of 1100px, and a mobile view.

I hope I have explained my approach properly. For sure you have many other doubts that you will like to answer. I am very happy to discuss them with you.

On the project, when you see something weird or wrong I would like to please ask you not to automatically consider that part wrong. There will be a satisfactory explanation so that that code or approach has a reason to exist in peace with the rest of best web coding standards and practices.

Regards,

Antonio