/phonebook

A simple way to keep user's contacts in one place - SPA

Primary LanguageJavaScript

Phonebook

A simple way to keep user's contacts in one place☎

Features:

  • Add contacts
  • Remove contacts
  • Registration and storing the user's own contacts between logins
  • Form validation

This project was bootstrapped with Create React App.

You can find live page here⬅

There is a updated task from this repository and refactored with Redux toolkit, React Router v6. Styling is done by CSS modules. Contacts are saved to browser's local storage with persistor so there are saved after the page is refreshed and after the browser is restarted.

Used backend for this task: here. It supports all necessary operations on the contact collection, as well as registering, logging in and user update with JWT.

Styling is done by CSS modules

Coded by Tlostiuk Veronika.

PHONE BOOK

App's initial view - Home component:

Screenshot_7

Register page:

Screenshot_11

Sign In page:

Screenshot_19

Registered and logged in user is able to show this page and add new contacts to phone book:

Screenshot_13

Vanilla validation on input fields without possibility to add an ivalid contact:

Screenshot_16

All contact's list, allowing the user to delete previously saved contacts:

Screenshot_17

Filter by contact name:

Screenshot_18

HOW TO RUN THIS PROJECT LOCALLY

Clone this repo: git clone https://github.com/Veronikanos/goit-react-hw-08-phonebook.git

In the project directory, you can run:

npm install

then

npm start

Runs the app in the development mode.
Open http://localhost:3000/phonebook to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.