Welcome to the KodeArk Infotech Coding Challenge!
- TypeScript
- Next.JS
- React
- HTML5
- CSS
To complete this challenge, you will need to write a simple React based web app, and provide us the source files to be built.
The purpose of this challenge is to assess your skills and approach to composing a simple web app given a set of screens and an API feed. We will also assess the generated HTML, CSS, and TypeScript output.
This challenge is expected to take about 2-4 hours.
It's pretty simple. Using the provided screens as a reference, you'll need to build a set of React components to render the app. You'll also need to request a JSON feed, filter that data, and use the relevant fields.
Although this is a basic exercise, we'll be looking for simple, well-designed, performant, and tested code in the submission.
Please include a README with setup instructions, and any tests or other documentation you created as part of your solution.
Also, add the following info to your README:
- How did you decide on the technical and architectural choices used as part of your solution?
- Are there any improvements you could make to your submission?
- What would you do differently if you were allocated more time?
You will need to build the following 3 pages with React:
- A "Home" page
- A "Series" page
- A "Movies" page
The deployable solution should be built in a folder named dist with an entry point file of index.html.
Please create components for each part of the page (eg. header, content, footer, etc).
Assets are provided in the assets folder.
The pages should also be usable on mobile and tablet devices.
You can assume that you do not have to support legacy browsers without features such as fetch or flexbox.
Refer to the screens/1-home.jpg screen.
This will be your index.html screen.
You will need to display 2 tiles, which link to the "Series" page and the "Movies" page.
Refer to the screens/2-series.jpg and screens/3-movies.jpg screens.
For each page you will need to fetch this JSON feed feed/sample.json, then:
- Display the first 21
entries - Where the entry has a
releaseYearattribute value >=2010 - Sorted by the
titleattribute value in ascending alphanumeric order
For the "Series" page filter on:
- Where the entry has a
programTypeattribute value ofseries
For the "Movies" page filter on:
- Where the entry has a
programTypeattribute value ofmovie
The attributes you should use to display the entries are:
titleimages→Poster Art→url
You will also need to handle the loading and error states of fetching the JSON feed:
- "Loading" state screens/1.1-loading.jpg
- "Error" state screens/1.2-error.jpg
- You may use whatever you like as long as the solution is built using React or an equivalent library.
- TypeScript must be used instead of ES6.
- Next.JS is preferable.
- You're allowed to use material-ui
- We also prefer the use of minimal dependencies
- Fork this repo https://github.com/kodearkinfotech/react-coding-challenge
- Create a PR against
mainwith your changes.
Used libraries
- next.js
- tailwindcss for styling
- axios for http request
pages/api/feedas api end point
Use pnpm or npm to install dependency
pnpm install
pnpm devpnpm build
pnpm start