Adapted from a given mockup with following criterias:
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:
- How code (e.g. DOM Tree, Separation of Concerns) is structured
- How understandable, maintainable and extendable code is created
- Basic functionality is covered
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:
- Searchbar with Animated Input
- Hover-Over on the 3 icons and text on the right side
- Sticky search bar (menu replaces search bar) as soon scrolling starts
- Mobile menu which reuses the DOM Elements visible in the desktop view
- CSS only mobile menu
The deployed version is accessible on https://super-swan-113fd0.netlify.app/
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
Lint with ESLint
npm run lint