diff --git a/package.json b/package.json index 2e59be9..5761d43 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,6 @@ "react-masonry-css": "^1.0.16", "react-notification-system": "^0.4.0", "react-notification-system-redux": "^2.0.1", - "react-responsive-carousel": "^3.2.21", "react-select": "^5.2.1", "react-select-async-paginate": "^0.6.1", "react-slick": "^0.28.1", diff --git a/src/client/README.md b/src/client/README.md index 85d0c03..ead4b33 100644 --- a/src/client/README.md +++ b/src/client/README.md @@ -1,159 +1,16 @@ -# Client side boilerplate with ReactJS library and Typescript +### ThreeTwo UI -## Introduction +##### I have tried my best to document the project through folder organization, comments, and actual JSDocs where applicable. +##### Unit tests and I have not agreed for a long time now, and I think it won't change anytime soon. -In the client side boilerplate, Typescript has been used to achieve a more structured and maintainable source code. ReactJS library which is one of the most important libraries for UI development alongside the other big names in the market, has been picked over to build the presentation layer of the application. Also for CSS, Less has been used to make CSS more functional. -### Less +This folder houses all the components, utils and libraries that make up ThreeTwo's UI -[Less](http://lesscss.org/) is a backwards-compatible language extension for CSS. Less helps to write CSS in a functional way and It's really easy to read and understand. +It is based on React 17, and uses: -### ESLint +1. _Redux_ for state management +2. _socket.io_ for transferring data in real-time +3. _React Router_ for routing -[ESLint](https://eslint.org/) is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript and Typescript. -[.eslintrc.json file](<(https://eslint.org/docs/user-guide/configuring)>) (alternatively configurations can be written in Javascript or YAML as well) is used describe the configurations required for ESLint. Below is the .eslintrc.json file which has been used. -```javascript -{ - "extends": ["airbnb"], - "env": { - "browser": true, - "node": true - }, - "rules": { - "no-console": "off", - "comma-dangle": "off", - "react/jsx-filename-extension": "off" - } -} -``` - -[Airbnb's Javascript Style Guide](https://github.com/airbnb/javascript) which has been used by the majority of JavaScript and Typescript developers worldwide. Since the aim is support for both client (browser) and server side (Node.js) source code, the **env** has been set to browser and node. -Optionally, you can override the current settings by installing `eslint` globally and running `eslint --init` to change the configurations to suit your needs. [**no-console**](https://eslint.org/docs/rules/no-console), [**comma-dangle**](https://eslint.org/docs/rules/comma-dangle) and [**react/jsx-filename-extension**](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) rules have been turned off. - -### Webpack - -[Webpack](https://webpack.js.org/) is a module bundler. Its main purpose is to capable Front-end developers to experience a modular programming style and bundle JavaScript and CSS files for usage in a browser. - -[webpack.config.js](https://webpack.js.org/configuration/) file has been used to describe the configurations required for webpack. Below is the webpack.config.js file which has been used. - -```javascript -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CopyPlugin = require('copy-webpack-plugin'); - -const outputDirectory = 'dist'; - -module.exports = { - entry: ['babel-polyfill', './src/client/index.tsx'], - output: { - path: path.join(__dirname, outputDirectory), - filename: './js/[name].bundle.js' - }, - devtool: "source-map", - module: { - rules: [ - { - test: /\.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader' - } - }, - { - test: /\.tsx?$/, - use:[ - { - loader: "awesome-typescript-loader" - }, - ], - exclude: /node_modules/ - }, - { - enforce: "pre", - test: /\.js$/, - loader: "source-map-loader" - }, - { - test: /\.less$/, - use: [ - { loader: 'style-loader' }, - { - loader: MiniCssExtractPlugin.loader, - options: { - publicPath: './Less', - hmr: process.env.NODE_ENV === 'development', - }, - }, - { loader: 'css-loader' }, - { - loader: 'less-loader', - options: { - strictMath: true, - noIeCompat: true, - } - }, - ] - }, - { - test: /\.(png|woff|woff2|eot|ttf|svg)$/, - loader: 'url-loader?limit=100000' - }, - ] - }, - resolve: { - extensions: ['*', '.ts', '.tsx', '.js', '.jsx', '.json', '.less'] - }, - devServer: { - port: 3000, - open: true, - proxy: { - '/api': 'http://localhost:8050' - } - }, - plugins: [ - new CleanWebpackPlugin([outputDirectory]), - new HtmlWebpackPlugin({ - template: './public/index.html', - favicon: './public/favicon.ico', - title: "Book Manager", - }), - new MiniCssExtractPlugin({ - filename: './css/[name].css', - chunkFilename: './css/[id].css', - }), - new CopyPlugin([ - { from: './src/client/Assets', to: 'assets' }, - ]) - ], -}; - -``` - -1. **entry:** entry: ./src/client/index.tsx is where the application starts executing and Webpack starts bundling. - Note: babel-polyfill is added to support async/await. Read more [here](https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack). -2. **output path and filename:** the target directory and the filename for the bundled output. -3. **module loaders:** Module loaders are transformations that are applied on the source code of a module. We pass all the js file through [babel-loader](https://github.com/babel/babel-loader) to transform JSX to Javascript. CSS files are passed through [css-loaders](https://github.com/webpack-contrib/css-loader) and [style-loaders](https://github.com/webpack-contrib/style-loader) to load and bundle CSS files. Fonts and images are loaded through url-loader. -4. **Dev Server:** Configurations for the webpack-dev-server which will be described in coming section. -5. **plugins:** [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin) is a webpack plugin to remove the build directory before building. [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) simplifies creation of HTML files to serve your webpack bundles. It loads the template (public/index.html) and injects the output bundle. - -### Webpack dev server - -[Webpack dev server](https://webpack.js.org/configuration/dev-server/) is used along with webpack. It provides a development server that enables live reloading for the client side code changes. - -The devServer section of webpack.config.js contains the configuration required to run webpack-dev-server which is given below. - -```javascript -devServer: { - port: 3000, - open: true, - proxy: { - "/api": "http://localhost:8050" - } -} -``` - -[**Port**](https://webpack.js.org/configuration/dev-server/#devserver-port) specifies the Webpack dev server to listen on this particular port (3000 in this case). When [**open**](https://webpack.js.org/configuration/dev-server/#devserver-open) is set to true, it will automatically open the home page on start-up. [Proxying](https://webpack.js.org/configuration/dev-server/#devserver-proxy) URLs can be useful when you have a separate API backend development server, and you want to send API requests on the same domain. diff --git a/yarn.lock b/yarn.lock index fd6809d..bc9ef90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10487,7 +10487,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -10896,13 +10896,6 @@ react-dom@^17.0.1: object-assign "^4.1.1" scheduler "^0.20.2" -react-easy-swipe@^0.0.21: - version "0.0.21" - resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb" - integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg== - dependencies: - prop-types "^15.5.8" - react-fast-compare@^3.0.1, react-fast-compare@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" @@ -11048,15 +11041,6 @@ react-redux@^7.2.3: prop-types "^15.7.2" react-is "^17.0.2" -react-responsive-carousel@^3.2.21: - version "3.2.22" - resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.22.tgz#6281603daa33656940d01e207f511b83c0093c70" - integrity sha512-/r7dsIaN+l417IYIS0Fr7Z5VlpK3KYnTIIsdVCWSqtuJRIZNM+qdBIA4RIbzQtuW/ZBTnQanBecblCxg0HCqLQ== - dependencies: - classnames "^2.2.5" - prop-types "^15.5.8" - react-easy-swipe "^0.0.21" - react-router-dom@^5.2.0: version "5.3.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"