init: start Let's Do application development, prepare project structure

.babelrc

+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": "58"
+        },
+        "useBuiltIns": "entry",
+        "corejs": 3
+      }
+    ]
+  ],
+  "plugins": ["@babel/plugin-syntax-top-level-await"],
+  "parserOpts": {
+    "plugins": ["topLevelAwait"]
+  }
+}

.eslintrc

+{
+  "parser": "@babel/eslint-parser",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "requireConfigFile": false
+  },
+  "settings": {
+    "react": {
+      "version": "17.0.2"
+    }
+  },
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "singleQuote": true,
+        "parser": "babel",
+        "trailingComma": "es5",
+        "printWidth": 80
+      }
+    ],
+    "no-underscore-dangle": [
+      "error",
+      {
+        "allow": ["__filename", "__dirname"]
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
+    ],
+    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
+  }
+}

.gitignore

+# React files and directories
+.DS_Store
+dist-ssr
+*.local
+react-app-env.d.ts
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

.prettierrc

+{
+  "endOfLine": "auto",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "arrowParens": "always"
+}
\ No newline at end of file

package.json

+{
+  "name": "lets-do",
+  "version": "1.0.0",
+  "description": "Let's Do is a fun and intuitive ToDo application featuring our friendly owl mascot. Stay organized and on top of your tasks with ease. With Let's Do, you can easily manage your to-do list and track your progress. Get productive and have fun doing it with Let's Do!",
+  "main": "script.mjs",
+  "private": true,
+  "scripts": {
+    "start": "webpack serve",
+    "dev": "webpack",
+    "prod": "webpack --node-env=production",
+    "watch": "webpack --node-env=development --watch",
+    "clear": "rd /s /q dist",
+    "lint": "eslint ./src/**/*.{mjs,js} --fix && prettier --write ./src/**/*.{mjs,js}"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/HobiHo180294/lets-do.git"
+  },
+  "keywords": [
+    "todo",
+    "task-management",
+    "productivity",
+    "organizer",
+    "reminder",
+    "checklist",
+    "planner",
+    "schedule",
+    "goal-tracking",
+    "time-management",
+    "efficiency",
+    "prioritization",
+    "collaboration",
+    "teamwork",
+    "mobile-app",
+    "web-app",
+    "desktop-app",
+    "owl-mascot",
+    "lets-do"
+  ],
+  "author": "Yehor Potebenko <hitechnic.uu68@gmail.com>",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/HobiHo180294/lets-do/issues"
+  },
+  "homepage": "https://github.com/HobiHo180294/lets-do#readme",
+  "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-syntax-top-level-await": "^7.14.5",
+    "@babel/preset-env": "^7.20.2",
+    "babel-loader": "^9.1.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^8.31.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-webpack-plugin": "^3.2.0",
+    "group-css-media-queries-loader": "^4.3.0",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "image-webpack-loader": "^8.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
+    "postcss": "^8.4.20",
+    "postcss-loader": "^7.0.2",
+    "postcss-preset-env": "^7.8.3",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "normalize.css": "^8.0.1"
+  }
+}
\ No newline at end of file

src/pages/login/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Let's do</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <!-- * HEADER -->
+      <header>login</header>
+
+      <!-- * MAIN -->
+      <main class="main"></main>
+
+      <!-- * FOOTER -->
+      <footer>login</footer>
+    </div>
+  </body>
+</html>

src/pages/login/script.mjs

+import './index.html';
+import './style.scss';

src/pages/login/style.scss

+@import '~normalize.css';
+@import '@scss-modules/global';
+@import '@scss-modules/global-templates';
+
+.wrapper {
+  @extend %wrapper;
+}
+
+.main {
+  @extend %attach-footer-to-bottom;
+}

src/pages/main/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Let's do</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <!-- * HEADER -->
+      <header>main</header>
+
+      <!-- * MAIN -->
+      <main class="main"></main>
+
+      <!-- * FOOTER -->
+      <footer>main</footer>
+    </div>
+  </body>
+</html>

src/pages/main/script.mjs

+import './index.html';
+import './style.scss';

src/pages/main/style.scss

+@import '~normalize.css';
+@import '@scss-modules/global';
+@import '@scss-modules/global-templates';
+
+.wrapper {
+  @extend %wrapper;
+}
+
+.main {
+  @extend %attach-footer-to-bottom;
+}

src/scss/modules/_global-templates.scss

+%wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+%attach-footer-to-bottom {
+  flex: 1 1 auto;
+}

src/scss/modules/_global.scss

