https://github.com/alexandrbig1/phonebook-app

Welcome to the React Phonebook App, a culmination of my journey through the React module in my Fullstack Bootcamp. This application empowers users to efficiently manage their contacts by seamlessly navigate through secure authentication, cloud-based storage, and a user-friendly interface.
https://github.com/alexandrbig1/phonebook-app

backend computerscience css3 frontend html-css-javascript html5 javascript js react react-components react-hooks react-redux reactjs redux redux-async redux-toolkit softwareengineer styled-components webdesign webdevelopment

Last synced: about 2 months ago
JSON representation

Welcome to the React Phonebook App, a culmination of my journey through the React module in my Fullstack Bootcamp. This application empowers users to efficiently manage their contacts by seamlessly navigate through secure authentication, cloud-based storage, and a user-friendly interface.

• Host: GitHub
• URL: https://github.com/alexandrbig1/phonebook-app
• Owner: Alexandrbig1
• License: mit
• Created: 2023-11-11T20:48:18.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-09T00:08:57.000Z (over 2 years ago)
• Last Synced: 2025-03-17T01:37:48.210Z (about 1 year ago)
• Topics: backend, computerscience, css3, frontend, html-css-javascript, html5, javascript, js, react, react-components, react-hooks, react-redux, reactjs, redux, redux-async, redux-toolkit, softwareengineer, styled-components, webdesign, webdevelopment
• Language: JavaScript
• Homepage: https://alexandrbig1.github.io/phonebook-app/
• Size: 28 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# **ConnectContacts** Your Personal Phonebook App



## This project is a part of my Fullstack Bootcamp's React module, serving as the final project for this module. The React Phonebook allows users to manage their contacts by saving them to a backend server. Users can sign up, sign in, and access their saved contacts through the application.

[![GitHub last commit](https://img.shields.io/github/last-commit/Alexandrbig1/phonebook-app)](https://github.com/Alexandrbig1/phonebook-app/commits/main)

[![GitHub license](https://img.shields.io/github/license/Alexandrbig1/phonebook-app)](https://github.com/Alexandrbig1/phonebook-app/blob/main/LICENSE)

[![React](https://img.shields.io/badge/React-18.0.0-blue.svg)](https://reactjs.org/)

[![Redux](https://img.shields.io/badge/Redux-8.1.3-6231AF.svg)](https://redux.js.org/)

[![Axios](https://img.shields.io/badge/Axios-1.6.0-green.svg)](https://github.com/axios/axios)

[![Styled Components](https://img.shields.io/badge/Styled_Components-6.1.0-orange.svg)](https://styled-components.com/)

[![React Icons](https://img.shields.io/badge/React_Icons-4.11.0-blueviolet.svg)](https://react-icons.github.io/react-icons/)

## Description

ConnectContacts is a comprehensive full-stack phonebook app developed as the final project for the React module in @GoIT. Seamlessly manage your contacts with features like secure user authentication, cloud-based contact storage, and a responsive design. Explore the possibilities of the React ecosystem, including Redux, Redux Persist, Axios, Material UI, and more.

Ready to elevate your contact management experience? Explore ConnectContacts today!

## Features

- **User Authentication and Authorization**: Sign up securely, Sign in, and manage your profile with JWT token-based authentication. User roles and permissions ensure data security.

- **Persistent Storage with Redux Persist**: Enjoy a seamless experience with persistent user data stored on the backend and locally through Redux Persist.

- **Contact Management in the Cloud**: Create a personalized contact list that can be accessed from anywhere. Add, delete, and search for contacts effortlessly.

- **Responsive Design with Material UI and Styled Components**: ConnectContacts is designed to provide a consistent and visually appealing experience across various devices.

- **Integration of React Ecosystem**: Utilizes React, Redux, React Routes, Axios for Web API interactions, Styled Components for styling, Material UI for UI components, React Icons for iconography, and React Avatars Dicebear for unique avatars.

## User Guide

- **Sign Up**: Create a new account by providing your details.

- **Log In**: Use your credentials to log in to ConnectContacts.

- **Profile**: Update your profile information, including your name, email, and password.

- **Contacts**: Navigate to the Contacts page to manage your cloud-based contacts. Add, delete, and search for contacts by name.

## Technologies Used

- ![React](https://img.shields.io/badge/React-61DAFB.svg?style=for-the-badge&logo=React&logoColor=black)

- ![Redux](https://img.shields.io/badge/Redux-764ABC.svg?style=for-the-badge&logo=Redux&logoColor=white)

- Redux Persist

- ![Axios](https://img.shields.io/badge/Axios-5A29E4.svg?style=for-the-badge&logo=Axios&logoColor=white) (Web API)

- ![Styled Components](https://img.shields.io/badge/styledcomponents-DB7093.svg?style=for-the-badge&logo=styled-components&logoColor=white)

- Material UI

- React Icons

- React Avatars Dicebear

## Project Preview

#### Screenshots:



_Caption for Screenshot 1 Home Page Connect Contacts (light mode)_



_Caption for Screenshot 2 Home Page Connect Contacts (dark mode)_



  

  



_Caption for Screenshots 3-4 Sign Up & Sign In Pages (light/dark mode)_



_Caption for Screenshot 5 Contacts Page (light mode)_



_Caption for Screenshot 6 Contacts Page (dark mode)_

## Issues

If you encounter any issues or have suggestions, please [open an issue](https://github.com/Alexandrbig1/phonebook-app/issues).

## License

This project is licensed under the [MIT License](LICENSE).

## Acknowledgments

Special thanks to [@GoIT](https://goit.global/us/) for the guidance and support throughout the development of ConnectContacts.

## Languages and Tools:

  

 







 

 







## Connect with me: