Technologies: HTML, CSS, JS, React, React Router and Context.
Hello! It is time to start doing professional front-end applications. This time we will be creating a small contact management application that allows users to: Read, Create, Update and Delete contacts. Check it out here!
Please use the Context for this project: The boilerplate comes with the Context configured. Check the /store
folder.
Clone the repository with the boilerplate, it contains no real functionalities but it has 99.99% of the HTML/CSS that you'll need for the project, allowing you to focus on the functionality.
Note: You'll need to code all functionalities.
- Contact: Contains the list of contacts.
- AddContact: It's just a form used to create or update contacts.
ContactCard: displays just one contact.
- You have to add the code needed to make your application handle contacts, specifically:
- create,
- update,
- and delete.
- (Optional) Ask the user for confirmation before deleting, use the Modal component for that.
All the functionalities must be implemented in the actions
object (store.js).
Hint: start with some dummy content in the store (store.js).
Fetch
the data from the API: https://assets.breatheco.de/apis/fake/contact/
Hint: Use Postman to try the API endpoints before coding.
$ git clone https://github.com/breatheco-de/exercise-contact-list-context.git
$ npm install
$ npm run start
That is it! Start coding your React Application :)