-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Update README.md Quick proof-reading! * Add files * Update README
- Loading branch information
Showing
29 changed files
with
209 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,62 +1,65 @@ | ||
<img width="179" alt="screen shot 2018-04-11 at 14 55 21" src="https://user-images.githubusercontent.com/4838076/38634265-6545f090-3d98-11e8-8869-c5e477648fdf.png"> | ||
|
||
[Significa](https://significa.pt/) is an Oporto based design studio founded in late 2013. Despite being specialised in Interaction Design and Brand Development, we believe that good design thinking can answer almost any question and solve most problems. We aim to provide meaningful design solutions to achieve the best user engagement possible in any situation. | ||
[Significa](https://significa.pt/) is an Oporto based digital studio founded in late 2013. Despite being specialised in Interaction Design and Brand Development, we believe that good design thinking can answer almost any question and solve most problems. We aim to provide meaningful design solutions to achieve the best user engagement possible in any situation. | ||
|
||
## About the challenge | ||
|
||
It’s a pretty simple teste, which you should to write a app in React and using the provided screens as reference. You’ll need to request a API to get a JSON feed, filter the data and print it on view. | ||
This is a pretty simple test, in which you should be able to write a React app, using the provided screens as reference. You’ll need to make requests to an API to get some JSON content, filter the data and print it on view. | ||
|
||
Use can use whatever boilerplate and approach you want, we just wouldn’t like to see a complex application but we encourage you use your favorites tools and ways to build a React application. | ||
You can use any boilerplate/approach you prefer, but try to keep it simple. We encourage you to use your favourite tools and packages to build a solid React application. | ||
|
||
### The app is website about movies with two screens: | ||
### The app should be a movie search with two pages: | ||
|
||
* **Home page:** with a search field and a list with the results; | ||
* **Home page:** search field and a list with the results; | ||
|
||
_Think about the empty state, loading state and movie no found_ | ||
_Think about empty state, loading state and movie not found_ | ||
|
||
* **Movie screen:** the details about a movie selected; | ||
* **Movie page:** movie details page; | ||
|
||
_Think about loading state and page not found_ | ||
_Think about loading state and movie not found_ | ||
|
||
The purpose of this challenge is to rate your skills about (HTML, CSS, Javascript and React Api) 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. | ||
|
||
### Two importante points: | ||
|
||
1. We didn’t create the screen of mobile version, so don’t forget to build a responsive app, we would like to see your design skills as well. | ||
2. On the screens there is a button like, it would be great if this information persisted | ||
The purpose of this challenge is to evaluate your HTML, CSS, Javascript and React API skills and overall approach while composing a simple web app given a set of screens and an API feed. We will also assess the HTML, CSS, and JS output. | ||
|
||
## Getting Started | ||
|
||
1. Fork this repository to your personal account; | ||
2. Create a branch with your name; | ||
3. Solve the challenge in the best way you can; | ||
|
||
**You can send your code in two ways.** | ||
**Send us your code in one of two ways.** | ||
|
||
1. Send us a PR with your solution with your personal email or other contact; | ||
2. Send an email to us with your code in a zip, to: [email protected] | ||
1. Send us a PR; | ||
2. Send us an email with your code in a zip to: [email protected] | ||
|
||
### Tips | ||
|
||
* Write a good Readme with basic informations: how to start the project and how to build it; | ||
* Write a good README with basic information (e.g.: how to start the project and how to build it); | ||
* There's no screens designed for the mobile version, but if you build a responsive app it's a big plus. We would love to see your design skills as well! | ||
* Feel free to work and improve on the available designs. Think of them as guidelines. | ||
* There's a "like" button on the details page. It would be great if this information is persistent! | ||
* Prefer to use a css methodology, such as BEM, ITCSS, etc; | ||
* Asking questions is good. We will not penalize you for asking questions; | ||
* The Api server is sometimes slow, so think about loading and empty states throughout your application; | ||
* The API server is sometimes slow, so think about loading and empty states throughout your application; | ||
* We're looking for signs you understand concepts such as events, promises, and reactivity, and how those concepts are implemented in Javascript; | ||
* Unit test will be a great differential; | ||
* Unit testing will be greatly valued; | ||
* The git history will be evaluated; | ||
* Your code will be evaluated by: semantics, structure, legibility, size, among other factors; | ||
* Your code will be evaluated by: semantics, structure, legibility, size, elegance (among other factors); | ||
|
||
### Necessary informations | ||
### Necessary information | ||
|
||
#### API: | ||
|
||
#### Layout screen: | ||
We suggest using [OMDb API](http://www.omdbapi.com/), although you can use any other API you prefer | ||
|
||
#### Screens / Assets / Styleguide: | ||
|
||
Take a look at the `/layout` folder, there you will find everything you need. | ||
|
||
Take a look on `/layout` folder | ||
[Invision Prototype](https://invis.io/K6GW19Z3FP8#/291216728_1-Search) | ||
[Styleguide](https://invis.io/5JGW1AFQHUX#/291309274_1-type) | ||
|
||
### Contact or doubts | ||
|
||
Use the [issues](https://github.com/Significa/frontend-challenge/issues) or send us a email: [email protected] | ||
Use the [issues](https://github.com/Significa/frontend-challenge/issues) or send us an email: [email protected] | ||
|
||
_Break a leg!_ |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.