Hello! 👋

Thanks for your time to take this coding test. Please read the following instructions carefully.

The challenge is to complete the 'Category' Page according to the design mocks.

This task should take no longer than a coupe of hours to complete & is here to assess your ability to write Javascript, HTML and CSS in a real world scenario.

The project has been completely setup for you, including the page routes, and API calls. Therefore, the code you need to write is minimal.

This is a Next.js app with styled-components.

You will need Node.js version 16.

• Navigate to the front-end-take-home directory in your terminal
• Install the dependencies npm install
• Start the development server npm run dev

Open http://localhost:3000 with your browser, and you should see the home page.

You can also open storybook npm run storybook to check out some components already built.

Complete the Category Page (To get there, click on one of the categories on the Home Page).

• The layout should be responsive and match the mocks (4 columns on desktop, 3 on tablet, 2 on mobile).
• The page should visually match the mocks as closely as possible.
• The show name of the Card should be truncated to a single line.
• The description of the Card should be truncated to 3 lines.
• The page only needs to work on the latest Chrome version.
• Commit early and often, so that we can see how problems are solved.

• Add a button for ascending and descending sorting to the listings according to design-mocks/mock-sort.png. (If you still have time)

• Review the mocks in design-mocks directory. There is a mock design for desktop, laptop, tablet and mobile.
• The logical order to complete the tasks are:
  • Build the Show Card component.
  • Render the Show cards on the Category Page.
  • Make it responsive.
  • Add alphabetical sorting (If you still have some spare time).
• You do not need to build everything from the scratch. You can reuse the components already built in this app if you want.

• Push the results to some remote source control (like Git).
• Email the repository link to your point of contact.

Good luck,

The SCA Digital Team