Introduction

We have to develop a web application for the administration and staff activity. Administer can add staff and monitoring all activity and staff can access carts and they can take bills manually when users pay with ready cash.

    • Manage all product items
    • Manage all staff and their permission
    • Tracking Customer activity
    • Give offer details for the product

    • Cashier can access payment details of the customers
    • They can recevie payments from customers(when they pay mannuly)

Used Technologies

These are the Technologies we used for develop our web application Front-end and Back-end

Technologies

  • Frond-end
    • Node js
    • React js
    • Html
    • CSS
    • Javascript
    • Bootstrap
  • Back-end
    • MongoDB
    • Mongoose
    • Express
  • Server
    • mongodb atlas
solution architecture diagram

UI Model

We are like to develop the UI of the web Application Like this

Signup Page

solution architecture diagram

Home Page

solution architecture diagram

Main Page

Admin and staff page

solution architecture diagram

Componets of Web Application

We have many sub Componets for our web Application consider some important Componets that we implimented currently

Overall

Full section before login and After login

navigation Head Section

It have our smart shopping cart logo ,user profile section, notification, messages and dropdown menu for the logout, profile edit section

Navigation section

Here we like to implement the component that help to custermize the front page with widgets

Sign up Section

It have First name,last name, email, address, phone number, password and re password fields. when user sign up the data will store in the mongodb database in mogodb atles

Log In page

When user login with the user name and the password , mongodb data will cheak and redirect to the main page

Cart managing section

Admin can manage all the cart using this section they can add new cart and delete carts also can watch the user who use the cart

div class="col-lg-12" style="margin-bottom: 50px;">

Items managing section

Admin can manage all the products using this section they can add new product,update and delete.

security

for our web application, we have to do some security things forgive secure activity through our application because it maintains all administration things so that the security aspect is most important.

User signup

when staff tries to sign up to the maintenance system they have to give their basic details to authenticate. so in this step staff should give the email address. After the signup, staff gets a verification mail(two-step verification) with a specific token.

when the staff clicks the links in the email the signup process is completed. same time the admin of the shopping mall gets the mail for this signup activity so the admin has an option to give some permission to access the specific functioality. after the admin give permission staff can do their work.

Staff Login

After staff successfully log in they have some permission to do some activity. so do the work they have to log in. To log in they should give their credential. in the login process, the mail address is checked initially with the database if the mail address has in the database then the given password is checked with hasted password in the database for doing this thing we are using bcrypt module system. it compares the password and gives return the status for the comparison wrt staff can log in

In the login process, the JWT  token is created the token is the key to access all the functions it has time out section staff have only one-day valid access with this token after the token expires they have to login again. all the activities check the valid token for doing that. otherwise, they don't have access to anythings.

Deployment Frond-end and back-end

We are using nodejs system to develop our web application front end and backend. So we have to deploy our backend and front end. To deploy the front end we are using AWS AMPLIFY web hosting. it gives SSL certificated domain for access to the fronted end. Web Application

And deploy backend we use an EC2 instance. after the deploy it gives the IP and port for the backend api with a non-https URL. so that get an SSL certificate and main URL without port number we use Nginx technology

Web Application Testing

our web application have some functionality to do the admin and staff activity. In the testing we are checking these things using python and selenium for more information about the testing visit the testing section
Visit