vermasuraj11011 / ContactManager

ContactManager is Full stack web application build using SpringBoot and Thymeleaf used to save contact.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Contact Manager Logo

It is a contact management system were user can manage there contacts and view it. It is a fullstack web project containing both frontend and backend.

What is the use of this Repo

  1. User Form base login.
  2. CRUD operation on User and Contact.
  3. Search and pagination on view contact page.
  4. Implement AWS Queue, Lambda and SES.
  5. Dynamic web page using Thymeleaf.
  6. Send welcoming Email to user.
  7. Razorpay Payment integration.
  8. Tiny MCE HTML editor.
  9. Pdf generation on sample html.
  10. MySql Database.
  11. Adding Image

TechStack used

  • SpringBoot (Spring Security, JavaX, OpenPdf, JPA)
  • Thymeleaf
  • MySql
  • AWS (Queue, Lambda, SES and CloudWatch)
  • Html, CSS, and JavaScript
  • Python (Lambda Script)

Integration

  • Razorpay Payment Gateway
  • Tiny MCE editor
  • Bootstrap
  • SweetAlert

Application design

MVC Design

MVC_View

Schema Design

Schema_Design

Features

  • User registration and login.
  • Send welcome email to user.
  • Accept Donation from the user.
  • User can change password and profile picture.
  • View, Add, Update and Delete contacts.
  • Generate PDF.

URL

Base URL:   http://localhost:8080
Home
Action Controller Method Url ("/") view
Home page home GET / /home.html
About page home GET /about /about.html
Registration Page home GET /signup /signup.html
Login page home GET /signin /login.html
Register User home POST /do_register /signup.html
Forgot Password
Action Controller Method Url ("/") success view failure view failure reason
Forgot Password home GET /forgot /email_form.html -
Send OTP home POST /send-otp /verify-otp.html /email_form.html wrong email
Verify OTP home POST /verify-otp /password_change_form.html /verify-otp.html wrong otp
New Password home DELETE /change-password /login.html

All the above URL are public url, below one is private.

User Api
Action Controller Method Url ("/user") view ("/normal")
User Dashboard User GET /index /user_dashboard.html
User profile User GET /profile /profile.html
User setting User GET /setting /setting.html
Change Password User GET /change-password /user_dashboard.html
Contact Api
Action Controller Method Url ("/user") view ("/normal")
Add Contact Page User GET /add-contact /add_contact_form.html
Add Contact Detail User POST /process-contact /add_contact_form.html
Search Contact Search GET /search/{query} -
Show List Of Contact User GET /show-contacts/{page_no} /show_contacts.html
Show Single Contact Info User GET /contact/{contact_id} /contact_detail.html
Show Update Contact Page User POST /update-contact/{contact_id} /update_contact.html
Update Contact User POST /process-update /contact_detail.html
Delete Contact User GET /delete/{cId} /show_contacts.html
Payment Api
Action Controller Method Url ("/user")
Initiate Donation User POST /create-payment-order
Update Payment Status in DB User POST /create-payment-order
PDF Api
Action Controller Method Url ("/user")
Download PDF PDF GET /createPdf

Integration

RazorPay

Implemented Razorpay integration to accept the donation.

Steps to follow:-

<!-- https://mvnrepository.com/artifact/com.razorpay/razorpay-java -->
<dependency>
    <groupId>com.razorpay</groupId>
    <artifactId>razorpay-java</artifactId>
    <version>1.4.4</version>
</dependency>
  • Create a new razorpay client
RazorpayClient client = new RazorpayClient(razorKey, razorValue);
  • Create a JSON object with the following information
JSONObject jsonObject = new JSONObject();
jsonObject.put("amount", amount * 100);
jsonObject.put("currency", "INR");
jsonObject.put("receipt", "txn_235425");
  • Create a razorpay order from the JSON object. This will initiate a new order to razorpay. You can view this order in your razorpay dashboard
Order order = client.orders.create(jsonObject);
  • Create a client side checkout button which will initiate the payment order. Check startPayment in script.js for better understanding
    Reference
  • Once payment is completed we can save the data to our DB.
  • For testing follow this
    Get card detail
    Get Upi detail

AWS SQS

I have used SQS to send email asynchronously.

Steps to follow:

  • Create an Identity in the AWS SES and verify it.
  • Create a IAM role which can be access by Lambda and has AmazonSESFullAccess permission.
  • Create Lambda in AWS and assign the above role to it.
  • Use below Python code block.
import json
import boto3

def lambda_handler(event, context):
    client = boto3.client('ses')
    
    for record in event['Records']:
        body = json.loads(record['body'])
        user_email = body['user']['email']
        template = body['template']
        
        subject = "Welcome to our application"
        
        message = {
            "Subject": { "Data": subject },
            "Body": { "Html": { "Data": template } }
        }
        
        response = client.send_email(
            Source='<from_email_id>',
            Destination={ "ToAddresses": [user_email] },
            Message=message
        )
    
    return response
  • Create SQS in AWS by following this
  • Include the below two dependencies for SQS in the pom.xml file.
<!-- https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-starter-aws -->
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-aws</artifactId>
    <version>2.2.6.RELEASE</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.springframework.cloud/spring-cloud-starter-aws-messaging -->
<dependency>
  <groupId>org.springframework.cloud</groupId>
  <artifactId>spring-cloud-starter-aws-messaging</artifactId>
  <version>2.2.6.RELEASE</version>
</dependency>
  • Follow AwsSQSService module from services.

Views

Home

Home About Register Login

User

Home Profile View Contact Add Contact Update Contact Setting Logout

Forgot Password

Forgot Password Enter OTP Wrong OTP New Password Password Reset Successful

Payment

Donate Razor Payment View Enter UPI Razor Success View Success View Razor Failure View Failure View

Welcome Email

Welcome Email

Resources

Running the application locally

There are several ways to run a Spring Boot application on your local machine.

  • One way is to execute the main method in the src.main.java.com.contactManager.ContactManagerApplication class from your IDE.

  • Or you can use the command given below while in the target project:

mvn spring-boot:run

🚀 About Me

Hi, I'm Suraj Verma! 👋

I'm a full stack developer...
vermasuraj@gmail.com

portfolio
linkedin

About

ContactManager is Full stack web application build using SpringBoot and Thymeleaf used to save contact.


Languages

Language:HTML 62.3%Language:Java 32.2%Language:JavaScript 3.5%Language:CSS 2.0%