https://github.com/killshot13/fresh-challenge
https://github.com/killshot13/fresh-challenge
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/killshot13/fresh-challenge
- Owner: killshot13
- Created: 2021-02-18T00:56:30.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-27T10:36:41.000Z (about 1 year ago)
- Last Synced: 2025-02-07T12:46:42.512Z (3 months ago)
- Size: 5.49 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fresh Tech Coding Challenge
> Welcome to the Fresh Tech Coding Challenge!
## Overview
To complete this challenge, you will need to write a simple React.js & Node.js 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.
This challenge is expected to take ~2 hours.
## The Challenge
Using the provided screens/*.jpg as a reference, you'll need to build a set of React components to render the app. You'll also need make an API call to the local server to request the needed data.
> You do not have to match the screens/*.jpg exactly, feel free to use any css or css framework you like (Fresh uses Semantic UI). Assets are provided in the `assets` folder.
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?
## Details
You will need to build the following 3 pages with React:
- A "Home" page
- A "Series" page
- A "Movies" page
The pages should also be usable on mobile and tablet devices.
> You can assume that you do not have to support legacy browsers
### "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:
- 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)
## Directory Structure
`/src` client React.js app files
`/public` publicly served files for client app, ie: index.html
`/server` Node.js server files