4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
intermediateRepository
Click to openVideo
Not available
Live demo
Not available
Average duration
24 hrs
Technologies
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.
You may use this gif: Check it out here!
Or you can use these images: Image 1 and Image 2
a) If using Gitpod you can clone the boilerplate by clicking here.
b) If working locally type the following command from your command line: $ git clone https://github.com/4GeeksAcademy/react-hello
.
💡 Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>
), and upload the code to your new repository using add
, commit
and push
.
$ npm install
$ npm run start
This boilerplate 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.
Please use the Context for this project: The boilerplate comes with the Context configured. Check the /store
folder.
Note: You'll need to code all functionalities.
ContactCard: displays just one contact.
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.
That is it! Start coding your React Application :)
4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
intermediateRepository
Click to openVideo
Not available
Live demo
Not available
Average duration
24 hrs
Technologies