Contacts Book application

Link to the web page

Role: developer

Individual project

The Contacts Book application includes user registration, login, and profile updates, along with management of a private contacts collection.


Functionality

This application has the following features:

  • User registration form with input validation
  • User login form with input validation
  • Personal contact list
  • Adding, filtering and deleting contacts

React Router is implemented for routing across multiple pages, with a Navigation component facilitating easy navigation between routes. The User component displays the user's email and a logout button. Styling is achieved using styled-components, while logic for displaying private and public routes is integrated. A basic form is created for registration and login, with input validation included. Messages are displayed using the react-toastify library. Following an individual project example, transitions between pages along with repository setup and configuration.


Technologies

This application has the following technologies:

  • HTML - a markup language for creating web pages
  • CSS - a stylesheet language for styling web pages
  • styled-components - a library for React that allows to write actual CSS code to style the components
  • react - a library for web and native user interfaces
  • react-redux - a library that provides a structured and predictable way to manage the state of an application
  • react-dom - a library for working with the DOM in React
  • redux-toolkit - a library for working with global state of app
  • axios - a library for making HTTP requests

Instalation

To run this project just follow these steps:

  • clone the repository using the command git clone https://github.com/kpapura/phonebook-project
  • install the dependencies using the command npm install
  • start the project using the command npm start
  • you will be redirected to the following address http://localhost:3000