IgorGoncalo Lexir | Frontend Developer Challenge

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+

package.json

@@ -9,15 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "next": "12.2.5",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-icons": "^4.4.0",
+    "uuidv4": "^6.2.13"
   },
   "devDependencies": {
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
+    "autoprefixer": "^10.4.8",
     "eslint": "8.23.0",
     "eslint-config-next": "12.2.5",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8",
     "typescript": "^4.8.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: { config: './tailwind.config.js' },
+    autoprefixer: {},
+  },
+};

products.json

@@ -0,0 +1,142 @@
+ [
+    {
+        "id":"1",
+        "name": "Umami Gin",
+        "brand": "Audemus",
+        "price": "28",
+        "image": "/images/products/audemusGin.svg"
+    },
+    {
+        "id": "2",
+        "name": "Pool Gin",
+        "brand": "Silent Pool",
+        "price": 32,
+        "image": "/images/products/poolGin.svg"
+    },
+    {
+        "id": "3",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id":"4",
+        "name": "Umami Gin",
+        "brand": "Audemus",
+        "price": "28",
+        "image": "/images/products/audemusGin.svg"
+    },
+    {
+        "id": "5",
+        "name": "Pool Gin",
+        "brand": "Silent Pool",
+        "price": 32,
+        "image": "/images/products/poolGin.svg"
+    },
+    {
+        "id": "6",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id":"7",
+        "name": "Umami Gin",
+        "brand": "Audemus",
+        "price": "28",
+        "image": "/images/products/audemusGin.svg"
+    },
+    {
+        "id": "8",
+        "name": "Pool Gin",
+        "brand": "Silent Pool",
+        "price": 32,
+        "image": "/images/products/poolGin.svg"
+    },
+    {
+        "id": "9",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id":"10",
+        "name": "Umami Gin",
+        "brand": "Audemus",
+        "price": "28",
+        "image": "/images/products/audemusGin.svg"
+    },
+    {
+        "id": "11",
+        "name": "Pool Gin",
+        "brand": "Silent Pool",
+        "price": 32,
+        "image": "/images/products/poolGin.svg"
+    },
+    {
+        "id": "12",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id":"13",
+        "name": "Umami Gin",
+        "brand": "Audemus",
+        "price": "28",
+        "image": "/images/products/audemusGin.svg"
+    },
+    {
+        "id": "14",
+        "name": "Pool Gin",
+        "brand": "Silent Pool",
+        "price": 32,
+        "image": "/images/products/poolGin.svg"
+    },
+    {
+        "id": "15",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id": "16",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id": "17",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id": "18",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id": "19",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    },
+    {
+        "id": "20",
+        "name": "Pink Gin",
+        "brand": "Stolckholms",
+        "price": 35,
+        "image": "/images/products/stockholmsGin.svg"
+    }
+]