Initial project setup and teamwork organization

.env-example

@@ -0,0 +1,23 @@
+CT_PROJECT_KEY=
+CT_CLIENT_ID=
+CT_CLIENT_SECRET=
+CT_AUTH_URL=https://auth.australia-southeast1.gcp.commercetools.com
+CT_API_URL=https://api.australia-southeast1.gcp.commercetools.com
+
+## MM2
+
+CTP_PROJECT_KEY=mergemates
+CTP_CLIENT_SECRET=FkhY5qVk6Qk2sar3CD_CmCJE-F-V5lcK
+CTP_CLIENT_ID=4RGYbxNx06XWyKo5mFLosMQ5
+CTP_AUTH_URL=https://auth.australia-southeast1.gcp.commercetools.com
+CTP_API_URL=https://api.australia-southeast1.gcp.commercetools.com
+CTP_SCOPES=view_published_products:mergemates view_categories:mergemates manage_my_payments:mergemates create_anonymous_token:mergemates manage_my_quote_requests:mergemates manage_my_orders:mergemates manage_my_shopping_lists:mergemates manage_my_business_units:mergemates manage_my_profile:mergemates manage_my_quotes:mergemates
+
+## MM_ADMIN
+
+CTP_PROJECT_KEY=mergemates
+CTP_CLIENT_SECRET=WYfOviHMQFxXFNtWurOwi_wBkZKTUHvp
+CTP_CLIENT_ID=dZnENdU2BB32IKq7Bc_0AlsW
+CTP_AUTH_URL=https://auth.australia-southeast1.gcp.commercetools.com
+CTP_API_URL=https://api.australia-southeast1.gcp.commercetools.com
+CTP_SCOPES=manage_project:mergemates

.gitignore

@@ -1,8 +1,21 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 # compiled output
 /dist
 /tmp
 /out-tsc
 
+# Dependency directories
+node_modules/
+jspm_packages/
+
 # Runtime data
 pids
 *.pid
@@ -12,78 +25,59 @@ pids
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
-# Coverage directory used by tools like istanbul
+# Coverage directory
 coverage
-
-# nyc test coverage
 .nyc_output
 
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+# Grunt
 .grunt
 
-# Bower dependency directory (https://bower.io/)
+# Bower
 bower_components
 
-# node-waf configuration
+# node-waf
 .lock-wscript
 
-# IDEs and editors
+# Editor directories and files
 .idea
 .project
 .classpath
 .c9/
 *.launch
 .settings/
 *.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
+.vscode/
+!.vscode/extensions.json
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
-!.vscode/extensions.json
 
-# misc
+# Misc
 .sass-cache
 connect.lock
 typings
+.DS_Store
+Thumbs.db
 
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
+# REPL
 .node_repl_history
 
-# Output of 'npm pack'
+# npm
+.npm
 *.tgz
 
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
+# eslint
+.eslintcache
 
-# next.js build output
+# next.js
 .next
 
-# Lerna
-lerna-debug.log
+# dotenv
+.env
 
-# System Files
-.DS_Store
-Thumbs.db
+# Other
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierignore

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

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true
+}

README.md

@@ -1 +1,86 @@
-# eCommerce-Application
+# eCommerce-Application
+
+[![Link](https://img.shields.io/badge/View%20Demo-Online-brightgreen?logo=netlify)](https://commercetools-gamestore.netlify.app/)
+
+## 🎮 Description
+
+A modern e-commerce web app where users can browse products, add them to a cart, and simulate purchases. It's built with up-to-date frontend tools and serves as a starting point for real online stores.
+
+## Purpose
+
+The main goal of this project is to learn and apply best practices in frontend development using modern tools. It's built to be easy to grow and update, and it helps the team practice working together while connecting the app to **CommerceTools**, a headless e-commerce platform.
+
+## Technology stack
+
+- React
+- Typescript
+- Vite
+- Eslint, Prettier, husky
+- Jest
+- CommerceTools
+
+## 📜 Available Scripts
+
+The following scripts are defined in the `package.json` and can be run using `npm run <script>`:
+
+| Script    | Description                     |
+| --------- | ------------------------------- |
+| `dev`     | Starts the development server.  |
+| `build`   | Build for production.           |
+| `preview` | Preview the production build.   |
+| `lint`    | Lint the codebase.              |
+| `format`  | Format all files with Prettier. |
+| `prepare` | Prepares Git hooks using Husky. |
+| `test`    | Run tests with Jest.            |
+
+## 🚀 Running the Application
+
+Follow these steps to set up and run the application:
+
+### 1. Copy and rename the `.env-example` file
+
+Rename the `.env-example` file to `.env` in the root of the project directory.
+
+```bash
+cp .env-example .env
+```
+
+### 2. Set environment variables with your data
+
+### 3. Install dependencies
+
+Rename the `.env-example` file to `.env` in the root of the project directory.
+
+```bash
+npm install
+```
+
+### 4. Run the application
+
+To start the development server, run the following command:
+
+```bash
+npm run dev
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! To help us accept your changes quickly, please follow these simple rules:
+
+1. Create Pull Requests: All changes must be submitted via a Pull Request from your own fork of this repository.
+2. Implement your changes, keeping the coding style consistent.
+4. Lint and Format: Before committing, run the linter and formatter to ensure your code adheres to the project's standards.
+
+```bash
+npm run lint
+npm run format
+```
+
+5. Commit Your Changes: Commit your work with a clear and descriptive commit message.
+```bash
+git commit -m "feat: Add new awesome feature"
+```
+
+7. Open a Pull Request from your branch to the develop branch of the main repository. Provide a clear description of the changes you've made.
+
+We appreciate your help in making this GameStore even better!

ViteInstallRecomendation.md

@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+    extends: [
+        // Remove ...tseslint.configs.recommended and replace with this
+        ...tseslint.configs.recommendedTypeChecked,
+        // Alternatively, use this for stricter rules
+        ...tseslint.configs.strictTypeChecked,
+        // Optionally, add this for stylistic rules
+        ...tseslint.configs.stylisticTypeChecked,
+    ],
+    languageOptions: {
+        // other options...
+        parserOptions: {
+            project: ['./tsconfig.node.json', './tsconfig.app.json'],
+            tsconfigRootDir: import.meta.dirname,
+        },
+    },
+});
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x';
+import reactDom from 'eslint-plugin-react-dom';
+
+export default tseslint.config({
+    plugins: {
+        // Add the react-x and react-dom plugins
+        'react-x': reactX,
+        'react-dom': reactDom,
+    },
+    rules: {
+        // other rules...
+        // Enable its recommended typescript rules
+        ...reactX.configs['recommended-typescript'].rules,
+        ...reactDom.configs.recommended.rules,
+    },
+});
+```

babel.config.json

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}

eslint.config.js

@@ -0,0 +1,41 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+    ],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true 
+        },
+      ],
+    },ignores: [
+      "**/temp.js",
+      "config/*",
+      "jest.config.ts"
+    ],
+  },
+);

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/gamepad-solid.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Game Store</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

jest.config.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+
+import { Config } from 'jest';
+
+const config: Config = {
+    rootDir: './',
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/test/jest.setup.ts'],
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    moduleNameMapper: {
+        '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/mock/fileMock.js',
+        '\\.(css|less)$': 'identity-obj-proxy',
+    },
+    extensionsToTreatAsEsm: ['.ts', '.tsx'],
+};
+
+export default config;