Contact Book

A simple phonebook application to store your phone contacts

Features

• Store, share, and synchronize contacts between devices, available on PC, tablet, and mobile.
• Contacts accessible to specific users with manageable access.
• Public contact lists available for everyone.
• Add, store, and delete your contacts.
• Filter contacts to quickly find the one you need.
• One-click call feature for each contact.

Live page demo

The live page for this repository can be viewed at GitHub Pages.

Task

The main goal was to refactor existing repository code using React, Redux Toolkit and mockapi.io API.

This solution follows provided requirements. You may read more about them here.

Technologies Used

• React Redux
• Redux Toolkit
• Redux thunk for asynchronous requests to back-end API using axios and mockapi.io as back-end
• Styled Components

Getting Started

Prerequisites

• Node.js

• npm

• mockapi.io back-end set-up for the following operations:

  • fetchContacts - get an array of contacts (GET method) using GET request - action type contacts/fetchAll.
  • addContact - add contact (POST method) - action type contacts/addContact.
  • deleteContact - deletes a contact (DELETE method) - action type contacts/deleteContact.

  Mockapi backend should have following structure and endpoints:

  

Installation

1. Make sure you have an LTS version of Node.js installed on your computer. Download and install it if necessary.
2. Clone the repository:

   git clone https://github.com/oleksandr-romashko/goit-react-woolf-hw-07-phonebook.git

3. Navigate to the project directory:

   cd goit-react-woolf-hw-07-phonebook

4. Install the dependencies:

   npm install

Running the Application

Locally

1. Create a .env.local file in the project root folder. It should contain REACT_APP_MOCKAPI_API_SECRET environment variable with your unique mockapi.io project token as a value to access your backend. Use the .env.example file as a template.
2. Start the development server in terminal: npm start

The application will be available at http://localhost:3000.

Live page

1. Add REACT_APP_MOCKAPI_API_SECRET repository secret with unique mockapi.io project token as a value to access your backend. All environmental secrets and variables are described in .env.example file.
2. Set-up your own GitHub live page, please consider following these instructions.