Scribd
Upload
67 views2 pages

Frontend - Problem Statement BFGBG

The document outlines requirements for building a small app to display a list of customers and purchase details. The app should allow a shop owner to view, add, edit, and delete customer records. When a customer record is clicked, their details should populate in a right-side section. The app should use Angular, HTML, CSS and mock JSON data, with three main components - an app component containing child components for the customer list and details form. Key features include adding, updating and deleting customer records, and displaying updated data on refresh.

Uploaded by

Rahul Maru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views2 pages

Frontend - Problem Statement BFGBG

The document outlines requirements for building a small app to display a list of customers and purchase details. The app should allow a shop owner to view, add, edit, and delete customer records. When a customer record is clicked, their details should populate in a right-side section. The app should use Angular, HTML, CSS and mock JSON data, with three main components - an app component containing child components for the customer list and details form. Key features include adding, updating and deleting customer records, and displaying updated data on refresh.

Uploaded by

Rahul Maru
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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