diff --git a/.gitignore b/.gitignore
index 0eac30726..e55583c8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,5 @@
-# Logs
-logs
+# ───── Node.js General ─────
+node_modules/
*.log
npm-debug.log*
yarn-debug.log*
@@ -7,20 +7,35 @@ yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
-node_modules
-.serverless
-coverage
-dist
-dist-ssr
-*.local
+# ───── TypeScript / JavaScript ─────
+*.js
+!jest.config.js
+*.d.ts
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
+# ───── Build / Coverage ─────
+dist/
+dist-ssr/
+build/
+coverage/
+cdk.out/
+.cdk.staging/
+.serverless/
+
+# ───── Environment / Local / Temp ─────
+*.local
+.env
+.env.*
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
+package-lock.json
+# ───── IDEs and Editors ─────
+.vscode/
+!.vscode/extensions.json
+.idea/
+.DS_Store
+
+# ───── OS Artifacts ─────
+Thumbs.db
diff --git a/README.md b/README.md
index ef911c67f..6ec135ee9 100644
--- a/README.md
+++ b/README.md
@@ -1,71 +1,3 @@
-# React-shop-cloudfront
+CloudFront distribution domain name=https://d38ux1ekhnj0rd.cloudfront.net
-This is frontend starter project for nodejs-aws mentoring program. It uses the following technologies:
-
-- [Vite](https://vitejs.dev/) as a project bundler
-- [React](https://beta.reactjs.org/) as a frontend framework
-- [React-router-dom](https://reactrouterdotcom.fly.dev/) as a routing library
-- [MUI](https://mui.com/) as a UI framework
-- [React-query](https://react-query-v3.tanstack.com/) as a data fetching library
-- [Formik](https://formik.org/) as a form library
-- [Yup](https://github.com/jquense/yup) as a validation schema
-- [Serverless](https://serverless.com/) as a serverless framework
-- [Vitest](https://vitest.dev/) as a test runner
-- [MSW](https://mswjs.io/) as an API mocking library
-- [Eslint](https://eslint.org/) as a code linting tool
-- [Prettier](https://prettier.io/) as a code formatting tool
-- [TypeScript](https://www.typescriptlang.org/) as a type checking tool
-
-## Available Scripts
-
-### `start`
-
-Starts the project in dev mode with mocked API on local environment.
-
-### `build`
-
-Builds the project for production in `dist` folder.
-
-### `preview`
-
-Starts the project in production mode on local environment.
-
-### `test`, `test:ui`, `test:coverage`
-
-Runs tests in console, in browser or with coverage.
-
-### `lint`, `prettier`
-
-Runs linting and formatting for all files in `src` folder.
-
-### `client:deploy`, `client:deploy:nc`
-
-Deploy the project build from `dist` folder to configured in `serverless.yml` AWS S3 bucket with or without confirmation.
-
-### `client:build:deploy`, `client:build:deploy:nc`
-
-Combination of `build` and `client:deploy` commands with or without confirmation.
-
-### `cloudfront:setup`
-
-Deploy configured in `serverless.yml` stack via CloudFormation.
-
-### `cloudfront:domainInfo`
-
-Display cloudfront domain information in console.
-
-### `cloudfront:invalidateCache`
-
-Invalidate cloudfront cache.
-
-### `cloudfront:build:deploy`, `cloudfront:build:deploy:nc`
-
-Combination of `client:build:deploy` and `cloudfront:invalidateCache` commands with or without confirmation.
-
-### `cloudfront:update:build:deploy`, `cloudfront:update:build:deploy:nc`
-
-Combination of `cloudfront:setup` and `cloudfront:build:deploy` commands with or without confirmation.
-
-### `serverless:remove`
-
-Remove an entire stack configured in `serverless.yml` via CloudFormation.
+index.html Object URL= https://deploywebappstack-deploymentfrontendbucket67ceb713-tujnl4btndol.s3.us-east-1.amazonaws.com/index.html
diff --git a/frontend/.__gitignore b/frontend/.__gitignore
new file mode 100644
index 000000000..0eac30726
--- /dev/null
+++ b/frontend/.__gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.serverless
+coverage
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.eslintignore b/frontend/.eslintignore
similarity index 100%
rename from .eslintignore
rename to frontend/.eslintignore
diff --git a/.eslintrc b/frontend/.eslintrc
similarity index 100%
rename from .eslintrc
rename to frontend/.eslintrc
diff --git a/.serverless_plugins/serverless-single-page-app-plugin.js b/frontend/.serverless_plugins/serverless-single-page-app-plugin.js
similarity index 100%
rename from .serverless_plugins/serverless-single-page-app-plugin.js
rename to frontend/.serverless_plugins/serverless-single-page-app-plugin.js
diff --git a/index.html b/frontend/index.html
similarity index 100%
rename from index.html
rename to frontend/index.html
diff --git a/frontend/package.json b/frontend/package.json
new file mode 100755
index 000000000..3bbe6d927
--- /dev/null
+++ b/frontend/package.json
@@ -0,0 +1,73 @@
+{
+ "name": "my-store-app",
+ "version": "1.0.0",
+ "private": true,
+ "scripts": {
+ "start": "vite",
+ "build": "tsc && vite build",
+ "preview": "npm run build && vite preview",
+ "test": "vitest",
+ "test:ui": "vitest --ui",
+ "test:coverage": "vitest run --coverage",
+ "lint": "eslint --ignore-path .gitignore --fix src",
+ "prettier": "prettier src --write",
+ "client:deploy": "sls client deploy --no-config-change --no-policy-change --no-cors-change",
+ "client:deploy:nc": "npm run client:deploy -- --no-confirm",
+ "client:build:deploy": "npm run build && npm run client:deploy",
+ "client:build:deploy:nc": "npm run build && npm run client:deploy:nc",
+ "cloudfront:setup": "sls deploy",
+ "cloudfront:domainInfo": "sls domainInfo",
+ "cloudfront:invalidateCache": "sls invalidateCloudFrontCache",
+ "cloudfront:build:deploy": "npm run client:build:deploy && npm run cloudfront:invalidateCache",
+ "cloudfront:build:deploy:nc": "npm run client:build:deploy:nc && npm run cloudfront:invalidateCache",
+ "cloudfront:update:build:deploy": "npm run cloudfront:setup && npm run cloudfront:build:deploy",
+ "cloudfront:update:build:deploy:nc": "npm run cloudfront:setup && npm run cloudfront:build:deploy:nc",
+ "serverless:remove": "sls remove"
+ },
+ "dependencies": {
+ "@emotion/react": "^11.9.3",
+ "@emotion/styled": "^11.9.3",
+ "@mui/icons-material": "^5.8.4",
+ "@mui/material": "^5.8.7",
+ "@mui/styles": "^5.8.7",
+ "@types/yup": "^0.29.14",
+ "axios": "^0.27.2",
+ "formik": "^2.2.9",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-query": "^3.39.1",
+ "react-router-dom": "^6.3.0",
+ "yup": "^0.32.11"
+ },
+ "devDependencies": {
+ "@testing-library/jest-dom": "^5.16.4",
+ "@testing-library/react": "^13.3.0",
+ "@testing-library/user-event": "^14.2.1",
+ "@types/react": "^18.0.15",
+ "@types/react-dom": "^18.0.6",
+ "@typescript-eslint/eslint-plugin": "^5.30.5",
+ "@typescript-eslint/parser": "^5.30.5",
+ "@vitejs/plugin-react": "^1.3.2",
+ "@vitest/ui": "^0.18.0",
+ "c8": "^7.11.3",
+ "eslint": "^8.19.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-prettier": "^4.2.1",
+ "eslint-plugin-react": "^7.30.1",
+ "jsdom": "^20.0.0",
+ "msw": "^0.43.1",
+ "prettier": "2.7.1",
+ "serverless": "^3.20.0",
+ "serverless-finch": "^4.0.0",
+ "serverless-s3-cleaner": "^2.0.1",
+ "typescript": "^4.7.4",
+ "vite": "^2.9.13",
+ "vitest": "^0.17.1"
+ },
+ "msw": {
+ "workerDirectory": "public"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+}
diff --git a/public/mockServiceWorker.js b/frontend/public/mockServiceWorker.js
similarity index 100%
rename from public/mockServiceWorker.js
rename to frontend/public/mockServiceWorker.js
diff --git a/serverless.yml b/frontend/serverless.yml
similarity index 99%
rename from serverless.yml
rename to frontend/serverless.yml
index 69e529412..342658681 100644
--- a/serverless.yml
+++ b/frontend/serverless.yml
@@ -1,4 +1,4 @@
-service: my-store-app
+service: my-toy-store-app
frameworkVersion: "3"
diff --git a/frontend/src/assets/images/banner.jpg b/frontend/src/assets/images/banner.jpg
new file mode 100644
index 000000000..8ee5b9b05
Binary files /dev/null and b/frontend/src/assets/images/banner.jpg differ
diff --git a/frontend/src/assets/images/banner__.jpg b/frontend/src/assets/images/banner__.jpg
new file mode 100644
index 000000000..648185739
Binary files /dev/null and b/frontend/src/assets/images/banner__.jpg differ
diff --git a/src/components/AddProductToCart/AddProductToCart.tsx b/frontend/src/components/AddProductToCart/AddProductToCart.tsx
similarity index 100%
rename from src/components/AddProductToCart/AddProductToCart.tsx
rename to frontend/src/components/AddProductToCart/AddProductToCart.tsx
diff --git a/src/components/App/App.test.tsx b/frontend/src/components/App/App.test.tsx
similarity index 100%
rename from src/components/App/App.test.tsx
rename to frontend/src/components/App/App.test.tsx
diff --git a/src/components/App/App.tsx b/frontend/src/components/App/App.tsx
similarity index 100%
rename from src/components/App/App.tsx
rename to frontend/src/components/App/App.tsx
diff --git a/src/components/CartItems/CartItems.tsx b/frontend/src/components/CartItems/CartItems.tsx
similarity index 100%
rename from src/components/CartItems/CartItems.tsx
rename to frontend/src/components/CartItems/CartItems.tsx
diff --git a/src/components/Form/TextField.tsx b/frontend/src/components/Form/TextField.tsx
similarity index 100%
rename from src/components/Form/TextField.tsx
rename to frontend/src/components/Form/TextField.tsx
diff --git a/src/components/MainLayout/MainLayout.tsx b/frontend/src/components/MainLayout/MainLayout.tsx
similarity index 87%
rename from src/components/MainLayout/MainLayout.tsx
rename to frontend/src/components/MainLayout/MainLayout.tsx
index ec679471c..16edb7cd3 100755
--- a/src/components/MainLayout/MainLayout.tsx
+++ b/frontend/src/components/MainLayout/MainLayout.tsx
@@ -4,6 +4,7 @@ import Link from "@mui/material/Link";
import Container from "@mui/material/Container";
import Header from "~/components/MainLayout/components/Header";
import Box from "@mui/material/Box";
+import Banner from "../../assets/images/banner.jpg";
function Copyright() {
return (
@@ -24,6 +25,10 @@ const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+
+ {" "}
+
+