Home assignment for the Angular Developer position

Dear candidate,

This repository serves as the working environment for your home assignment. You have 10 hours to solve the tasks described below. Please document your work precisely, so that we understand every detail of your solution.

Table of Contents

1. Summary
2. Tasks
3. Suggestions

Summary

The goal of this programming exercise is to create a single page app.

You should build some basic widgets:

• Bar Chart
  • simply visualizing some trivial data
• Text Box, with configurable
  • Title
  • Arbitrary number of paragraphs containing simple text
  • Column number should be configurable (default=2)
• Table
  • simply visualizing some trivial data
  • one header row
  • arbitrary number of data rows

Every component should get their data as component input!
You should define clear interfaces regarding expected inputs!
Every widget should have a reasonable max size!

The project should contain an API service.

With the following endpoints:

• /api/data/bar_chart/{ID}
• /api/data/text_box/{ID}
• /api/data/table/{ID}

API endpoints are returning JSON data according to the interface you define for the components

The Page should have a Menu on the left side of the page:

• Bar Chart
• Text Box
• Table

Clicking on these menu items an input box and a submit button should appear, where user can enter a resource identifier (number) On submit the data should be loaded through the API endpoints, and the component should visualize it!

Tasks

-1. Please read the task description before you start to work :)

0. We expect at least one commit per task number (where task number > 0)! Feel free to commit more, if you feel that a sub-task should have its own commit!

1. Set up an angular project! Please use scss for styling, use routing!

2. Build the SPA including the widget components, and the service!

3. Since the API is not avaiable find a way to mock API calls on the frontend! Every API call should return sufficient randomized data (where possible).

4. Create a Directive that will highligh/unhighlight table rows with a background color when user clicks on them! Use it in the Table widget!

5. Write reasonable unit tests!

6. BONUS: Could you add an additional menu item with its subpage, called "Dynamic Widgets", where

• the user can select a widget type from a select input
• user can enter a resource ID
• when clicks on a "Generate" button the selected component should be added to the page dynamically
• the user should be able to add multiple widgets
• the user should be able to remove a widget

7. BONUS: make it look a bit more fancy using scss!

8. Open a pull request to the main branch!

Suggestions

• The 6th and 7th BONUS tasks are optional. Spend time on them only if you have some extra.
• It is not a problem if you run out of time, at the end of the allocated timeslot open a pull request with what you have by then
• Some parts of the exercise are deliberately not defined properly, so that you have some freedom to decide ( with this we are testing your decisions, as well ;) )

In case you have any questions regarding the data or the task itself, feel free to reach out to Gabor Palasti ( gpalasti@iquantsolutions.com ).

Many thanks for taking the time and for dedicating effort to the excercise.