-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
69 additions
and
0 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,69 @@ | ||
<img width="179" alt="Diamond Logo" src="./diamond.png"> | ||
|
||
|
||
[Diamond](https://www.diamondbybold.com/) is a Creative Technology agency that creates innovative products and inspiring digital experiences through technology. We specialize in creating digital solutions, combining our knowledge in: _Technology and Inovation_ (VR/AR/Gaming, Web, Web development, Microsoft and Frontend and mobile solutions) and _Creative & Marketing_ (UI/UX Design and Digital Marketing). | ||
|
||
## About the challenge | ||
|
||
|
||
This is a simple test in whitch you should be able to develop a _Vue/React/Angular/Svelte/Vanilla_ app , using the provided layout as reference. You'll need to make _requests_ to an API to get some _JSON_ data, filter the response and show them on the page. | ||
|
||
You're welcome to use any boilerplate/approach you feel confortable with, but try to keep it simple. We encourage you to use your favourite dev toolset to create an app that's robust. | ||
|
||
### The app should be a movie search with two pages: | ||
|
||
- **Home page:** with a search field and a results list; | ||
|
||
_Think about an empty state, a loading state and a no results state_ | ||
|
||
- **Movie page:** movie details page; | ||
|
||
_Think about a loading state and a no results state_ | ||
|
||
|
||
The goal of this challenge is to evaluate your HTML, CSS, Javascript e _Vue/React/Angular/Svelte/Vanilla_, API and general approach when developing a simple Web App, with a couple of pages and an API feed. The final HMTL, CSS and Javascript code is also taken in consideration. | ||
|
||
## First steps | ||
|
||
1. _fork_ the current repository into your personal account; | ||
2. Create a _branch_ with your name; | ||
3. Finish the challenge in the best way possible; | ||
|
||
**Send us your code in this two ways.** | ||
|
||
|
||
1. Send us a _PR_ (Pull Request); | ||
2. Send us an email with your source on a _zip_ to: [email protected] with the title **[Frontend - Test] - @your-name** | ||
|
||
### Hints/Suggestions | ||
|
||
- Write a good README with basic information (Ex.: how to run start the project and build it); | ||
- There's no layout for mobile, but if you take the time to make it responsive, that's a huge plus. We'd like to see your UI/UX skills too. | ||
- Feel free to work on and improve the provided layouts. Just think of them as guidelines. | ||
- There's a like button in the details page. It would be great if that data was persistent. | ||
- Think about using a CSS methodology, like BEM, ITCSS, etc; | ||
- Asking questions makes the world go round. We'll not penalize anyone for asking questions. | ||
- Sometimes the API server is slow, that being said, think about loading and emptying states throughout your app; | ||
- We're looking for something that tells us you understand concepts such as events, promises and reactivity and how those concepts are implemented in Javascript; | ||
- The use of unit tests will be taken into account, but not a probatory factor. | ||
- Your gir history will be very valuable. | ||
- The code will be evaluated by: semantics, structuring, readibility, size, elegance (amongst other things); | ||
|
||
### Needed Info | ||
|
||
#### API: | ||
|
||
We recommend that you use [OMDb API](http:https://www.omdbapi.com/), nevertheless you can use any other API that you prefer. | ||
|
||
#### Prototype / Style guide: | ||
|
||
Look inside the `/layout` folder, there you'll find what you need. | ||
|
||
- [Prototype](./layout/layout.png) | ||
- [Style Guide](./styleguide.md) | ||
|
||
### Contact or QA | ||
|
||
Use as [issues](https://github.com/ftonato/frontend-challenge-diamond/issues) ou envie-nos um email: [email protected] | ||
|
||
_Good luck 🍀_ |