Junior Frontend - Onyekwere Precious

SOLUTION.md

@@ -0,0 +1,29 @@
+# Solution By Onyekwere Precious
+
+## Table of contents
+
+- [Decisions](#decisions)
+  - [Folder Restructuring](#folder-restructuring)
+  - [Use of Dummy Data Variable](#dummy-data-variable)
+  - [TailwindCSS config](#tailwindcss-config)
+  - [Use of Max Width](#max-width-utilization)
+
+## Decisions
+
+### Folder Restructuring
+
+Moving the Public folder back to the root;
+According to [NextJs documentation](https://nextjs.org/docs/advanced-features/src-directory) the public folder will not work correctly being placed inside the src folder.
+
+### Dummy Data variable
+
+I made use of a dummy data object variable in the src/pages/index.tsx line 73 as a way to replicate the event that the data will be provided by an API, this decision was mainly to get the Quantity Incrementer component to work in a way that seemed like the data was provided externally and not statically typed.
+
+### TailwindCSS config
+
+I chose to use only colors and font-family theme used in the Figma designs rather than extending the existing colors and font, this was to make streamlining the themes so only the required colors and fonts will be available.
+It also made development easier since with the help of my IDE extension I could easily find and select the appropriate values.
+
+### Max Width Utilization
+
+Even though this was not a requirement, I have found it important to use as opposed to not using a max width for the entirely of my page. This is to allow the view to look optimal even in a larger screen size, so images and divs are not overgrow contrary to the intended design.

package.json

@@ -1,23 +1,26 @@
 {
-  "name": "my-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "next": "12.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "devDependencies": {
-    "@types/node": "^18.7.13",
-    "@types/react": "^18.0.17",
-    "eslint": "8.23.0",
-    "eslint-config-next": "12.2.5",
-    "typescript": "^4.8.2"
-  }
+	"name": "my-app",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"next": "12.2.5",
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	},
+	"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: {},
+    autoprefixer: {},
+  },
+}