Start interactive tutorial
Contact List App Using React & Context
Contact Management Application
Technologies: HTML, CSS, JS, React, React Router, and Context.API.
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.
You may use this gif: Check it out here!
Or you can use these images:
and
🌱 How to start this project
Do not clone this repository because we will be using a different template.
We recommend opening the react boilerplate using a provisioning tool like Codespaces (recommended) or Gitpod. Alternatively, you can clone it on your local computer using the git clone command.
This is the repository you need to open or clone:
1https://github.com/4GeeksAcademy/react-hello-webapp
👉 Please follow these steps on how to start a coding project.
💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (
git remote set-url origin <your new url>), and uploading the code to your new repository using theadd,commitandpushcommands from the git terminal.
- Install the
/node_modules
1$ npm install
- Run the development server
1$ npm run start
*Please Use the Context for This Project: The template comes with the Context.API already configured.
📝 Instructions:
- You must add the necessary code to ensure your application handles contacts through the typical CRUD operations (Create, Read, Update, Delete), specifically:
- Create
- Read contacts
- Update
- Delete
- (Optional) Ask the user for confirmation before deleting a contact. We recommend wsing a Modal component for this.
All functionalities must be implemented under the concept of Context.API.
fetch the data from the API: https://playground.4geeks.com/contact/docs
The Project Should Have Two Different Views:
- Contact: This view should display the list of contacts.
- AddContact: This view should include the form used to create or update contacts.
One Component:
- ContactCard: Displays a single contact.
💡 Tips:
- Use Postman to test the API endpoints before coding.
That is it! Start coding your React Application :)
This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.