artikandri / klumo

Advanced search box for an e-commerce website made with Vite + Vue 3 + Vanilla SCSS + Typescript. Accessible on https://super-swan-113fd0.netlify.app/

klumo

Adapted from a given mockup with following criterias:

Frontend Development Assessment

Goal of the assessment is to provide us insight into how you create and structure code. The assessment should be as close as possible to a real task for the searched role. Pixel perfect design (e.g. colors, borders, sizes) shouldn’t be a focus of the solution. Rather it is important for us to understand:

1. How code (e.g. DOM Tree, Separation of Concerns) is structured
2. How understandable, maintainable and extendable code is created
3. Basic functionality is covered

Task: Extend Website Header

Our current website header reaches its limitations. We need to add more space for future products (e.g. Canvas, Digital Download, Gift Cards, ..). Additionally we need to add a search bar to make the 2000+ posters searchable. Afterwards you find a simplified mockup. A similar example can be found at displate.com. The solution should have the following features:

1. Searchbar with Animated Input
2. Hover-Over on the 3 icons and text on the right side
3. Sticky search bar (menu replaces search bar) as soon scrolling starts
4. Mobile menu which reuses the DOM Elements visible in the desktop view
5. CSS only mobile menu

The deployed version is accessible on https://super-swan-113fd0.netlify.app/

How to run the project

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Screenshots