Developer Assessment Test: Product Filtering, Admin Reporting, and Prisma Model Extension

[subyster]

(This PR description is the same as added at the beggining of README.md file)
This project implements all three parts of the technical challenge using Next.js, Prisma, Tailwind CSS, shadcn/ui, and React best practices.

🚧 Setting things up

To make sure project runs as expected a few steps first:

• Clone the repository.

git clone https://github.com/subyster/next-prisma-tailwind-ecommerce

• Checkout to Assessment branch.

git checkout arthur-test

• Create your own .env files in both admin and storefront projects. (Some variables won't be used here)

• Install dependencies in both admin and storefront projects.

bun install

• Setup a project in Supabase (recommended) or PostgreSQL database of your choice

  • Create an account or login with your account in Supabase
  • Create a new project, saving project's password (you'll need that in next step)
  • In order to make Prisma terminal commands work, first I followed steps 1 and 3 in this connecting Prisma to Supabase tutorial.

• After setting up your DATABASE_URL in .env file run this command to create tables in database.

bun run db:push

• Then run this to pupulate tables.

bun run db:seed

• Now you should be able to run each project with.

bun run dev

Note: I took some time trying to make SMTP and JWT variables to work, but then realized they weren't necessary to this accessment. As for part 2 in admin report page, tested whole page without permission control, then added it to middleware.ts matcher list.

---

1️⃣ Rebuild product filters on the storefront page

• Fixed Brand and Categories filters as they were using conflicting versions of cmdk and shadcn's CommandItem style.
• Made so Categories filter can handle more than one item selected and added new A-Z and Z-A options to Order filter.
• Created new TextSearch and PriceRange filters. Those filters use a debounce feature so user won't have to type enter to filter page with them.
• Updated the Prisma query to handle:
  • Filtering products by selected categories (category.title IN [...]).
  • Filtering products by title, price range and two new orderBy options (A-Z and Z-A).
• Used next/navigation hooks (useSearchParams, useRouter, usePathname) to synchronize filters with the URL query string.
• Ensured the page updates dynamically as filters change, without full reload.
• Note: Removed "Featured" option in SortBy because it wasn't asked for in assessment notes, but kept AvailableToggle just because I thought it was a nice filter.

---

2️⃣ Build an admin reports page with charts or tables

• Created a new ReportsPage under the admin app.
• Ensured that page is only accessible to administrators.
• Displayed two main data tables:
  • Last Orders: showing recent orders with date, total, and customer email.
  • Top-Selling Products: ranked list of products sorted by total quantity sold.
• Pulled data from Prisma with:
  • Relations: included orderItems.product and user.
  • Ordering: sorted orders by createdAt DESC.
• Formatted data client-side for easy table consumption.
• Added Brand and Categories filters, the same ones used in storefront products page.
• Created new DateRange filter based on shadcn docs. Had to install shadcn's Calendar for that.
• Ensured the page updates dynamically as filters change, without full reload.
• Applied a small fix with date-fns to ensure the end date (to) includes the full day (i.e., endOfDay(to)).

---

3️⃣ Extend the Product model for cross-sell recommendations

• Updated the Prisma schema to add a crossSellProducts relation on the Product model.
• Added crossSell in seed.ts so after running migration and database commands products are randomly given crossSell relations. Tested field in Supabase pannel.
• Added a You Might Also Like section:
  • On the Product Details page: showing related products to encourage cross-selling.
  • On the Cart page: displaying recommended products alongside the shopping cart. Here ensured that this section showed crossSell products related to all items in cart while also preventing duplicated suggestions and items already in cart to appear there.
• Ensured crossSell suggestions are clickable and take the user to product page while suggestions list is aligned with project design and responsiveness.
• Implemented better UX feedback when adding products to the cart:
  • Integrated a toast notification using shadcn/ui. Chose that one because it was already installed in project and I'm used to work with it.
  • Gave users immediate visual confirmation of their action when a product is added or removed from cart. Toast will also appear if there's a try/catch error when adding/removing items from cart.

---

🚀 Final Touches

• Used TypeScript types, especially on date-related states (DateRange).
• Ensured no runtime errors when filters are partially filled (e.g., only from date selected).
• Maintained consistent design and UX patterns across storefront and admin pages.

[vercel]

@subyster is attempting to deploy a commit to the Sesto Team on Vercel.

A member of the Team first needs to authorize it.

[sesto-dev]

It was okay for your assignment to use my repo as the base?

[subyster]

My bad, you can close here if you want to. I realized it was pointing to your repository right after the pull request was created. Then I created another one using my fork as the base.

[sesto-dev]

That's quite alright. I was just curious whether the people who assigned your task instructed you to use and edit my repo or whether you decided to do it on your own.

[subyster]

They've sent me your repo as a base for my accessment test.
Also, if you'd like to see my changes. You should take a look in that cmdk and CommandItem changes, the Combobox filters in your app have a breaking change in version 1.0.0+ of cmdk. You can read more about that here.