+html,
+body {
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: inherit;
+
+  &::before {
+    box-sizing: inherit;
+  }
+
+  &::after {
+    box-sizing: inherit;
+  }
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+body {
+  font-family: 'font', sans-serif;
+}

src/webpack/classes/_ModuleRulesBuilder.mjs

+import { devMode } from '../variables/_webpack-config-variables.mjs';
+import styleLoader from '../objects/styleLoader.mjs';
+import { buildCSSLoaders, buildJSLoaders } from '../loaders/_loaders-funcs.mjs';
+
+export default class ModuleRulesBuilder {
+  constructor() {
+    this.htmlRules = {
+      test: /\.html$/i,
+      loader: 'html-loader',
+    };
+    this.styleRules = {
+      test: /\.(c|sa|sc)ss$/i,
+      use: buildCSSLoaders(
+        styleLoader.postCSSLoader,
+        styleLoader.groupCSSMediaQueriesLoader,
+        styleLoader.resolveURLLoader,
+        styleLoader.sassLoader
+      ),
+    };
+    this.fontRules = {
+      test: /\.woff2?$/i,
+      type: 'asset/resource',
+      generator: {
+        filename: 'assets/fonts/[name][ext]',
+      },
+    };
+    this.imgRules = {
+      test: /\.(jpe?g|png|webp|gif|svg)$/i,
+      use: devMode
+        ? []
+        : [
+            {
+              loader: 'image-webpack-loader',
+              options: {
+                mozjpeg: {
+                  progressive: true,
+                },
+                optipng: {
+                  enabled: false,
+                },
+                pngquant: {
+                  quality: [0.65, 0.9],
+                  speed: 4,
+                },
+                gifsicle: {
+                  interlaced: false,
+                },
+                webp: {
+                  quality: 75,
+                },
+              },
+            },
+          ],
+      type: 'asset/resource',
+      generator: {
+        filename: 'assets/images/[name][ext]',
+      },
+    };
+    this.jsRules = {
+      test: /\.m?js$/,
+      exclude: /(node_modules|bower_components)/,
+      use: buildJSLoaders(),
+    };
+  }
+}

src/webpack/functions/_webpack-config-funcs.mjs

+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import ESLintPlugin from 'eslint-webpack-plugin';
+import { devMode, prodMode } from '../variables/_webpack-config-variables.mjs';
+import moduleRules from '../objects/moduleRules.mjs';
+
+function genFilename(ext) {
+  return devMode ? `[name].${ext}` : `[name].[contenthash].${ext}`;
+}
+
+function optimization() {
+  const config = {
+    splitChunks: {
+      chunks: 'all',
+    },
+    runtimeChunk: 'single',
+  };
+
+  if (prodMode) config.minimizer = [new CssMinimizerPlugin(), new TerserPlugin()];
+
+  return config;
+}
+
+function useWebpackPlugins() {
+  const base = [
+    new HtmlWebpackPlugin({
+      template: './pages/login/index.html',
+      minify: {
+        collapseWhitespace: prodMode,
+      },
+      chunks: ['login'],
+    }),
+    new HtmlWebpackPlugin({
+      template: './pages/main/index.html',
+      filename: 'login.html',
+      minify: {
+        collapseWhitespace: prodMode,
+      },
+      chunks: ['main'],
+    }),
+    new MiniCssExtractPlugin({
+      filename: genFilename('css'),
+    }),
+    new ESLintPlugin(),
+  ];
+
+  return base;
+}
+
+function buildModuleRules() {
+  const rules = [
+    moduleRules.htmlRules,
+    moduleRules.styleRules,
+    moduleRules.fontRules,
+    moduleRules.imgRules,
+    moduleRules.jsRules,
+  ];
+
+  return rules;
+}
+
+export { genFilename, optimization, useWebpackPlugins, buildModuleRules };

src/webpack/loaders/_StyleLoaderStorage.mjs

+import postcssPresetEnv from 'postcss-preset-env';
+
+export default class StyleLoaderStorage {
+  constructor() {
+    this.styleLoader = 'style-loader';
+    this.cssLoader = 'css-loader';
+    this.postCSSLoader = {
+      loader: 'postcss-loader',
+      options: {
+        postcssOptions: {
+          plugins: [postcssPresetEnv],
+        },
+      },
+    };
+    this.groupCSSMediaQueriesLoader = 'group-css-media-queries-loader';
+    this.resolveURLLoader = 'resolve-url-loader';
+    this.sassLoader = {
+      loader: 'sass-loader',
+      options: {
+        sourceMap: true,
+      },
+    };
+  }
+}

src/webpack/loaders/_loaders-funcs.mjs

+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import styleLoader from '../objects/styleLoader.mjs';
+
+function babelOptions(preset) {
+  const opts = {
+    presets: ['@babel/preset-env'],
+  };
+
+  if (preset) opts.presets.push(preset);
+
+  return opts;
+}
+
+function buildCSSLoaders(...extra) {
+  const cssLoaders = [MiniCssExtractPlugin.loader, styleLoader.cssLoader];
+
+  if (extra) cssLoaders.push(...extra);
+
+  return cssLoaders;
+}
+
+function buildJSLoaders() {
+  const jsLoaders = [
+    {
+      loader: 'babel-loader',
+      options: babelOptions(),
+    },
+  ];
+
+  return jsLoaders;
+}
+
+export { buildCSSLoaders, buildJSLoaders };

src/webpack/objects/moduleRules.mjs

+import ModuleRulesBuilder from '../classes/_ModuleRulesBuilder.mjs';
+
+const moduleRules = new ModuleRulesBuilder();
+
+export default moduleRules;