Directory management

You are tasked with building a Directory Management System for local businesses using .NET Core
(Backend API) and Angular/ReactJS (Frontend). The system will allow users to manage business listings,
search for businesses, and view paginated results. Additionally, the system should focus on providing a
user-friendly experience through well-designed interfaces for CRUD operations and search
functionalities.

Submission process
To ensure a streamlined and professional submission of your project, please follow the steps below:

 Set up a public Github repository for your project.

 Structure the repository folders in a neat manner.
 Include a README file at the root of your repository that may include:
o Any extra steps/configurations to run your project locally.
o If you implemented any unique solutions or optimizations, explain them here.
o Any libraries or techniques used for enhancing performance or user experience.
o Challenges faced and how you resolved them.
 Exclude node_modules folder while pushing code to Github.
 Submit the repository link.

Requirements
1. Business Listing Management (CRUD Operations)
Weightage: 40%

Admins should be able to manage business listings with the following features:

• Create a Business Listing: A button labeled “Add New Business” should open a modal or
popup form. The form should contain the following fields:

• Business Name (required)

• Category (dropdown with predefined categories in the Categories table)

• Street Address (multi-line text area)

• City

• State

• Zip code.

• Phone Number (required, validated for Indian phone number format)

 • Website (optional, validated for URL format)

• Rating

• Include a Save button to submit the form.

Show validation messages for any incorrect input.

• Read (View) Business Listings:

• Display all business listings in a table with columns: Name, Category, Street address,
State/Zip (state and zip concatenated), Contact Number, Website, Rating

• Include action buttons for Edit and Delete in each row.

• The list should be sorted by business name by default.

• Update a Business Listing:

• Clicking the Edit button on a row should open a popup/modal form prepopulated with
the business details.

• The admin can update any field and click Save Changes.

• Display a success message or validation errors if any field fails validation.

• Delete a Business Listing:

• Clicking the Delete button should open a confirmation dialog.

• If confirmed, delete the record and remove it from the table.

• Show a toast/success message/popup: “Business deleted successfully.”

2. Search Functionality
Weightage: 20%

Implement a search bar with the following:

• Keyword: Searches in Business Name and City.

3. Pagination
Weightage: 20%

Implement pagination for the business listing table/page and search results:

• Show a maximum of 10 records per page by default.

• Include a page navigation bar at the bottom with options like Previous, Next, and page
numbers.

• Show total records and current page information (e.g., “Showing 1-10 of 25 records”).

4. Bonus Features
Weightage: 10%

 Give an option to customize the number of records to display per page.

 All pages are responsive and adapt seamlessly to various screen sizes.

 Proper error/exception handling – use toasts to show the errors.

 Implement sorting on columns Business Name and City.

• Allow users to sort the data in ascending or descending order by clicking on column
headers.

• Clicking on column header toggles the sort direction (ascending, descending).

• The current sort field and direction should be visually indicated (eg., using an arrow
icon up ↑ or down ↓).

• To keep it simplified, if user clicks on a new column (“City”) after sorting by

“Business name”, the sorting on “business name” is removed and only the new
column(“City”) is sorted.

5. Coding Standards
Weightage: 10%

Follow the coding standards mentioned below in this document.

User Interface Guidelines

 Business Listing Table: The table should include:

 o Hover effect on rows for better readability.

o Inline action buttons for Edit and Delete.

 Popup/Modal Forms

o Use real-time validation for better UX.

 Search Bar

o Position the search bar prominently on the page.

Database
The bacpac file to create the database and insert dummy records is attached with this
document.

To create the database using bacpac file, do the following:

1. Install/Open SQL Server Management Studio and connect to the instance of local SQL
Server.

2. In Object Explorer, right-click on Databases, and then select the Import Data-tier
Application menu item to launch the wizard.

3. Navigate to the bacpac file path and follow the instructions shown in the wizard.

CREATE TABLE Categories (

CategoryID INT IDENTITY (1, 1) PRIMARY KEY
, Name NVARCHAR(100) UNIQUE NOT NULL
);

CREATE TABLE Businesses (

BusinessID INT IDENTITY(1, 1) PRIMARY KEY
, Name NVARCHAR(255) NOT NULL
, Address NVARCHAR(500)
, City NVARCHAR(100)
, STATE NVARCHAR(100)
, ZipCode NVARCHAR(20)
, PhoneNumber NVARCHAR(20)
, Category NVARCHAR(100)
, Website NVARCHAR(255)
, Rating DECIMAL(3, 2)
, CreatedAt DATETIME DEFAULT GETDATE()
, UpdatedAt DATETIME DEFAULT GETDATE()
);
Evaluation Criteria

 Functionality: Ensure all CRUD operations, search, pagination and sorting work as expected.

 UI/UX Design: Intuitive and visually appealing interfaces.

  Performance: API response time and database query optimization.

 Code Quality: Use of clean coding practices, comments, and adherence to standards.

Coding standards
Naming Conventions
Namespaces
Rules
 Namespaces should use Pascal Case
 Namespaces should follow the folder layout of your source code
 Namespace root should be the project name
 Nested levels in a namespace should be descriptive of the code stored there and each level
should be separated by a period “.”

Good Namespace Examples

Good Namespace Notes
AcmeInc.Data Prefixed with company name

AcmeInc.OrderProcessing Uses Pascal case

Nested levels follow folder structure and are separated
AcmeInc.Reports.Customer
by a period “.”

Invalid Namespace Examples

Invalid Namespace Notes
AcmeIncReportsCustomer Each level is not separated by a period “.”

AcmeInc_Data The levels are separated by an “_” instead of a “.”

acmeinc.data Does not use Pascal case

Classes
Rules
 Classes should use Pascal Case
 Classes should be composed of one or more words.
 Classes should be descriptive of the type of object and data that they store.
 Classes should not use obscure acronyms.
Good Class Name Examples
Good Class Name Notes
Order Descriptive object name

CustomerInvoice Uses Pascal case

Invalid Class Name Examples

Invalid Class Name Notes
order Not Pascal case

TDE Uses obscure acronym

Interfaces
Rules
 Interfaces should use Pascal Case
 Interfaces should begin with a capital “I”
 Interfaces should be composed of one or more words
 Interface names should be short and descriptive
 Interfaces should not use obscure acronyms

Good Interface Name Examples

Good Interface Name Notes
IEntityCollection Descriptive object name

ILoggingService Uses Pascal case

Invalid Class Name Examples

Invalid Interface Name Notes
LoggingService Doesn’t begin with “I”

IGMCalc Uses obscure acronym

Methods
Rules
 Method names should use Pascal case
 Method names should be descriptive of the action performed
Good Method Name Examples
Good Method Name Notes
SubmitOrder Uses Pascal case

BuildMenu Descriptive of the action performed

Invalid Method Name Examples

Invalid Method Name Notes
submitOrder Uses camel case instead of Pascal case

ProcessData Not clear what the method is supposed to do

Parameters
Rules
 Parameters should use Camel Case
 Parameter names should be descriptive of the input

Good Parameter Name Examples

Good Parameter Name Notes
SubmitOrder(string orderNumber) Uses camel case

TestDatabaseConnection(string connectionString) Descriptive name

Invalid Parameter Name Examples

Invalid Parameter Name Notes
SubmitOrder(string on) Abbreviation is not descriptive

TestDatabaseConnection(string ConnStr) Doesn’t use camel case