Self-paced

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Search from all Lessons


LoginGet Started

Start interactive tutorial

← Back to Projects

Contact List App Using React & Context

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

📝 Instructions:
The Project Should Have Two Different Views:
  • One Component:

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: Image 1 and Image 2

🌱 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 the add, commit and push commands from the git terminal.

  1. Install the /node_modules
1$ npm install
  1. 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:

  1. Contact: This view should display the list of contacts.
  2. AddContact: This view should include the form used to create or update contacts.

One Component:

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

Sign up and get access to solution files and videos for free

We will use it to give you access to your account.
Already have an account? Login here.

By signing up, you agree to the Terms and conditions and Privacy policy.

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

Sign up and get access to solution files and videos for free

We will use it to give you access to your account.
Already have an account? Login here.

By signing up, you agree to the Terms and conditions and Privacy policy.

Difficulty

  • intermediate

Average duration

24 hrs

Technologies

Difficulty

  • intermediate

Average duration

24 hrs

Technologies