Eval submission

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}\\server.js"
+    }
+  ]
+}

README.md

@@ -1,6 +1,120 @@
 ## Product List
 
-
 This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks.
 
 If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io.
+
+# What is it?
+
+A full stack app using Express on the backend and NextJS on the frontend. It simulates an Ecommernce site with a database and online store.
+
+# How to run
+
+```
+ npm i
+ npm start
+
+ open localhost:8000/generate-fake-data to generate some fake data
+
+ Open a new terminal
+
+ cd frontend
+ npm i
+ npm run dev
+
+```
+
+## Technologies used
+
+- Nextjs
+- Express
+- Nodemon
+- Faker
+- Mongoose
+- Tailwindcss
+
+## Features
+
+- Backend
+
+  - Retrieve a list of products with optional sort and filter parameters
+  - CRUD operation for both products and review
+
+- Frontend
+  - Calls backend for list of products with optional sort and filter parameters
+  - Responsive pagination numbers
+
+## File structure
+
+```
+- frontend
+  - app
+    - components
+      - Button.jsx
+      - PageNumber.jsx
+      - PaginationNumbers.jsx
+      - PaginationBar.jsx
+      - ProductCard.jsx
+      - ProductsContainer.jsx
+      - SearchAndFilterBar.jsx
+    - hooks
+      - useProducts.jsx
+    - utilities
+      - helpers.jsx
+    - layout.js
+    - page.js
+--- Backend files ----
+- models
+  - product.js
+  - review.js
+- routes
+  - main.js
+- utility
+  - requestHelpers.js
+  - responseHelpers.js
+- server.js
+```
+
+## component Structure
+
+```
+Home
+|
+| SearchAndFilterBar.jsx
+|
+| ProductsContainer.jsx
+|   |
+|   | ProductCard.jsx
+|
+| PaginationBar.jsx
+    |
+    | Button.jsx
+    |
+    | PaginationNumbers.jsx
+    |   |
+    |   | PageNumber.jsx
+    |
+    | Button.jsx
+
+```
+
+## Screenshots
+
+Products lists
+![Products](./static/products-grid.png)
+
+Filter by category
+![Filter by category](./static/product-category.png)
+
+Filter by search
+![Filter by bacon](./static/products-search.png)
+
+Sort by price
+![Sort by Price](./static/products-sorted.png)
+
+Pagification
+![Pagify 1](./static/products-pagification-1.png)
+
+![Pagify 2](./static/products-pagification-2.png)
+
+![Pagify 3](./static/products-pagification-3.png)

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/babel", "next/core-web-vitals"]
+}

frontend/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/components/Button.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function Button({
+  children,
+  onClick = (e) => {
+    e.preventDefault;
+  },
+  classText,
+}) {
+  return (
+    <button
+      className={`bg-[#904420] hover:bg-[#6F371C] text-white font-semibold py-1 px-2 rounded ${classText}`}
+      onClick={(e) => onClick(e)}
+    >
+      {children}
+    </button>
+  );
+}

frontend/app/components/PageNumber.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function PageNumber({ pageNumber, isCurrent, onSelect }) {
+  return (
+    <div className={"flex flex-grow justify-center"}>
+      <div
+        className={`w-8 text-center text-[#A5EAEF] font-semibold flex flex-col justify-center hover:cursor-pointer ${
+          isCurrent && "border-2 border-[#904420] rounded-md"
+        }`}
+        onClick={(e) => onSelect(e, pageNumber)}
+      >
+        {pageNumber}
+      </div>
+    </div>
+  );
+}

frontend/app/components/PaginationNumbers.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { calculatePaginationIndex, createKey } from "../utilities/helpers";
+import PageNumber from "./PageNumber";
+
+export default function PaginationNumbers({ pageData, onPageSelect }) {
+  const [pagesArray, setPagesArray] = useState([]);
+  const { current_page, max_page } = pageData;
+
+  useEffect(() => {
+    setPagesArray(calculatePaginationIndex(current_page, max_page));
+  }, [pageData]);
+
+  return (
+    <div className="flex flex-row w-full">
+      {pagesArray.map((pageNumber) => (
+        <PageNumber
+          key={createKey()}
+          pageNumber={pageNumber}
+          isCurrent={pageNumber === current_page}
+          onSelect={onPageSelect}
+        />
+      ))}
+    </div>
+  );
+}

frontend/app/components/PaginatorBar.jsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from "react";
+import Button from "./Button";
+import PaginationNumbers from "./PaginationNumbers";
+
+export default function PaginatorBar({
+  pageData,
+  fetchFunction,
+  queries,
+  setQueries,
+}) {
+  const { current_page, max_page } = pageData;
+
+  const onPageSelect = (e, page) => {
+    e.preventDefault();
+    const updatedQuery = { ...queries, page: page };
+    setQueries(updatedQuery);
+    fetchFunction(updatedQuery);
+  };
+
+  return (
+    <div className="w-full mb-3 flex justify-center">
+      <div className="w-full sm:w-1/2 flex flow-row justify-between">
+        <div className="w-1/5 flex justify-end">
+          <Button
+            classText={current_page === 1 && "hidden"}
+            onClick={(e) => onPageSelect(e, current_page - 1)}
+          >
+            {" "}
+            Prev{" "}
+          </Button>
+        </div>
+        <div className="w-3/5 flex justify-center">
+          <PaginationNumbers pageData={pageData} onPageSelect={onPageSelect} />
+        </div>
+        <div className="w-1/5 flex justify-start">
+          <Button
+            classText={current_page === max_page && "hidden"}
+            onClick={(e) => onPageSelect(e, current_page + 1)}
+          >
+            {" "}
+            Next{" "}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/components/ProductCard.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export default function ProductCard({ product }) {
+  return (
+    <div className="px-6 py-4">
+      <div className="bg-white  text-[#904420] h-full rounded-sm">
+        <div className="px-6 flex justify-between">
+          <div className="mt-1">
+            Category: <span className="font-semibold">{product.category}</span>
+          </div>
+          <div className="mt-1 text-2xl font-semibold">${product.price}</div>
+        </div>
+        <div className="flex flex-col mb-10">
+          <img className="px-6 py-4" src={product.image} alt="product image" />
+          <span className="px-6 text-3xl font-bold"> {product.name} </span>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/components/ProductsContainer.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function ProductsContainer({ children }) {
+  return (
+    <div className="w-full flex justify-center">
+      <div className="w-3/4 grid auto-rows-max grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-3">
+        {children}
+      </div>
+    </div>
+  );
+}