Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/german-cobian/contact-app

A React-Redux app for listing contacts -their name, email and phone number. Includes edit and delete functions.
https://github.com/german-cobian/contact-app

bootstrap css html javascript react redux

Last synced: about 18 hours ago
JSON representation

A React-Redux app for listing contacts -their name, email and phone number. Includes edit and delete functions.

Host: GitHub
URL: https://github.com/german-cobian/contact-app
Owner: German-Cobian
License: mit
Created: 2022-01-16T16:50:44.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2022-05-17T18:13:56.000Z (over 2 years ago)
Last Synced: 2024-12-28T04:58:48.816Z (27 days ago)
Topics: bootstrap, css, html, javascript, react, redux
Language: JavaScript
Homepage:
Size: 485 KB
Stars: 5
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Contact-App

A how-to on building a basic React-Redux app. The user can see the names, e-addresses, and id numbers of existing contacts,

![Show contacts](/src/assets/Show-contacts.png?raw=true "Show contacts")

...edit,

![Edit contacts](/src/assets/Edit-contacts.png?raw=true "Edit contacts")

...delete,

![Delete contacts](/src/assets/Delete-contacts.png?raw=true "Delete contacts")

..or add new ones.

![Add contacts](/src/assets/Add-contacts.png?raw=true "Add contacts")

Since the purpose of the project is to show step-by-step how different functionalities are implemented in a React-Redux app the user will, according to which branch they checkout to, be able to see only a specific functionality of the app completed. The project is based on the tutorial video [React Redux Contact App | Redux Projects](https://youtu.be/DZ7AZuii9ZU) by "Fullyworld Web Tutorials."

## Built With

* HTML
* CSS
* Bootstrap
* Javascript
* React
* Redux

## Getting Started

### Setup and Install

To get a local copy up and running follow these simple example steps:

* Open your terminal - Windows: Win + R, then type cmd | Mac: Command + space, then type Terminal
* Navigate to a directory of your choosing using the cd command
* Run this command in your OS terminal: `git clone [email protected]:German-Cobian/Contact-App.git` to get a copy of the project
* Navigate to the project's directory using the cd command
* In the clone folder, run `npm install` and then `npm run build`
* To fire up the server run `npm start`

### Breakdown of Tutorial

The feature branches of the tutorial present versions of the app where specific components or functions
were implemented.

* `feature1-navbar`
Implements the Navbar component which displays the navbar in the homepage.

* `feature2-homeComponent`
Implements the Home component which displays the content of the homepage, that is contact names, emails and numbers.

* `feature3-addContact`
Implements the addContact component which displays the form for inputing contact's names, emails and id numbers.

* `feature4-editContact`
Implements the editContact component which displays the form for inputing updates to contact's names, emails and id numbers.

* `feature5-addContactFunc`
Implements the functions actions and reducers (with their requisite functions) required for inputing contact's names, emails and id numbers.

* `feature6-addContactActions`
Implements the functions actions and reducers (with their requisite functions) required for inputing contact's names, emails and id numbers.

* `feature7-displayContacts`
Implements the actions and reducers (with their requisite functions) required for inputing contact's names, emails and id numbers.

* `feature8-editContacts`
Implements the actions and reducers (with their requisite functions) required for updating contact's names, emails and id numbers.

* `feature9-deleteContacts`
Implements the actions and reducers (with their requisite functions) required for deleting contact's names, emails and id numbers.

## Author

👤 **German Cobian**

* GitHub: [@German-Cobian](https://github.com/German-Cobian)
* Twitter: [@GermanCobian1](https://twitter.com/GermanCobian1)
* LinkedIn: [@german-cobian](https://www.linkedin.com/in/german-cobian/)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/German-Cobian/Contact-App/issues).

## Show your support

Give a ⭐️ if you like this project!

## Acknowledgments

This project is based on the tutorial video [React Redux Contact App | Redux Projects](https://youtu.be/DZ7AZuii9ZU) by "Fullyworld Web Tutorials."

## 📝 License

This project is [MIT](https://github.com/German-Cobian/Contact-App/blob/main/LICENSE) licensed.