├── .gitignore ├── README.md ├── audio-player ├── README.md └── audio-player-assets.zip ├── calendar-picker └── README.md └── movie-search └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About Significa 2 | 3 | Significa is a digital product agency based in Porto, Portugal. We specialize in creating user-centered designs for websites, mobile apps, and other digital products. Our services include user research, user experience design, interface design, back-end and front-end development. 4 | 5 | Significa's approach is based on the principles of human-centered design, which involves understanding the needs and behaviors of users in order to create products that are intuitive, effective, and enjoyable to use. We work with a range of clients, from startups to established businesses, in industries such as healthcare, finance, and education. 6 | 7 | In addition to our design services, we are also committed to push the boundaries of engineering by establishing a set of high-quality standards that command our development efforts to deliver the best possible digital products. 8 | 9 | Overall, Significa is a leading digital product agency in Portugal, known for our expertise in human-centered design and high-quality development. 10 | 11 | # About the challenges 12 | 13 | These challenges are made for those who – for any reason – don't have any project or code samples that allows us to analyse and evaluate their capabilities with accuracy. 14 | 15 | We know that, in certain cases, these challenges have to be solved in your own personal free time, so we tried our best to make them as easy or as complex as you decide to make them, hopefully without having too much impact in your personal life. Most times, even an incomplete challenge can give us enough information on what you're capable of. 16 | 17 | ## Challenges 18 | 19 | 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 the best app possible. 20 | 21 | ### A) Movie search 22 | 23 | This challenge is more data-driven. You will have to build an app that lists movies and shows some details. 24 | 25 | - **[Movie search instructions](/movie-search)** 26 | 27 | ### B) UI Challenges 28 | 29 | These challenges are more design-driven. Attention to detail and perfectionism is what we're looking for. 30 | 31 | Choose one of the following: 32 | 33 | - **[Audio player](/audio-player)** 34 | - **[Calendar picker](/calendar-picker)** 35 | 36 | ## How to participate 37 | 38 | 1. Choose your challenge and read the instructions. If needed, clone or download this repo. 39 | 1. Solve the challenge in the best way you can; 40 | 1. Send us an email to development@significa.co with a zip of your code or a link to your repo. 41 | 42 | ### Tips 43 | 44 | - Write a good README with basic information (e.g.: how to start the project and how to build it); 45 | - Asking questions is good. We will not penalize you for asking questions; 46 | - We're looking for signs you understand concepts such as events, promises, and reactivity, and how those concepts are implemented in Javascript; 47 | - Unit testing will be greatly valued; 48 | - The git history will be considered; 49 | - Your code will be evaluated by: semantics, structure, legibility, elegance (among other factors); 50 | 51 | ### Contact or doubts 52 | 53 | Use the [issues](https://github.com/Significa/frontend-challenge/issues) or send us an email: development@significa.co 54 | 55 | _Break a leg!_ 56 | -------------------------------------------------------------------------------- /audio-player/README.md: -------------------------------------------------------------------------------- 1 | # Audio player 2 | 3 | In this challenge you will be building an audio player. 4 | 5 | ## Main skills 6 | 7 | 1. UI perfectionism 8 | 2. Attention to detail 9 | 10 | ## What is expected 11 | 12 | An audio player able to 13 | 14 | - Play an pause audio files 15 | - Next and previous 16 | - Volume control (optional) 17 | - Shuffle (optional) 18 | - Loop (optional) 19 | 20 | ## Necessary information 21 | 22 | - [Figma prototype](https://www.figma.com/file/jbkDpuET4jQVQmJZqN8Hgd/Dev-challenge---Media-player?type=design&node-id=201%3A4165&t=98lin7BvmyS01ouM-1) 23 | - [Audio and cover files](./audio-player-assets.zip) 24 | -------------------------------------------------------------------------------- /audio-player/audio-player-assets.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/significa/frontend-challenge/3e6a774eb47d7187a3cccafccb8aa3a468bb9247/audio-player/audio-player-assets.zip -------------------------------------------------------------------------------- /calendar-picker/README.md: -------------------------------------------------------------------------------- 1 | # Calendar picker 2 | 3 | In this challenge you will be building a calendar picker. 4 | 5 | ## Main skills 6 | 7 | 1. UI perfectionism 8 | 2. Attention to detail 9 | 10 | ## What is expected 11 | 12 | A calendar picker that can 13 | 14 | - Select a start date and an end date 15 | - Have working shortcuts to select common options 16 | 17 | ## Necessary information 18 | 19 | - [Figma prototype](https://www.figma.com/file/rjtEKiv5QIOJiBprppqUVr/Dev-challenge---Calendar?type=design&node-id=0%3A1&t=ojJeRg2Y4UBcTVKJ-1) 20 | -------------------------------------------------------------------------------- /movie-search/README.md: -------------------------------------------------------------------------------- 1 | # Movie search 2 | 3 | This app should be a movie search with two pages: 4 | 5 | - **Home page:** search field and a list with the results; 6 | _Think about empty state, loading state and movie not found_ 7 | - **Movie page:** movie details page; 8 | _Think about loading state and movie not found_ 9 | 10 | The purpose of this challenge is to evaluate your HTML, CSS, Javascript and API skills and overall approach while composing a simple web app given a set of screens and an API feed. 11 | 12 | ## Main skills 13 | 14 | 1. Writing a solid application 15 | 2. Making API calls 16 | 3. Filter data and shape it to display on the UI 17 | 4. How well you improvise the app design 18 | 19 | ## What is expected 20 | 21 | - A functional app with the two screens (`Home` and `Details`); 22 | - A clean layout and design; 23 | - A way to tag movies as _favourites_ (and having them persist would be great!); 24 | 25 | ## Necessary information 26 | 27 | We suggest using [OMDb API](http://www.omdbapi.com/), although you can use any other API you prefer 28 | --------------------------------------------------------------------------------