Frontend - Problem Statement BFGBG

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 2

Problem Statement

You have to build a small app which shows list of customers (Name, No of Purchases, Amount)
and Its Details Section:

Description

1. As a Shop Owner, I should be able to get a list of all my customers for today’s purchase.
2. As a Shop Owner I should be able to Add a Customer, count of purchased items and the amount
of Items.
3. As a Shop Owner I should be able to Edit the record of Customer and Purchase.
4. When a shop owner clicks on any of the records, it should be populated in the details section on
the right section of the page.
5. The shop owner should be able to update data of individual customers.
6. Shop owners should have a feature to delete any of the records. And before deleting the record
the system should ask for confirmation.

Considerations

1. Candidates can use HTML, CSS (Flex, Grid or SCSS), Javascript and Angular.
2. For data, the population candidate can use mock json data.
3. On page refresh it will show the default data.
4. Application should be fully functional and dynamic.
5. Candidate can free to choose their styling, layouts and theming
6. For development approach, it should be component level development where your app should
have 3 components:
1. app – Main component which will have 2 child components on App root level
2. app-customer-list – This is a child of app component to show a list of all Customers and
their details of purchase with an Action column of Edit and Delete record.
3. app-details - This is a child of app component to show and update details of single
Customers and his/her details of purchase data in a Form. User should have a button to
update the data and after clicking on the update button it should reflect in the list.

Additional:

1. Try to use the latest version of any framework (eg: Angular 8 or above).
2. We are assessing based on your code structure and the approaches.
3. Try to achieve maximum functionalities.
Rough Mock Up:
This is just a rough layout to get an idea about how the application should appear to the user. You are
free to write your own theming.

You might also like