{"id":21490145,"url":"https://github.com/alexandrbig1/phonebook-app","last_synced_at":"2026-04-11T17:01:08.117Z","repository":{"id":206725138,"uuid":"717559261","full_name":"Alexandrbig1/phonebook-app","owner":"Alexandrbig1","description":"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. ","archived":false,"fork":false,"pushed_at":"2024-01-09T00:08:57.000Z","size":29375,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T01:37:48.210Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://alexandrbig1.github.io/phonebook-app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexandrbig1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-11T20:48:18.000Z","updated_at":"2024-09-02T17:20:12.000Z","dependencies_parsed_at":"2024-01-09T02:27:39.003Z","dependency_job_id":null,"html_url":"https://github.com/Alexandrbig1/phonebook-app","commit_stats":null,"previous_names":["alexandrbig1/goit-react-hw-08-phonebook","alexandrbig1/phonebook-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fphonebook-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fphonebook-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fphonebook-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexandrbig1%2Fphonebook-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexandrbig1","download_url":"https://codeload.github.com/Alexandrbig1/phonebook-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244022714,"owners_count":20385134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-23T14:31:48.773Z","updated_at":"2025-12-31T00:18:19.364Z","avatar_url":"https://github.com/Alexandrbig1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **ConnectContacts** Your Personal Phonebook App\n\n\u003cimg align=\"right\" src=\"https://media.giphy.com/media/du3J3cXyzhj75IOgvA/giphy.gif\" width=\"100\"/\u003e\n\n## 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.\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/Alexandrbig1/phonebook-app)](https://github.com/Alexandrbig1/phonebook-app/commits/main)\n[![GitHub license](https://img.shields.io/github/license/Alexandrbig1/phonebook-app)](https://github.com/Alexandrbig1/phonebook-app/blob/main/LICENSE)\n[![React](https://img.shields.io/badge/React-18.0.0-blue.svg)](https://reactjs.org/)\n[![Redux](https://img.shields.io/badge/Redux-8.1.3-6231AF.svg)](https://redux.js.org/)\n[![Axios](https://img.shields.io/badge/Axios-1.6.0-green.svg)](https://github.com/axios/axios)\n[![Styled Components](https://img.shields.io/badge/Styled_Components-6.1.0-orange.svg)](https://styled-components.com/)\n[![React Icons](https://img.shields.io/badge/React_Icons-4.11.0-blueviolet.svg)](https://react-icons.github.io/react-icons/)\n\n## Description\n\nConnectContacts 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.\nReady to elevate your contact management experience? Explore ConnectContacts today!\n\n## Features\n\n- **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.\n- **Persistent Storage with Redux Persist**: Enjoy a seamless experience with persistent user data stored on the backend and locally through Redux Persist.\n- **Contact Management in the Cloud**: Create a personalized contact list that can be accessed from anywhere. Add, delete, and search for contacts effortlessly.\n- **Responsive Design with Material UI and Styled Components**: ConnectContacts is designed to provide a consistent and visually appealing experience across various devices.\n- **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.\n\n## User Guide\n\n- **Sign Up**: Create a new account by providing your details.\n- **Log In**: Use your credentials to log in to ConnectContacts.\n- **Profile**: Update your profile information, including your name, email, and password.\n- **Contacts**: Navigate to the Contacts page to manage your cloud-based contacts. Add, delete, and search for contacts by name.\n\n## Technologies Used\n\n- ![React](https://img.shields.io/badge/React-61DAFB.svg?style=for-the-badge\u0026logo=React\u0026logoColor=black)\n- ![Redux](https://img.shields.io/badge/Redux-764ABC.svg?style=for-the-badge\u0026logo=Redux\u0026logoColor=white)\n- Redux Persist\n- ![Axios](https://img.shields.io/badge/Axios-5A29E4.svg?style=for-the-badge\u0026logo=Axios\u0026logoColor=white) (Web API)\n- ![Styled Components](https://img.shields.io/badge/styledcomponents-DB7093.svg?style=for-the-badge\u0026logo=styled-components\u0026logoColor=white)\n- Material UI\n- React Icons\n- React Avatars Dicebear\n\n## Project Preview\n\n#### Screenshots:\n\n\u003cimg src=\"./public/images/screenshot1.jpg\" alt=\"Home Page Connect Contacts light mode\" width=\"100%\" height=\"auto\" /\u003e\n\n_Caption for Screenshot 1 Home Page Connect Contacts (light mode)_\n\n\u003cimg src=\"./public/images/screenshot2.jpg\" alt=\"Home Page Connect Contacts dark mode\" width=\"100%\" height=\"auto\" /\u003e\n\n_Caption for Screenshot 2 Home Page Connect Contacts (dark mode)_\n\n\u003cdiv\u003e\n  \u003cimg src=\"./public/images/screenshot3.jpg\" alt=\"Sign Up Page light mode\" width=\"400\" /\u003e\n  \u003cimg align=\"right\" src=\"./public/images/screenshot4.jpg\" alt=\"Sign In Page dark mode\" width=\"400\" /\u003e\n\u003c/div\u003e\n\n_Caption for Screenshots 3-4 Sign Up \u0026 Sign In Pages (light/dark mode)_\n\n\u003cimg src=\"./public/images/screenshot5.jpg\" alt=\"PhoneBook Page Contacts light mode\" width=\"100%\" height=\"auto\" /\u003e\n\n_Caption for Screenshot 5 Contacts Page (light mode)_\n\n\u003cimg src=\"./public/images/screenshot6.jpg\" alt=\"PhoneBook Page Contacts dark mode\" width=\"100%\" height=\"auto\" /\u003e\n\n_Caption for Screenshot 6 Contacts Page (dark mode)_\n\n## Issues\n\nIf you encounter any issues or have suggestions, please [open an issue](https://github.com/Alexandrbig1/phonebook-app/issues).\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Acknowledgments\n\nSpecial thanks to [@GoIT](https://goit.global/us/) for the guidance and support throughout the development of ConnectContacts.\n\n## Languages and Tools:\n\n\u003cdiv align=\"center\"\u003e  \n \n\u003ca href=\"https://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg\" alt=\"HTML5\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.w3schools.com/css/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg\" alt=\"CSS3\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.javascript.com/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/javascript-original.svg\" alt=\"JavaScript\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://reactjs.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg\" alt=\"react\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://redux.js.org/\" target=\"_blank\" rel=\"noreferrer\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/skills/redux-colored.svg\" width=\"36\" height=\"36\" alt=\"Redux\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://styled-components.com/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/styled-components.png\" alt=\"Styled Components\" height=\"50\" /\u003e\u003ca href=\"https://mui.com/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/mui.png\" alt=\"Material UI\" height=\"50\" /\u003e\u003c/a\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## Connect with me:\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://linkedin.com/in/alex-smagin29\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/github-%2324292e.svg?\u0026style=for-the-badge\u0026logo=github\u0026logoColor=white alt=github style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://discord.gg/uzM3UNQU\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/discord-%237289DA.svg?\u0026style=for-the-badge\u0026logo=discord\u0026logoColor=white\" alt=\"Discord\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://stackoverflow.com/users/22484161/alex-smagin\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/stackoverflow-%23F28032.svg?\u0026style=for-the-badge\u0026logo=stackoverflow\u0026logoColor=white alt=stackoverflow style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://dribbble.com/Alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/dribbble-%23E45285.svg?\u0026style=for-the-badge\u0026logo=dribbble\u0026logoColor=white alt=dribbble style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.behance.net/a1126\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/behance-%23191919.svg?\u0026style=for-the-badge\u0026logo=behance\u0026logoColor=white alt=behance style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.upwork.com/freelancers/~0117da9f9f588056d2\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/upwork-%230077B5.svg?\u0026style=for-the-badge\u0026logo=upwork\u0026logoColor=white\u0026color=%23167B02\" alt=\"Upwork\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrbig1%2Fphonebook-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrbig1%2Fphonebook-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrbig1%2Fphonebook-app/lists"}