Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/korngsamnang/react-contact-app
A simple contact app.
https://github.com/korngsamnang/react-contact-app
json-server modal-windows react-query syled-components toast-notifications
Last synced: 6 days ago
JSON representation
A simple contact app.
- Host: GitHub
- URL: https://github.com/korngsamnang/react-contact-app
- Owner: korngsamnang
- Created: 2023-11-07T08:07:23.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-12T03:17:07.000Z (about 1 year ago)
- Last Synced: 2023-12-12T04:26:23.731Z (about 1 year ago)
- Topics: json-server, modal-windows, react-query, syled-components, toast-notifications
- Language: JavaScript
- Homepage:
- Size: 82 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Contact App
This is a simple React-based contact app. The app includes features such as add, edit, view, delete, search, filter, and
sort.
> Simple Contact app built with React and React Query.
## Features:
- **Add Contacts:** Easily add new contacts to the list, including details such as name, phone number, and email.
- **Edit Contacts:** Update contact information with the edit feature.
- **View Contacts:** Browse through your contact list to view details of each contact.
- **Delete Contacts:** Remove unwanted contacts from the list.
- **Search Contacts:** Quickly find specific contacts using the search functionality.
- **Filter and Sort:** Organize contacts by applying filters and sorting options based on various criteria.
- **Modal Window:** The app utilizes a model window for an enhanced user interface, providing a clean and intuitive way
to interact with contact details.
## Technology Used:
- **[React]:** A popular JavaScript library for building user interfaces.
- **[json-server]:** The app use json-server to handle the CRUD operations and simulate a backend server.
- **[React Query]:** For efficient and performant data fetching.
- **[Styled Components]:** Enabling a modular and maintainable CSS-in-JS
approach.
- **[React Icons]:** A collection of customizable SVG icons.
## Installation:
1. Clone the repository.
```bash
git clone https://github.com/korngsamnang/react-contact-app
```
2. Install dependencies.
```bash
cd react-contact-app
npm install
```
3. Run the app.
```bash
npm run dev
```
[React]:
[json-server]:
[React Query]:
[Styled Components]:
[React Icons]: