सम्पर्क विवरण 0.1.0

सम्पर्क विवरण is a simple contact detail application developed using ReactJS. It enables user to view different users' contact detail and, if desired, change or delete that information. The users of this application can also add and remove any users to their favorites list as they choose to.

Used API: https://jsonplaceholder.typicode.com/

Features

The application is single page application. Where the user of the application can

• Get the users' contact information.
• Add or remove the required users to their favorites list.
• Change user information such as name, phone, email, and web link.
• If the users want, remove users'.
• Can change the application language English or Nepali .

Note: LocalStore is used to store favourite users' contact.

Note: The application is responsive for every device.

Used Stack

🔥 React : "^18.2.0"

🔥 TypeScript : "^4.7.4"

🔥 Redux toolkit : "^8.0.2"

🔥 antd : "^4.22.8"

🔥 Tailwind : "^3.1.8"

Used Packages / Dependencies

🐒 axios : "^0.27.2"

🐒 nanoid : "^4.0.0"

🐒 react-toastify : "^9.0.8"

🐒 sweetalert2 : "^11.4.29"

🐒 react-i18next : "^11.18.5"

🐒 i18next-browser-languagedetector : "^6.1.5"

🐒 i18next-http-backend : "^1.4.1"

Installation

Clone the repo

# Clone the repo
https://github.com/NishChal370/Contact-detail-app.git

Install the app

# Install dependencies
npm install

# Build the project
npm run build

# Run the app
npm start

Package uses

axios : It is used to send asynchronous HTTP requests to REST endpoints. This library is very useful to perform CRUD operations. This popular library is used to communicate with the backend. Axios supports the Promise API, native to JS ES6.

nanoid : A tiny, secure, URL-friendly, unique string ID generator for JavaScript.

react-toastify : React-Toastify is one of the top React toast libraries available. With the help of this tool, you can easily add toast notifications to your application and establish alerts and notifications.

sweetalert2 : SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation: warning, error, success, info, and question. It helps to display the necessary notification to the user easily.

react-i18next : It is an internationalization library, that uses components to render or re-render the translated content of your application once users request a change of language. These plugins carry out tasks including localization caching, loading the translated content from the backend server, and packaging the translations with a web pack, among others. It also detect the user's preferred languages.

i18next-browser-languagedetector : This is a i18next language detection plugin use to detect user language in the browser with support for: cookie, sessionStorage, localStorage, navigator, querystring, htmlTag, path, subdomain.

i18next-http-backend : It used in Node.js, in the browser and for Deno. It loads resources from a backend server using the XMLHttpRequest or the fetch API. It is used with i18next.

Test Coverage

---

To learn React, check out the React documentation.