Back

Phonebook

HTML5
CSS3
JavaScript
react
redux
redux-persist
toolkit
REST API
JWT
auth
axios
ChakraUI

The "Phonebook" application is an interactive web application that allows users to manage their phone contacts. The main goal of this application is to enable users to add, edit, delete, and browse their contacts in a simple and intuitive way.

Page in dark colors with contact cards.
Live Demo Repository on Github

The user interface is built using the React framework, which provides efficient and responsive handling of components. To manage the application state, the Redux library is used, allowing for global state management and facilitating data synchronization between different components.

Additionally, the Redux Persist library is used to store the application state between sessions. This ensures that contact data is saved locally and restored upon restarting the application.

To simplify and expedite the application development process, the Redux Toolkit is used. It provides ready-made solutions such as action creators, reducers, and selectors, streamlining the process of building Redux-based applications.

Communication with the server is done using a REST API, which enables data exchange between the application and the server. The Axios library is used to handle HTTP requests, providing a simple and convenient interface for making requests.

For securing access to the application and authenticating users, a JWT (JSON Web Token) authentication mechanism is implemented. Users are required to log in before accessing their contacts. The necessary features are provided by React and authentication and authorization modules from the Redux library.

To ensure an appealing visual design and user interaction in the interface, the Chakra UI library is used. It provides ready-made components, styles, and layouts that can be easily customized to fit the project’s needs. As a result, the “Phonebook” application has a clear and aesthetically pleasing appearance.

In summary, the “Phonebook” application is a comprehensive solution for managing phone contacts, built using JavaScript and the React framework. It utilizes various tools such as Redux, Redux Persist, Redux Toolkit, REST API, auth, Axios, and Chakra UI to provide ease of use, efficiency, and an attractive interface.