> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Create a simple Contact Book app
- URL: https://reactpractice.dev/exercise/create-a-simple-contact-book-app/
- Published: 2023-01-16T18:38:52.000Z
- Updated: 2026-06-01T01:58:00.000Z
- Author: Corina Udrescu
- Tags: Working with forms, #corina-2, Exercises, Structuring components, #Import 2026-06-09 12:07

Create a simple Contact Book app that allows users to manage a collection of **friends’ contact details**.

For each person, the user should be able to save the **name** and **city** where they live. Users should be able to add, edit and delete persons.

All contact details should be displayed on one page, as **person “cards”**. The cards can be "flipped" to go to "Edit" mode by clicking an "Edit" button. Only allow editing one contact at a time.

0:00 

/0:19 

1× 

Build your solution using React with Typescript.  
Use only the default React hooks (no need to add any libraries).

For the UI components, you can use [TailwindCSS](https://tailwindcss.com/?ref=reactpractice.dev) and [DaisyUI](https://daisyui.com/?ref=reactpractice.dev).

Here is also some mock data you can use during development:

```
[
    { "id": "1", "name": "Alice Johnson", "city": "New York" },
    { "id": "2", "name": "Bob Smith", "city": "Los Angeles" },
    { "id": "3", "name": "Charlie Brown", "city": "Chicago" },
    { "id": "4", "name": "David Williams", "city": "Houston" },
    { "id": "5", "name": "Emma Davis", "city": "Phoenix" },
    { "id": "6", "name": "Frank Miller", "city": "Philadelphia" },
    { "id": "7", "name": "Grace Wilson", "city": "San Antonio" },
    { "id": "8", "name": "Henry Moore", "city": "San Diego" },
    { "id": "9", "name": "Isabella Garcia", "city": "Dallas" },
    { "id": "10", "name": "Jack Martinez", "city": "San Jose" }
]

```

💡

Ready to check your work?  
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-create-a-simple-contact-book-app/) and the comments section for feedback and discussion.