Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wearefx/react-challenge

Simple challenge in React for those with NO Typescript experience
https://github.com/wearefx/react-challenge

Last synced: 2 months ago
JSON representation

Simple challenge in React for those with NO Typescript experience

Awesome Lists containing this project

README

        

# Take-home challenge instructions

### Aim of this challenge:

- Develop a simple web app using [DELETE NON-APPLICABLE] React & TypeScript / React / VanillaJS
- You have full freedom over the styling of your app and while this is not as important to your overall score as functionality and code conventions we would expect your app to be responsive and follow best CSS practices (e.g. BEM naming conventions)
- App.tsx currently imports dummy json data - you **MUST** use data returned from an api call in your final submission, rather than this data.

### Running the app

To fire up the project run `npm install` and then `npm run start` in the root directory

### Requirements and expectations:
[DELETE NON-APPLICABLE]
#### Junior Developer
- Create at least two separate pages:
- Home page with ~10 items displayed
- Individual page to show info on each item, accessed by clicking on an item on the home page
- Use of at least 3 separate front-end components to display data (you may edit and use the existing `Card` component but `App` does not count 😉 )
- Integrate with one of the APIs listed below to retrieve data using a GET request (any method of implementation is allowed)
- https://openwhyd.github.io/openwhyd/API
- https://www.tvmaze.com/api
- https://elephant-api.herokuapp.com/
- Push to a repo on github/gitlab with properly labelled commits

#### Mid-Weight Developer
- Create at least two separate pages:
- Home page with ~10 items displayed
- Individual page to show info on each item, accessed by clicking on an item on the home page
- Use of at least 3 separate front-end components to display data (you may edit and use the existing `Card` component but `App` does not count 😉 )
- Integrate with one of the APIs listed below to retrieve data using an authenticated GET request (any method of implementation is allowed)
- https://developers.themoviedb.org/3/getting-started/authentication
- https://developer.spotify.com/documentation/web-api/
- https://developers.gettyimages.com/docs/
- Include a search component using queries to filter results
- Apply atomic design priniciples to the app structure
- Setup linting config and apply to your repo
- Push to a repo on github/gitlab with properly labelled commits

#### Senior Developer
- Create at least two separate pages:
- Home page with ~10 items displayed
- Individual page to show info on each item, accessed by clicking on an item on the home page
- Use of at least 3 separate front-end components to display data (you may edit and use the existing `Card` component but `App` does not count 😉 )
- Integrate with one of the APIs listed below to retrieve data using an authenticated GET request (any method of implementation is allowed)
- https://developers.themoviedb.org/3/getting-started/authentication
- https://developer.spotify.com/documentation/web-api/
- https://developers.gettyimages.com/docs/
- Include a search component using queries to filter results
- Apply atomic design priniciples to the app structure
- Setup linting config and apply to your repo
- Implement performant code and comment to show where you have made improvements or tested your output
- Keep the size of your built repo as small as possible
- Push to a repo on github/gitlab with properly labelled commits