Address Book

A simple address book using ASP.NET Core and Entity Framework Core for the backend, and React with TypeScript and Fluent UI for the frontend.

Setup

After cloning the repository, run the npm install command in the ClientApp folder. The project can then be launched through your preferred IDE.

Repository Description

This is a simple address book implementation. Users can:

• Add new contacts (people)
• Edit and delete existing contacts
• Assign multiple email addresses and phone numbers to each contact
• Categorize emails/phone numbers (e.g., Home, Work). Missing categories can be added as needed
• No security, user authentication, or similar features are implemented

The homepage displays contacts grouped by the first letter of their names. Clicking a contact opens a "side panel" showing detailed information. This functionality uses routing:

• Navigating to / shows the contact list
• Navigating to /1 displays the contact list with a side panel showing details for contact ID 1

Useful Links

• EF Core - Defining and Configuring a Model
• EF Core - Loading Data
• EF Core - Loading Related Data
• EF Core - Saving Data
• EF Core - Saving Related Data
• EF Core - Deleting Data
• Fluent UI Grouped List
• Fluent UI Panel
• React Router

Important Notes

• Frontend API calls are directed to https://localhost:7037
• All API endpoint paths are defined in the context variable within ClientApp/src/setupProxy.js

Citations: [1] https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-5.0&tabs=visual-studio-code [2] https://docs.microsoft.com/en-us