Personal Contact Manager

PCM is a web portal for collecting contacts in a very smart way. Contact management with PCM is very efficient and smarter.

🌐 Website : PCM

Now you can access the demo account feel free to explore :)

Must try The demo login. Go visit now

📑 About the project

We understand how important your contacts are, and we want to make it easier than ever to organize and manage them all in one place. That's why we built Personal Contact Manager, with a clean, simple design and powerful features that'll take you less than 10 seconds to get up and running.

The most user-friendly address book : I designed Personal Contact Manager to be as intuitive as possible so you can spend less time figuring out how to use it and more time managing your contacts. All of the features are laid out in a simple manner that makes it easy for you to manage your contacts from anywhere on any device.

It's all in one place : Personal Contact Manager brings together all the information you need about your contacts into one easy-to-use dashboard, so you can find what you need with a single search. It also includes an address book for storing names, addresses and phone numbers of important people.

🔐 Key Features

1. Simple and unique UI & user friendly design
2. Implemented lazy loading for better optimization
3. Dual login feature (User account and Demo account)
4. Secure JWT Authentication
5. Robust Password Encryption with BCryptPasswordEncoder
6. Implemented Role-Based Authorization
7. Simple Informative dynamic dashboard for every user
8. Implemented skeleton loading animation for better visualization
9. Enhanced abort controller quick search functionality implemented with axios
10. Added pagination for improved accessibility
11. Flexible Contact Deletion with single contact delete & multiple contact delete (batch delete)
12. Custom in-house components with styling & features
13. Comprehensive complex contact form implementation with different data types and files.
14. Implemented formik with custom form validation
15. Implemented TinyMCE rich text editor
16. Added country field with country flag identification
17. Independent external image storage servers for better efficiency
18. Full implementation of CRUD functionality
19. Implemented forgot password module for better useability
20. Seamlessly user logout module

👨🏻‍💻 Developer's Talk

Developed by Debraj Karmakar

This is a small effort from my side to build a medium scale project using React and Spring Boot technologies. The experience taught me so many things, as well as the challenges involved in overcoming problems encountered during the development phase. I consider this project very relevant to me as a full-stack developer. The people who helped me during the development phase are to be commended.

Upcming Features
  - Oauth 2 login with social accounts 

🚀 Tech Stack

💻 Client: HTML, Axios, Formik, React, React Toastify, React Redux, Redux, Redux Thunk, Redux Logger

✨ Styles: SCSS, React Bootstrap, React Icons, React Useanimations, React Loading Skeleton

🔌 Service: EmailJs, Tinymce, Ybug, crisp, Uploadcare

🔐 Security: Spring Boot Security, Password Encoder, JSON Web Tokens

🔥 Server: Java, Spring Boot, Hibernate, Lombok, Mail, JavaX, JPA

🧲 Validation: Hibernate Validator Engine, Bean Validation API

📂 Database: MySql

⌛ Hosting

💻 Client: vercel

📧 Email Service: emailjs

👏🏻 Feedback: ybug feedback

🙂 Chat: crisp chat

🔥 Server: render

🔍 Files Server: uploadcare

📂 Database: aiven

📈 Monitoring: Monitoring Services

➰ Corn Jobs: corn jobs

📊 UML Diagram

🔥 Redux State Tree

if (_.isAwesome(thisRepo)) {
  thisRepo.star(); // thanks in advance :p
}

🏃🏻‍♂️ Run Locally

Clone the project

  $git clone https://github.com/debrajhyper/Personal-Contact-Manager

Go to the project directory

  cd PCM

Install dependencies

  $npm install

Start the server

  $npm start