- Accessibility: I ensured when rendering the list of items, they were rendered in an anchor tag to allow for Sighted Keyboard Users to navigate the PLP comfortably.
- Responsiveness: Select Flex and Product Grid are both responsive to sm/md/lg screen sizes.
- Animation: I thought it'd be fun to do that typewriter animation, I prompted ChatGPT and it spat that at me, asked for a few more customizations and BOOM. Arguably the easiest part of the tech test. AI will rule the world.
- Animation: added little scale animations for hover: and focus:, I think it has a nice effect
- Design: minimal, when in doubt, minimal, thanks for the clean font. I had a look at images for a possible navbar, but all came out lame
- Dependencies: added Tailwind via CDN in index.html because couldn't for the life of me figure out StackBlitz dependencies/terminal
- Accessibility: given more extensive data, I would give every element a descriptive alt
- Implement a dark/light mode
- Responsiveness: Had a real headache figuring out where I wanted the Brands checkbox to flex, could be better.
- Build out a navbar with more branding, build more of a colour pallette
- If I added images, I'd pull out the main colours with a color picker and then find a complimenetary pallette on coolor.com
- Accessibility: if pagination required, make pagination target size 48px*48px (largest of industry standards, Google's specifically)
(View site)[https://vue-hulla-ta-5r3pie.stackblitz.io]
Sorry I didn't show process in commits. First time using Stackblitz
Cheers!