[Front-end] Nguyen Kien Phuoc - Coding Challenge

.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

.env.local

@@ -0,0 +1 @@
+GITHUB_TOKEN=token

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'plugin:jsx-a11y/recommended',
+    'prettier',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+    '@typescript-eslint/no-var-requires': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    indent: ['error', 2],
+    '@typescript-eslint/indent': ['error', 2],
+    'max-len': ['error', { code: 120 }],
+  },
+};

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea/
+yarn.lock

.releaserc.json

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/github",
+    "@semantic-release/changelog",
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": false
+      }
+    ],
+    {
+      "path": "@semantic-release/git",
+      "assets": ["package.json", "yarn.lock", "CHANGELOG.md"],
+      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+    }
+  ]
+}

Makefile

@@ -0,0 +1,4 @@
+include .env.local
+
+release:
+	GITHUB_TOKEN=${GITHUB_TOKEN} npm run release

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../src'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  public: path.resolve(__dirname, '../public'),
+};

config/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

config/webpack.common.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const paths = require('./paths');
+const CopyWebpack = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BrotliPlugin = require('brotli-webpack-plugin');
+
+module.exports = {
+  entry: path.resolve(__dirname, '..', './src/index.tsx'),
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx'],
+  },
+  module: {
+    rules: [
+      {
+        // should use babel-loader for all ts js tsx and jsx files
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        use: [{ loader: 'babel-loader' }],
+      },
+      {
+        // should use style-loader and css-loader for all css files
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        // v5 supports image loaders out of box
+        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+        type: 'asset/resource',
+      },
+      {
+        test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+        type: 'asset/inline',
+      },
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, '..', './build'),
+    filename: '[name].[chunkhash].js',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Project Title',
+      // favicon: `${paths.src}/assets/icons/favicon.png`,
+      template: `${paths.public}/index.html`, // template file
+      filename: 'index.html', // output file
+    }),
+    new CopyWebpack({
+      patterns: [{ from: 'src', to: 'dist' }],
+    }),
+
+    // compresses assets
+    new BrotliPlugin({
+      asset: '[path].br[query]',
+      test: /\.(js|css|html|svg)$/,
+      threshold: 10240,
+      minRatio: 0.8,
+    }),
+  ],
+};

config/webpack.config.js

@@ -0,0 +1,9 @@
+const { merge } = require("webpack-merge");
+const commonConfig = require("./webpack.common.js");
+
+module.exports = (envVars) => {
+  const { env } = envVars;
+  const envConfig = require(`./webpack.${env}.js`);
+  const config = merge(commonConfig, envConfig);
+  return config;
+};

config/webpack.development.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  mode: 'development',
+  devtool: 'cheap-module-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.name': JSON.stringify('dev'),
+    }),
+    new Dotenv({
+      path: './.env.local',
+    }),
+  ],
+};

config/webpack.production.js

@@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const Dotenv = require('dotenv-webpack');
+
+module.exports = {
+  mode: 'production',
+  devtool: 'source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.name': JSON.stringify('prod'),
+    }),
+    new Dotenv({
+      path: process.env.NODE_ENV === 'production' ? './.env.production' : './.env.development',
+    }),
+  ],
+};

package.json

@@ -3,25 +3,36 @@
   "description": "Manabie todo challenge",
   "version": "0.1.0",
   "private": true,
+  "author": "Kieran Nguyen",
   "dependencies": {
-    "@types/jest": "^24.0.0",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/material": "^5.7.0",
+    "@reduxjs/toolkit": "^1.8.1",
+    "@types/jest": "^27.5.1",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "axios": "^0.19.2",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "axios": "^0.21.1",
     "cross-env": "^7.0.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "^8.0.1",
     "react-scripts": "4.0.3",
+    "reselect": "^4.1.5",
     "shortid": "^2.2.15",
     "typescript": "4.5.3"
   },
   "scripts": {
-    "start:fullstack": "cross-env REACT_APP_WHOAMI=fullstack react-scripts start",
-    "start:frontend": "cross-env REACT_APP_WHOAMI=frontend react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "webpack serve --config config/webpack.config.js --env env=development --open",
+    "build": "webpack --config config/webpack.config.js --env env=production",
+    "test": "jest --watch",
+    "eject": "react-scripts eject",
+    "commit": "cz",
+    "release": "semantic-release --no-ci",
+    "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,json}\"",
+    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -39,6 +50,58 @@
     ]
   },
   "devDependencies": {
-    "@types/shortid": "^0.0.29"
+    "@babel/core": "^7.17.10",
+    "@babel/plugin-transform-runtime": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.17.9",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "12.1.2",
+    "@types/jest": "27.4.0",
+    "@types/shortid": "^0.0.29",
+    "axios-mock-adapter": "^1.20.0",
+    "babel-loader": "^8.2.5",
+    "brotli-webpack-plugin": "^1.1.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.7.1",
+    "cz-conventional-changelog": "3.3.0",
+    "dotenv-webpack": "^7.1.0",
+    "eslint": "^8.15.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "html-webpack-plugin": "^5.5.0",
+    "prettier": "^2.6.2",
+    "semantic-release": "^19.0.2",
+    "style-loader": "^3.3.1",
+    "jest": "27.0.6",
+    "ts-jest": "^28.0.0",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0",
+    "webpack-merge": "^5.8.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "preset": "ts-jest",
+    "verbose": true,
+    "setupFilesAfterEnv": [
+      "./config/setupTests.ts"
+    ],
+    "testURL": "http://localhost",
+    "moduleNameMapper": {
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+    }
   }
 }

public/index.html

@@ -2,42 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Todo List</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>