1 min read

Create a simple Contact Book app

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

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 and DaisyUI.

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 and get access to the official solution and the comments section for feedback and discussion.

Get the React Practice Calendar!

28 days of focused practice of increasing difficulty, going through everything from Fundamentals, Data fetching, Forms and using Intervals in React.

You will also get notified whenever a new challenge is published.