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