Addressbook

We have created CRUD pages for Country. They were very simple, just do CRUD on single table, no relationship, all read, write, update, delete on a single table. In this tutorial, we will create UI for managing states. We will learn some new things today. Search dropdown for Country In Country search page, Countries.tsx, we had text box for searching countries, which was enough for countries page. What else we need to search a country?...

Lets begin creating the UI for City management. We will start with City search. The Country search was simple, just textbox for search input and get data from single table. State search had a dropdown for country, so that we could filter states by country, it was a new thing to learn for us. Now City search page will have a search textbox and State dropdown. State dropdown In src\dropdowns folder, create a new file StateDropdown....

In previous articles we created UI for Country, State and City. In each article we introduced and learned something new. This will be the last article of part one, in which we will create CRUD app having 5 entities. Timezone and Translation CRUD pages The CRUD pages for Timezone and Translation will be developed in the same pattern of State pages. A Country may have multiple states. Similarly a Country may have multiple Timezones and multiple Translations....

In the first part we built React frontend for managing city, state and countries. The backed API was built in ASP.NET Core web API. We created 5 entities, which have their own Repository, dtos, controller and services. Country State City Translation Timezone Now in the second part, we will develop the contact manager app. It is inspired from Google Contacts web app. We will build the following features in our address book....

Database Analysis and Design Before we start the database design for contacts, lets have a look at Google Contacts, which is our original inspiration to start this project. We have added a new contact with randomly generated name, address and phone number. A contact will obviously have First Name, Middle and Last Name. In Google contacts, we can also save his company name, job title and department. We cannot save job history, there are not multiple company information for a contact, we can save only one company, job title and department....

After creating the entities and migrating the changes to SQL Server database, the next task is to create DTOs for the entities. In part one, we had 5 entities and in this part, we created 13 new entities. Lets start creating the DTOs now. DTOs for Label Definition Entities We create 3 DTOs for each entity. One for response, one for create/edit and the last one for search request. Create a new file PhoneLabel....

After creating entities and dtos, the next step is to create repository classes for our entities. We will create the repositories for the 13 new entities created in this part. Repositories for Label Definitions We have 6 entities for different labels. The label entities are the simplest. Each label entity contains an ID (primary key) and label (text value). Lets start with creating repository for the PhoneLabel entity. To add a repository for an entity, we create 3 files as follows....

In the second part we added 13 new entities, their related Dtos, then we added 13 new repositories for each entity. We will continue with adding service layer for each repository now. Interface for PhoneLabel We have 6 entities/tables for label definitions like phone label, email label etc. We will create service classes for each label. Repository classes only do database and Entity Framework related work. Any operation that is specific to domain or business, must be done in Services....

So far in the second part, we have written the server side code to manage Contacts, no React code yet. We have developed almost all the server side code, but not dealt with images yet. In this article you will learn how to upload profile picture for the contact. Where to Store Images? We can store images in a web app at different locations. Some of the common storage options are...

Our server side is complete, we have created the API in ASP.NET Core. Now we will work on the React app. Create the Dtos Open the React app in Visual Studio Code. So far we have created the Dtos for City, State and Country in part one. Now we will create the remaining Contact related Dtos. As usual we have three Dtos for each entity, Response, Edit and Search. In this article we will provide the code snippet of Dtos of three entities....