Skip to content

Web App for managing contacts, allowing users to register, log in securely, and manage their contacts. Features include user authentication, contact CRUD operations, and state management with Redux Toolkit. Built with React, Redux, Next UI, and Lucide React icons.

Notifications You must be signed in to change notification settings

Valik3201/phonebook

Repository files navigation

Phonebook

This is a web application for managing contacts. It allows users to register, log in securely, and manage their contacts. The application provides features for user authentication, CRUD operations for contacts, and state management using Redux Toolkit.

screenshot

Features

  • User authentication: Users can register and log in securely.
  • Contact management: Users can perform CRUD operations on their contacts, including adding, updating, and deleting contacts.
  • Filter: Contacts can be filtered based on name or number to quickly find specific contacts.
  • Responsive design: The application is designed to work on various screen sizes, providing a seamless experience across devices.
  • Theme Switcher: Toggle between light and dark themes for a personalized experience.

screenshot

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Redux Toolkit: A set of tools for efficient Redux development, including simplified state management and handling side effects.
  • Redux Persist: Middleware for persisting Redux state to storage.
  • Redux Persist Storage: Storage engine for Redux Persist, used for storing authentication tokens.
  • Axios: A promise-based HTTP client for making requests to the server.
  • JWT (JSON Web Tokens): Used for user authentication and authorization.
  • Next UI: Component library for building user interfaces.
  • Tailwind CSS: Utility-first CSS framework for styling applications.
  • Lucide React: A library of SVG icons for use in React applications.

screenshot

Usage

To use the Phonebook, follow these steps:

  1. Visit the deployed application here .
  2. If you are a new user, click on the "Sign Up" link to create a new account. Otherwise, click on the "Login" link to sign in with your existing credentials.
  3. Once logged in, you will be directed to the Contacts page.
  4. On the Contacts page, you can:
    • Add a new contact by clicking the "Add Contact" button.
    • Edit an existing contact by clicking the edit icon next to the contact's details.
    • Delete a contact by clicking the delete icon next to the contact's details.
    • Search for contacts using the search bar.

Enjoy managing your contacts with ease!

screenshot

Getting Started

To run the application locally, follow these steps:

  1. Clone this repository:
    git clone <repository-url>
    
  2. Install dependencies:
    npm install
    
  3. Run the development server:
    npm run start
    
  4. Open http://localhost:3000 in your browser.

Contributing

Contributions are welcome! If you have any suggestions or found a bug, please open an issue or submit a pull request.

About

Web App for managing contacts, allowing users to register, log in securely, and manage their contacts. Features include user authentication, contact CRUD operations, and state management with Redux Toolkit. Built with React, Redux, Next UI, and Lucide React icons.

Topics

Resources

Stars

Watchers

Forks