Sprint 1: Repository Setup, Project Management, CommerceTools Integration, and Development Environment Configuration

.eslintignore

@@ -0,0 +1 @@
+tailwind.config.js

.github/pull_request_template.md

@@ -0,0 +1,32 @@
+# Description
+
+Fixes # (<!-- issue -->)
+
+<!-- Please include a summary of the changes and the related issue.  -->
+
+## Motivation
+
+<!-- Please include relevant motivation and context. List any dependencies that are required for this change. -->
+
+## Type of change
+
+<!-- Please delete options that are not relevant. -->
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+# How Has This Been Tested?
+
+<!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration -->
+
+- [ ] <!-- Test A -->
+- [ ] <!-- Test B -->
+
+# Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code in hard-to-understand areas
+- [ ] My changes generate no new warnings

.gitignore

@@ -1,3 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
 # Logs
 logs
 *.log
@@ -128,3 +153,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+yarn.lock

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn format
+yarn test
+yarn lint

.prettierrc

@@ -0,0 +1,13 @@
+{
+    "singleQuote": true,
+    "printWidth": 110,
+    "tabWidth": 2,
+    "semi": true,
+    "arrowParens": "always",
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "singleAttributePerLine": true,
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
+}

README.md

@@ -1 +1,85 @@
-# eCommerce-Application
+# eCommerce Application 🛍️🌐
+
+Welcome to our eCommerce application! This platform replicates real-world shopping experiences in a digital environment 🏪. It's a comprehensive online shopping portal that provides an interactive and seamless experience to users. From product discovery to checkout, the application ensures a smooth journey for the user, enhancing their engagement and boosting their purchasing confidence 🚀.
+
+Users can browse through a vast range of products 📚👗👟, view detailed descriptions, add their favorite items to the basket 🛒, and proceed to checkout 💳. It includes features such as user registration and login 📝🔐, product search 🔍, product categorization, and sorting to make the shopping experience more streamlined and convenient.
+
+An important aspect of our application is that it's responsive 📲, ensuring it looks great on various devices with a minimum resolution of 390px. This feature makes the shopping experience enjoyable, irrespective of the device users prefer.
+
+Key pages in the application include:
+
+- Login and Registration pages 🖥️
+- Main page 🏠
+- Catalog Product page 📋
+- Detailed Product page 🔎
+- User Profile page 👤
+- Basket page 🛒
+- About Us page 🙋‍♂️🙋‍♀️
+
+The application is powered by [CommerceTools](https://docs.commercetools.com/docs) 🌐, a leading provider of commerce solutions for B2C and B2B enterprises. CommerceTools offers a cloud-native, microservices-based commerce platform that enables brands to create unique and engaging digital commerce experiences.
+
+The application developed by teams of three 👨‍💻👨‍💻👨‍💻: 🏄[glitch-surfer](https://github.com/glitch-surfer), 🤹‍♂️[filmaxim](https://github.com/filmaxim) & 🙆‍♂️[pavelvl21](https://github.com/pavelvl21). 
+
+## Technology Stack 💻📚
+
+This app is SPA and develop with:
+- React ⚛️ (It allows the application to have high performance and responsiveness, start with create-react-app and then customize some dependancies)
+- TypeScript (It ensure type safety and improve the maintainability and scalability of the application 📘)
+- Webpack (supporting both development and production build modes)
+- ESlint (react+ts recommended rules to enforce consistent coding styles and identify potential issues in the codebase)
+- Prettier (to automatically format code, ensuring a consistent and readable code style)
+- Husky (to manage Git hooks, automating tasks such as code formatting and linting checks during the commit process)
+- Jest (as the testing framework for the project, enabling comprehensive testing of code functionality)
+
+### Key Pages
+
+1. **Login Page 🖥️🔐**  
+   The Login page is the user's entry point to the application. It have fields for entering the username and password. There validation checks in place to ensure that all fields are filled before allowing the user to submit the form. On successful login, the user directed to the main page of the application.
+
+2. **Registration Page 🖥️📝**  
+   The Registration page allow new users to sign up for the application. It have fields for entering user information including a username, email, and password. Once the user submits the form after entering all the necessary details, they will be registered and directed to the login page.
+
+3. **Main Page 🏠**  
+   The Main Page is the core of the application. This is where the users can browse the catalog of products. The page provide a user-friendly interface that allows users to easily navigate through different categories and products. Centralized Navigation is a key feature on this page, and include links to all functional pages of the application. Each link should redirect the user correctly to the corresponding page without any errors. The main page also displays active promo codes.
+
+4. **Catalog Product Page 📋**  
+   The Catalog Product page display a list of products in a specific category. The products displayed as interactive cards with a picture and essential details about the product. Users can click on these cards to get more detailed information about the product.
+
+5. **Detailed Product Page 🔎**  
+   The Detailed Product page is where the user can view detailed information about a specific product. It display an image of the product, a detailed description, the price, and the available options for the product. Users able to add the product to their basket from this page.
+
+6. **User Profile Page 👤**  
+   The User Profile page display the personal information of the user. This includes their name, date of birth, and a list of their addresses. This page also provide an interface for users to edit their personal details and addresses.
+
+7. **Basket Page 🛒**  
+   The Basket page is where users can view the products they have added to their basket. They can increase or decrease the quantity of each item or remove items from the basket. The page also display the subtotal and total prices and provide an option for the users to proceed to the checkout page.
+
+8. **About Us Page 🙋‍♂️🙋‍♀️**  
+   The About Us page give a brief introduction to the development team. It highlight each member's contributions to the project and provide personal details such as names, roles, short bios, relevant photos, and GitHub profile links.
+
+# Locally setup instruction & available scripts
+
+-  clone this repo
+
+- `yarn install`
+If you don't have yarn, `npm i --global yarn` before
+
+- `yarn start` 
+Runs dev-server on http://localhost:3000/
+
+- `yarn build`
+Build production bundle
+
+## Other scripts
+
+- `yarn test`
+Runs jest tests
+
+- `yarn lint`
+Runs js, jsx, ts, tsx files linting
+
+- `yarn format`
+Runs Prettier formatting across the codebase
+
+- `yarn eject`
+Give access to dependancies config files

package.json

@@ -0,0 +1,119 @@
+{
+  "name": "ecommerce-application1",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@babel/runtime": "^7.22.11",
+    "@commercetools/api-request-builder": "^6.0.0",
+    "@commercetools/platform-sdk": "^5.0.0",
+    "@commercetools/sdk-client-v2": "^2.2.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@headlessui/react": "^1.7.16",
+    "@heroicons/react": "^2.0.18",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.14.3",
+    "@mui/lab": "^5.0.0-alpha.143",
+    "@mui/material": "^5.14.7",
+    "@mui/styles": "^5.14.7",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/toastify-js": "^1.12.0",
+    "babel-loader": "^9.1.3",
+    "dayjs": "^1.11.9",
+    "formik": "^2.4.3",
+    "formik-material-ui": "^4.0.0-alpha.2",
+    "i18next": "^23.4.6",
+    "postcode-validator": "^3.8.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.2.1",
+    "react-redux": "^8.1.2",
+    "react-responsive-carousel": "^3.2.23",
+    "react-router-dom": "^6.14.2",
+    "react-scripts": "5.0.1",
+    "sass": "^1.64.2",
+    "toastify-js": "^1.12.0",
+    "yup": "^1.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --watchAll=false",
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "prepare": "husky install"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:react/recommended",
+      "standard-with-typescript",
+      "plugin:jsx-a11y/recommended"
+    ],
+    "overrides": [],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module",
+      "project": "./tsconfig.json"
+    },
+    "plugins": [
+      "react",
+      "jsx-a11y"
+    ],
+    "rules": {
+      "@typescript-eslint/semi": [
+        "error",
+        "always"
+      ],
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/member-delimiter-style": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-uses-react": "off",
+      "no-console": "warn"
+    }
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.22.10",
+    "@tailwindcss/forms": "^0.5.4",
+    "@types/react-slick": "^0.23.10",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^37.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.33.1",
+    "husky": "^8.0.3",
+    "prettier": "^3.0.1",
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "react-test-renderer": "^18.2.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6"
+  }
+}

public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<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" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <title>Mr. Robot</title>
+    <style>
+      body {
+        font-family: 'Roboto', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/@types/i18next.d.ts

@@ -0,0 +1,8 @@
+import 'i18next';
+import type { resources } from './resources';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    resources: typeof resources;
+  }
+}

src/@types/resources.ts

@@ -0,0 +1,5 @@
+import { en } from '../locales/en';
+
+export const resources = {
+  en
+};

src/Init.tsx

@@ -0,0 +1,13 @@
+import { Provider } from 'react-redux';
+import { App } from './components/App';
+import { store } from './slices';
+
+export const Init = () => {
+  return (
+    <Provider store={store}>
+      <div className="flex min-h-screen flex-col justify-between">
+        <App />
+      </div>
+    </Provider>
+  );
+};