matheusferretti / ContactListUsingFlux-Context

Contact Managment Application

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.

How to start?

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.

The project is divided in:

Two different views:

1. Contact: Contains the list of contacts.
2. AddContact: It's just a form used to create or update contacts.

One component:

ContactCard: displays just one contact.

TO-DO functionalities

• 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.

Steps to install this project

1. Clone the repository

$ git clone https://github.com/breatheco-de/exercise-contact-list-context.git

2. Install the /node_modules

$ npm install

3. Run the webpack development server

$ npm run start

That is it! Start coding your React Application :)