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.
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" }
]
Become a member and get access to the official solution and the comments section for feedback and discussion.
Member discussion