https://github.com/StreamCo/web-coding-challenge
Web Coding Challenge
https://github.com/StreamCo/web-coding-challenge
Last synced: 8 months ago
JSON representation
Web Coding Challenge
- Host: GitHub
- URL: https://github.com/StreamCo/web-coding-challenge
- Owner: StreamCo
- Created: 2016-11-09T22:10:21.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2025-04-10T04:50:27.000Z (9 months ago)
- Last Synced: 2025-04-23T12:53:57.127Z (8 months ago)
- Homepage:
- Size: 588 KB
- Stars: 64
- Watchers: 21
- Forks: 81
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-recruitment-tests - StreamCo - You will need to build the following 3 pages with React, a "Home", a "Series", and a "Movies" page. (React.js)
README
# Stan Web Coding Challenge
> Welcome to the Stan Web Coding Challenge!
## Overview
To complete this challenge, you will need to write a simple [Svelte](https://svelte.dev/), [React](https://react.dev/), or equivalent web app.
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 JS** output.
This challenge is expected to take around 2-4 hours.
## The Challenge
It's pretty simple. Using the provided screens as a reference, you will need to build a set of 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 the setup instructions, and any tests or other documentation you created as part of your solution.
You may also add the following information 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?
## Details
You will need to build the following 3 pages:
- 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`.
### "Home" Page
Refer to the [screens/1-home.jpg](./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.
### "Series" and "Movies" Pages
Refer to the [screens/2-series.jpg](./screens/2-series.jpg) and [screens/3-movies.jpg](./screens/3-movies.jpg) screens.
For each page you will need to fetch this JSON feed [feed/sample.json](https://raw.githubusercontent.com/StreamCo/react-coding-challenge/master/feed/sample.json), then:
- Display the first 21 `entries`
- Where the entry has a `releaseYear` attribute value >= `2010`
- Sorted by the `title` attribute value in ascending alphanumeric order
For the "Series" page filter on:
- Where the entry has a `programType` attribute value of `series`
For the "Movies" page filter on:
- Where the entry has a `programType` attribute value of `movie`
The attributes you should use to display the entries are:
- `title`
- `images` → `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](./screens/1.1-loading.jpg)
- "Error" state [screens/1.2-error.jpg](./screens/1.2-error.jpg)
## FAQ
### What language, framework, build tool... should I use?
You may use whatever you like as long as the solution is built using [Svelte](https://svelte.dev/), [React](https://react.dev/), or an equivalent library.
We prefer the use of [TypeScript](https://www.typescriptlang.org/).
We prefer it if you did not use any third party CSS frameworks.
We also prefer the use of minimal dependencies.
## Useful Links
- [Bitbucket](https://bitbucket.org/) - Source code hosting, with free private repositories for small teams.
- [Google Fonts - Raleway](https://fonts.google.com/?selection.family=Raleway)
- [Svelte](https://svelte.dev/)
- [React](https://react.dev/)
## Other Notes
Please send through any other code or projects that you're proud of and would like to share with us.
Any feedback on the coding challenge once you're done is also appreciated!