INTERNSHIP REPORT

on

WEB APPLICATON DEVELOPMENT

Submitted in partial fulfillment for the award of the degree
of
BACHELOR OF TECHNOLOGY
in
ELECTRICAL ENGINEERING
by

ASHISH NARAYAN JHA

12114036

at

PICKRR TECHNOLOGIES PVT. LTD.

448 A, Enkay Square, Udyog Vihar, Gurgaon, 122002

INTERNSHIP PERIOD: 08 JANUARY 2024 – 15 MAY 2024

Under the guidance of

Mr. MANUJ MUNDRA Dr. RATNA DAHIYA

(Industrial Mentor) (Faculty Mentor)
1|Page
 Pickrr Technologies Private Limited

Date: 12th Jun 2024

TO WHOMSOEVER IT MAY CONCERN

This is to certify that Mr. Ashish Narayan Jha from National Institute of Technology-Kurukshetra has
successfully completed his internship from 08th Jan 2024 to 15th May 2024 with Pickrr Technologies Pvt.
Ltd.

He completed his internship in the Software Development.

During his internship period with us we found him to be hard-working, diligent and honest in performing his
duties.

We wish him all the best for future endeavors.

Yours truly,

For Pickrr Technologies Pvt. Ltd.

Saumya Khati
CHRO – Human Resources

Registered Office: Third Floor, 448A, Enkay Square, Udyog Vihar, Ph-5, Gurgaon, Haryana, 122022
CIN: U74140HR2015PTC057213
Email Id: info@pickrr.com
Website:www.pickrr.com
 SUPERVISOR'S CERTIFICATE

This is to certify that Mr. Ashish Narayan Jha, Roll No. 12114036, a student of 6th
Semester, B.Tech. in Electrical Engineering at National Institute of Technology,
Kurukshetra has successfully completed his industrial internship at Pickrr
Technologies Pvt. Ltd., Gurgaon from January 08, 2024 to May 15, 2024. He has
completed his internship under my supervision and as per the Industrial
Internship report submitted by him.

Place: GURGAON Signature:

Date: |5- 0S a0Y (Name of Supervisor): MANUN..MINDRA.
Designation: ....VI...
Email ID: ..mAnu).pcksQm..
Name of the Organization: Picksaleshnelgs
 DECLARATION
I hereby declare that the internship report titled "Web Application Development"
is an authentic record of my own work which was carried out under the guidance
of Mr. Manuj Mundra, Assistant Vice President, Pickrr Technologies Pvt. Ltd.
This internship is carried out as per the requirements of the internship semester
for the evaluation of 6th semester of B.Tech., Electrical Engineering, National
Institute of Technology Kurukshetra.

Ashjsh Narayan Jha

RollNo.: 12114036
B. Tech, Electrical Engineering
National Institute of Technology Kurukshetra

This is to state that the above report made by the student is accurate and true to
the best of my knowledge and belief.

Faculty Mentor
Dr. Ratna Dahiya
Professor, Electrical Engineering Department
National Institute of Technology Kurukshetra

4|Page
 ACKNOWLEGMENT
L,Ashish Narayan Jha, am grateful for the invaluable
opportunity to complete my
internship with the Software Development Team at Pickrr Technologies Pvt. Ltd.
Iextend my heartfelt thanks my Industrial mentor Mr. Manuj Mundra and to
the
entire Software Development team at Pickrr Technologies Pvt. Ltd. for their warm
welcome and continuous support throughout my internship. Their mentorship
has helped me expand my technical skills, understand complex concepts, and
develop a problem-solving mindset. This experience has been instrumental in
bridging the gap between theoretical knowledge and practical application,
allowing me to gain deep insights into the field of Software Development.
Furthernmore, Iwould like to express my gratitude to Dr. Ratna Dahiya, my faculty
mentor, for her constant guidance and support throughout this internship. Her
insights and advice have been invaluable.
Iam also thankful to the Training and Placement Cell, National Institute of
Technology Kurukshetra for providing me with such an opportunity.
I express my thanks to all the members for providing me support and their
constant encouragement during training. The knowledge gained, relationships
forged, and skills acquired are invaluable, and I look forward to applying them in
my future endeavours.

Ashish Narayan Jha

Roll No.: 12114036

5|Page
 ABSTRACT

This report provides a comprehensive overview of my internship experience at

Pickrr Technologies Private Limited, where I contributed as a Web Development
Intern. The internship spanned 18 weeks from 08/01/2024- 15/05/2024 and was
aimed at enhancing my practical knowledge in web development while also
providing insights into the corporate environment of a leading logistics
company. During my tenure, I was involved in various phases of web
development, including frontend and backend development, using the MERN
(MongoDB, Express.js, React.js, Node.js) stack. My primary responsibilities
included developing and optimizing web applications, collaborating with the
software development team, and participating in project planning and
implementation. In the first phase of the internship, I was introduced to
different tools, technologies, and methodologies and received hands-on training
in JavaScript, ReactJS, NodeJS, and Express used in creating industry-level
products. I also became proficient in using development tools such as GitLab for
version control, JIRA for project management, and Postman for API testing. As I
progressed, I took on more complex tasks such as designing user interfaces,
implementing state management using React Hooks, and developing server-side
logic. I was also responsible for integrating frontend components with backend
services and ensuring data consistency and security. Additionally, I worked on
optimizing the performance of web applications to enhance user experience. In
the final phase of the internship, I was given the opportunity to work on live
projects like Dynamic Admin Panel for Seller Configuration, UI component
design where I could see my efforts making a difference for the organization. I
collaborated with cross-functional teams to deliver scalable and efficient web
solutions that met client requirements. This phase also included rigorous testing
and debugging to ensure the reliability and robustness of the applications.
Throughout the internship, I gained valuable insights into the logistics industry
and the role of technology in streamlining operations.

6|Page
 TABLE OF CONTENTS

INTERNSHIP COMPLETION CERTIFICATE

SUPERVISOR’S CERTIFICATE
DECLARATION
ACKNOWLEDGMENT
ABSTRACT

1. INTRODUCTION AND BACKGROUND………………………………… 8

1.1 Introduction……………………………………………………………... 8
1.2 Web Development Process……………………………………………... 9
1.3 Introduction to MERN STACK………………………………………… 10

2. FRONTEND TECHNOLOGIES USED…………………………………… 15

2.1 Hypertext Markup Language (HTML)…………………………………. 15
2.2 Cascading Style Sheets (CSS)…………………………………………... 16
2.3 Tailwind CSS…………………………………………………………… 16
2.4 JavaScript……………………………………………………………….. 17
2.5 ReactJS…………………………………………………………………. 18
2.5.1 Features of ReactJS……………………………………………………... 18
2.5.2 Working of React JS……………………………………………………. 20
2.5.3 React Component Methods……………………………………………... 21
2.5.4 React Component Lifecycle Methods…………………………………... 23
2.5.5 State Management using React Hooks………………………………….. 24
2.6 Ant Design……………………………………………………………... 25

3. BACKEND DEVELOPMENT.…………………………………………….. 26
3.1 Node JS…………………………………………………………………. 27
3.2.1 Key Features of NodeJS………………………………………………... 28
3.2.2 Working of NodeJS & Server Architecture……………………………. 28
3.2 Express…………………………………………………………………. 29
3.2.1 Importance of Express…………………………………………………. 29
3.2.2 Features of Express……………………………………………………..
29

7|Page
4. DATABASE………………………………………………………………….. 30
4.1 Introduction to MongoDB……………………………………………... 30
4.2 MVC Architecture in MERN Stack……………………………………. 31
5. DEVELOPMENT TOOLS & SOFTWARE USED……………………….. 32
5.1 POSTMAN……………………………………………………………... 33
5.2 GITLAB………………………………………………………………... 34
5.3 JIRA SOFTWARE……………………………………………………... 35
6. IMPLEMENTATION OF THE PROJECT……………………………….. 37
6.1 Project Description……………………………………………………... 37
6.2 Objective………………………………………………………………... 37
6.3 Flow of the Project……………………………………………………… 38
6.4 Technologies Used……………………………………………………… 41
6.5 Dependencies…………………………………………………………… 42
6.6 Key Project Deliverables……………………………………………….. 44
6.7 Outcomes……………………………………………………………….. 45
6.8 Future Scope……………………………………………………………. 45
7. TASK ASSIGNED…………………………………………………………... 46
7.1 Task Description………………………………………………………... 46
7.2 UI Component Design and Integration…………………………………. 48
8. CONCLUSION……………………………………………………………… 49
REFERENCES 50
APPENDIX 51

8|Page
 1. INTRODUCTION AND BACKGROUND

1.1. INTRODUCTION

During my tenure at Pickrr Technologies Private Limited as a Software Development

Intern, I was involved in multiple responsibilities focused on enhancing the web
development aspects of the company's logistics solutions. My key responsibilities
included:
• Frontend Development- The part of a website where the user interacts directly is
termed as front end. It is also referred to as the ‘client side’ of the application.

• Backend Development- Backend is the server side of a website. It is part of the

website that users cannot see and interact with. It is the portion of software that does
not come in direct contact with the users. It is used to store and arrange data.

1.2. WEB DEVELOPMENT PROCESS

Web development involves several stages, each crucial for building a successful website
or web application. The various steps involved in web development process are:

1) PLANNING & ANALYSIS

• Requirement Gathering: This phase involves understanding the client's needs,

goals, target audience, and any specific features or functionalities they desire.
• Feasibility Study: Analyzing the feasibility of the project in terms of technology,
time, and cost. This helps in determining whether the project can be successfully
executed within the given constraints.
• Project Scope: Defining the project scope involves outlining the features,
functionalities, and deliverables that will be included in the project.
• Sitemap and Wireframes: Creating a sitemap to visualize the structure of the
website or application and wireframes to outline the layout and navigation. This
provides a blueprint for the development process.

2) DESIGN

• UI/UX Design: Focus on user experience (UX) and user interface (UI) design to
ensure the site is user-friendly and visually appealing. This involves designing
layouts, selecting color schemes, and creating interactive elements.
• Prototyping: Develop prototypes to visualize the design and gather feedback.
Prototypes help in identifying any usability issues early in the design process.
• Design Approval: Getting approval from the development team for the design
before proceeding to development ensures alignment between design and
development goals.

3) DEVELOPMENT

9|Page
• Front-End Development: Convert designs into HTML, CSS, and JavaScript. This
stage focuses on creating the client-side interface that users interact with and
ensuring responsiveness across different devices.
• Back-End Development: Develop server-side logic, database structures, and APIs.
• Integration: Integrate front-end and back-end components to ensure they work
seamlessly together. This involves connecting the user interface with the server-
side functionality through APIs.

4) TESTING

• Unit Testing: Testing individual components or modules of the application to

ensure they function correctly in isolation.
• Integration Testing: Testing the interaction between different components or
modules to ensure they work together as expected.
• System Testing: Test the complete system for bugs, performance issues, and
security vulnerabilities.
• User Acceptance Testing (UAT): Allow the client to test the system and provide
feedback.

5) DEPLOYMENT

• Server Setup: Preparing the production environment by configuring servers,

databases etc.
• Code Deployment: Transfer the codebase to the live server.
• DNS Configuration: Set up domain names and ensure they point to the correct
servers.
• Post-Deployment Testing: Conducting final testing to ensure everything works as
expected in the production environment.

6) MAINTENANCE & UPDATES

• Monitoring: Continuously monitoring the website or application for uptime,

performance, and security issues to ensure smooth operation.
• Bug Fixes: Addressing any issues or bugs that arise post-deployment to maintain
the integrity and functionality of the system.
• Updates: Implement updates and new features as needed.
• Backup: Regularly backup the site to prevent data loss.

10 | P a g e
 1.3. INTRODUCTION TO MERN STACK

MERN Stack is a collection of powerful and robust technologies, used to develop

scalable master web applications comprising backend, front-end, and database
components. MERN Stack is a technology that is a user-friendly full-stack JavaScript
framework for building applications and dynamic websites.

MERN stands for MongoDB, Express, React, Node. The specific role of each of these
elements while creating a web application are listed below:

• MongoDB - The application data is stored in this document-oriented, No-SQL

database.
• ExpressJS - It is a framework that sits atop NodeJS and is used to create a website’s
backend using NodeJS functions and structures. NodeJS was created to run JavaScript
on computers, not to create websites, so ExpressJS was created to fill that gap.
• React - It is a library that Facebook built. It is used to build the UI elements that go
into a single page web application’s user interface.
• NodeJS – This is the JavaScript runtime environment that is used to run the JavaScript
code on the machine itself, instead of a browser.

WORKING OF MERN STACK:

The MERN architecture allows you to easily construct a three-tier architecture (front
end, back end, database) entirely using JavaScript and JSON.

11 | P a g e
a) React: Frontend Library

The top tier of the MERN stack is React.js, the declarative JavaScript framework for
creating dynamic client-side applications. React is a JavaScript library that is used for
building user interfaces. React is used for the development of single-page applications
and mobile applications because of its ability to handle rapidly changing data. React
allows users to code in JavaScript and create UI components.

Features of React.js
• Virtual DOM – A virtual DOM object is a representation of a DOM object. Virtual
DOM is actually a copy of the original DOM. Any modification in the web
application causes the entire UI to re-render the virtual DOM. Then the difference
between the original DOM and this virtual DOM is compared and the changes are
made accordingly to the original DOM.
• JSX – Stands for JavaScript XML. It is an HTML/XML JavaScript Extension which
is used in React. Makes it easier and simpler to write React components.
• Components – ReactJS supports Components. Components are the building blocks of
UI wherein each component has a logic and contributes to the overall UI. These
components also promote code reusability and make the overall web application
easier to understand.
• High Performance – Features like Virtual DOM, JSX and Components makes it much
faster than the rest of the frameworks.
• Developing Android/iOS Apps

b) Node.js server (Runtime Environment)

The next level is the Express.js server-side framework, running inside a Node.js server.
Node.js provides a JavaScript Environment which allows the user to run their code on
the server (outside the browser). Node pack manager i.e. npm allows the user to choose
from thousands of free packages (node modules) to download.

Features of Node.js:
• Open-source JavaScript Runtime Environment
• Single threading – Follows a single-threaded model.
• Data Streaming
• Built on Google Chrome’s JavaScript Engine, Node.js has a fast code execution.
• Highly Scalable

12 | P a g e
c) Express.js (Backend Framework)

Express.js is as a “fast, unopinionated, minimalist web framework for Node.js”. Express

is a Node.js framework. Rather than writing the code using Node.js and creating loads of
Node modules, Express makes it simpler and easier to write the back-end code. Express
helps in designing great web applications and APIs. Express supports many middleware
which makes the code shorter and easier to write.Express.js has powerful models for
URL routing (matching an incoming URL with a server function), and handling HTTP
requests and responses. By making XML HTTP Requests (XHRs), GETs, or POSTs
from your React.js front end, you can connect to Express.js functions that power your
application. Those functions, in turn, use MongoDB's Node.js drivers, to access and
update data in your MongoDB database.

Features of Express.js: Single-threaded.

• Efficient, fast & scalable
• Has the biggest community for Node.js
• Express promotes code reusability with its built-in router.
• Robust API

d) MongoDB (Cross-Platform Document Oriented Database)

MongoDB is a NoSQL database where each record is a document comprising of key-

value pairs that are similar to JSON (JavaScript Object Notation) objects. MongoDB is
flexible and allows its users to create schema, databases, tables, etc. JSON documents
created in your React.js front end can be sent to the Express.js server, where they can be
processed and stored directly in MongoDB for later retrieval.

Features of MongoDB:
• Fast – Being a document-oriented database, easy to index documents. Therefore, a
faster response.
• Scalability – Large data can be handled by dividing it into several machines.
• Use of JavaScript – MongoDB uses JavaScript which is the biggest advantage.
• Schema Less – Any type of data in a separate document.
• Data stored in the form of JSON
1. Objects, Object Members, Arrays, Values, and Strings
2. JSON syntax is very easy to use.
3. JSON has a wide range of browser compatibility.
4. Sharing Data: Data of any size and type (video, audio) can be shared easily.
• Simple Environment Setup – Its really simple to set up MongoDB.
• Flexible Document Model – MongoDB supports document-model (tables, schemas,
columns & SQL) which is faster and easier.

13 | P a g e
 ADVANTAGES OF USING MERN STACK:

1. Cost-effective: All the four technologies (MongoDB, Express.js, React.js, and Node.js)
used in MERN Stack is built on JavaScript that makes it cost-effective and within less
cost investment user will able to get the better results or output.
2. SEO friendly: SEO (Search Engine Optimization) friendly means that Google,
Yahoo and other search engines can search each page on the website efficiently and
easily, interpret and correlate the content effectively with the searched text and easily
index it in their database. As whenever websites are created using MERN technologies,
then it is always SEO friendly.
3. Better performance: Better performance refers to the faster response between backend
and front-end and database, which ultimately improves the website speed and yields
better performance, thus providing a smooth user experience.
4. Improves Security: It mainly concerns the security of applications generated using
MERN. Web application security refers to various processes, methods or technologies
used for protecting web servers and various web applications, such as APIs
(Application user interface) from the attack by internet-based threats. Generally,
secured hosting providers can easily integrate applications created using the MERN
stack. For more or better security Mongo DB and Node.js security tools are also used.
5. Provide the fastest delivery: Any Web applications and mobile applications created by
using MERN Stack are built much faster, which also helps to provide faster delivery to
clients.
6. Provides faster Modifications: MERN stack technologies supports quick
modifications as per the client's request in the mobile and web applications.
7. Open Source: All the four technologies that are involved in MERN are open-source.
This feature allows developers to get solutions to queries that may evolve from the open
portals during development. As a result, it will be ultimately beneficial for a developer.
8. Easy to switch between client and server: MERN is very simple and fast because it is
written in only one language. And also, it is very easy to switch between client and
server.

14 | P a g e
 2. FRONTEND TECHNOLOGIES USED
It is the visible part of website or web application which is responsible for user
experience. The user directly interacts with the front-end portion of the web application
or website.

Front-end Technologies:

2.1. HTML - Structuring the web

HTML stands for Hyper Text Markup Language. It is used to

design the front-end portion of web pages using markup
language. HTML is the combination of Hypertext and Markup
language. It is the standard language used to create and design
web pages on the internet.
It was introduced by Tim Berners-Lee in 1991 at CERN as a
simple markup language.

Features of HTML:I easy to learn and easy to use.

• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.

2.2. CSS - Styling the web

CSS (Cascading Style Sheets) is a simply designed language

intended to simplify the process of making web pages presentable.
CSS is the language that transforms a basic HTML structure into a
user-friendly and visually beautiful webpage. It can change the
font, color, size, and spacing of content, split it into multiple
columns, or add animations and other features.

Features of CSS:

• CSS saves time: You can write CSS once and reuse the same sheet in multiple
HTML pages.
• Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered a clean coding technique, which means search
engines won’t have to struggle to “read” its content.
• Superior styles to HTML: CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML
attributes.
• Offline Browsing: CSS can store web applications locally with the help of an
offline cache. Using this we can view offline websites.
15 | P a g e
 CSS has 3 ways to style your HTML:
a) Inline: Add styles directly to HTML elements (limited use).
b) Internal: Put styles inside the HTML file in a <style> tag.
c) External: Create a separate CSS file (.css) and link it to your HTML.

Components of CSS:
CSS works by associating rules with HTML elements. A CSS rule contains two main
parts:
• a selector which specifies the HTML element(s) to style.
• a declaration block which contains one or more declarations separated by
semicolons.
Each declaration includes a property name and a value, specifying the aspect of the
element's presentation to control.

2.3. TAILWIND CSS – CSS Framework

Tailwind CSS is a Utility-first CSS framework for building rapid
custom UI. It is a highly customizable, low-level CSS framework
that gives you all of the building blocks that you need. Also, it is a
cool way to write inline styling and achieve an awesome interface without writing a
single line of your own CSS.

Features of Tailwind CSS: easy to learn and easy to use.

• No more silly names for CSS classes and IDs.
• Minimum lines of Code in CSS file.
• We can customize the designs to make the components.
• Makes the website responsive.
• Makes the changes in the desired manner.
• With the help of Tailwind CSS, we can use utility classes and make local changes.

16 | P a g e
2.4. JavaScript – Dynamic Client-side Scripting

JavaScript is a programming language used for creating dynamic

content on websites. It is a lightweight, cross-platform and single-
threaded programming language. JavaScript is
an interpreted language that executes code line by line providing
more flexibility. It is a commonly used programming language
to create dynamic and interactive elements in web applications. It is
easy to learn.

Features of JavaScript: I easy to learn and easy to use.

• Versatility: JavaScript can be used to develop websites, games, mobile apps, and
more.
• Client and Server-Side: With frameworks like Node.js and Express.js, JavaScript is
now used for building server-side applications.
• End-to-End Solutions: JavaScript enables developers to create complete solutions
for various problems.
• Constant Evolution: JavaScript continually evolves with new features and
standards.
• Vibrant Community: A large community of users and mentors actively contributes
to JavaScript’s growth.

JavaScript can be added to HTML file in two ways:

• Internal JS: We can add JavaScript directly to our HTML file by writing the code
inside the <script> tag. The <script> tag can either be placed inside the <head> or
the <body> tag.

• External JS: We can write JavaScript code in another file having an extension.js
and then link this file inside the <head> tag of the HTML file in which we want to
add this code.

JavaScript was created in the first place for DOM manipulation. Earlier websites were
mostly static, after JS was created dynamic Web sites were made. With advances in
browser technology and JavaScript having moved into the server with Node.js and
other frameworks, JavaScript is capable of so much more.

17 | P a g e
2.5. React JS – JavaScript Library

ReactJS, also known as React, is a popular JavaScript library

for building user interfaces. It is also referred to as a front-end
JavaScript library. It was developed by Facebook and is widely
used for creating dynamic and interactive web applications.
React is a declarative, component based library that allows
developers to build reusable UI components and It follows
the Virtual DOM (Document Object Model) approach, which
optimizes rendering performance by minimizing DOM updates. React is fast and
works well with other tools and libraries.

History of React:
React was invented by Facebook developers who found the traditional DOM slow. By
implementing a virtual DOM, React addressed this issue and gained popularity
rapidly.

2.5.1. Features of React JS:

React is one of the most demanding JavaScript library because it is equipped with a
ton of features which makes it faster and production-ready. React is recommended in
creating SPAs (Single Page Applications), allowing smooth content updates without
page reloads. Its focus on reusable components makes it ideal for real-time
applications.

1. JSX (JavaScript Syntax Extension)

JSX is a syntax extension for JavaScript that allows developers to write HTML-like
code within their JavaScript files. It makes React components more readable and
expressive.

2. Component-Based Architecture
18 | P a g e
 React provides the feature to break down the UI into smaller, self-contained
components. Each component can have its own state and props. ReactJS is all
about components. ReactJS application is made up of multiple components, and
each component has its own logic and controls. These components can be reusable
which help you to maintain the code when working on larger scale projects.

3. One-way Data Binding

One-way data binding, means one-direction flow. The data in react flows only in
one direction i.e. the data is transferred from top to bottom i.e. from parent
components to child components. The properties(props) in the child component
cannot return the data to its parent component but it can have communication with
the parent components to modify the states according to the provided inputs. The
benefits of one-way data binding give you better control throughout the application.
If the data flow is in another direction, then it requires additional features. It is
because components are supposed to be immutable and the data within them cannot
be changed.

4. Virtual DOM
React maintains a lightweight representation of the actual DOM in memory. When
changes occur, React efficiently updates only the necessary parts of the DOM. A
virtual DOM object is a representation of the original DOM object. It works like a
one-way data binding. Whenever any modifications happen in the web application,
the entire UI is re-rendered in virtual DOM representation. Then it checks the
difference between the previous DOM representation and new DOM. Once it has
done, the real DOM will update only the things that have actually changed. This
makes the application faster, and there is no wastage of memory.

5. Components
React divides the web page into multiple components as it is component-based.
Each component is a part of the UI design which has its own logic and design. So,
the component logic which is written in JavaScript makes it easy and run faster and
can be reusable.

6. Performance
Virtual DOM and updates only the modified parts. So, this makes the DOM to run

19 | P a g e
 faster. DOM executes in memory so we can create separate components which
makes the DOM run faster. DOM is a cross-platform and programming API which
deals with HTML, XML or XHTML. The DOM exists entirely in memory. Due to
this, when we create a component, we did not write directly to the DOM. Instead,
we are writing virtual components that will turn into the DOM leading to smoother
and faster performance.

2.5.2. Working of React JS:

React operates by creating an in-memory virtual DOM rather than directly
manipulating the browser’s DOM. It performs necessary manipulations within this
virtual representation before applying changes to the actual browser DOM. React is
efficient, altering only what requires modification.

The React app calls the reactdom.render method, bypassing the user interface created
using the React component (coded in JSX or React Elementor format) and the
container to render the user interface. ReactDOM.render processes JSX or React
Elements and emits virtual DOM. The virtual DOM will be merged and rendered in the
container.

2.5.3. React Components:

In ReactJS, there are two types of components. They are:

1. Functional Components- JavaScript functions that take the props as an argument,
and return the user interface (usually via JSX). Functional component is also
known as a stateless component because they do not hold or manage state.

2. Class Components- JavaScript classes that provide a render method, which

returns the user interface (usually via JSX). It requires you to extend from

20 | P a g e
 React.Component and create a render function which returns a React element.
You can pass data from one class to other class components. The class component
is also known as a stateful component because they can hold or manage local
state.

While function components are easier to define and understand, class components
were needed to deal with state, contexts, and many more of React's advanced features.
However, with React Hooks, we can deal with React's advanced features without
needing a class component.

2.5.4. React Component Lifecycle Methods (Class Components):

In ReactJS, every component creation process involves various lifecycle methods.

These lifecycle methods are termed as component's lifecycle. These lifecycle methods
are not very complicated and called at various points during a component's life.
Lifecycle is defined as the series of methods that are invoked in different stages of the
component’s existence. The lifecycle of the component is divided into four phases.

• Initialization phase- It is the birth phase of the lifecycle of a ReactJS component.

Here, the component starts its journey on a way to the DOM. This is the stage
where the component is constructed with the given Props and default state. These
default properties are done in the constructor of a component. The initial phase
only occurs once and consists of the following methods.

21 | P a g e
 • getDefaultProps()
It is used to specify the default value of this.props. It is invoked before the creation
of the component or any props from the parent is passed into it.
• getInitialState()
It is used to specify the default value of this.state. It is invoked before the creation
of the component.

• Mounting Phase- In this phase, the instance of a component is created and inserted
into the DOM. It consists of the following methods. Mounting is the stage of
rendering the JSX returned by the render method itself. It consists of the following
methods:
• componentWillMount()
This is invoked immediately before a component gets rendered into the DOM. In
the case, when you call setState() inside this method, the component will not re-
render.
• componentDidMount()
This is invoked immediately after a component gets rendered and placed on the
DOM. After that we can perform DOM querying operations.
• render()
This method is defined in each and every component. It is responsible for
returning a single root HTML node element. If you don't want to render
anything, you can return a null or false value.

• Updating Phase- Updating is the stage when the state of a component is updated
and the application is repainted. t is the next phase of the lifecycle of a react
component. Here, we get new Props and change State. This phase also allows to
handle user interaction and provide communication with the component’s
hierarchy. The main aim of this phase is to ensure that the component is displaying
the latest version of itself. Unlike the Birth or Death phase, this phase repeats again
and again. This phase consists of the following methods.
• componentWillRecieveProps()
It is invoked when a component receives new props. If you want to update the
state in response to prop changes, you should compare this.props and nextProps
to perform state transition by using this.setState() method.
• shouldComponentUpdate()
It is invoked when a component decides any changes/updation to the DOM. It
allows you to control the component's behavior of updating itself. If this method
returns true, the component will update. Otherwise, the component will skip the
updating.
• componentWillUpdate()
It is invoked just before the component updating occurs. Here, you can't change
the component state by invoking this.setState() method. It will not be called,
if shouldComponentUpdate() returns false.
• render()
It is invoked to examine this.props and this.state and return one of the following

22 | P a g e
 types: React elements, Arrays and fragments, Booleans or null, String and
Number.
• componentDidUpdate()
It is invoked immediately after the component updating occurs. In this method,
you can put any code inside this which you want to execute once the updating
occurs. This method is not invoked for the initial render.

• Unmounting-As the name suggests Unmounting is the final step of the component
lifecycle where the component is removed from the page. It is the final phase of the
react component lifecycle. It is called when a component instance
is destroyed and unmounted from the DOM. This phase contains only one method
and is given below.

• componentWillUnmount()
This method is invoked immediately before a component is destroyed and
unmounted permanently. It performs any necessary cleanup related task such as
invalidating timers, event listener, cancelling network requests, or cleaning up
DOM elements. If a component instance is unmounted, you cannot mount it
again.

2.5.5. State Management using REACT Hooks:

React hooks are a powerful feature in React that allow you to add state and other
features to functional components. They were introduced in React 16.8 and have since
become an integral part of React development. Because of this, class components are
generally no longer needed.

• Hooks can only be used in function components, not in class components.

• The order of Hook definitions matters, and needs to stay the same; thus, we
cannot put Hooks in if conditionals, loops, or nested functions

Most commonly used React hooks are:

23 | P a g e
Basic Hooks:

• useState Hook: State generally refers to data or properties that need to be tracking
in an application. The React useState Hook allows us to track state in a function
component. The hook returns an array containing the current state value and a
function to update that state value.

• useEffect Hook: The useEffect hook is used to perform side effects in functional
components. It accepts a function that will be executed after every render or when
specific dependencies change. This hook is useful for handling data fetching,
subscribing to events, or manipulating the DOM.

• useContext Hook: The useContext hook allows you to access a context object in a
functional component. Context is a way to pass data down the component tree
without having to pass props manually.

Additional Hooks: Additional Hooks are either more generic variants of basic Hooks
or are needed for certain edge cases.

• useReducer Hook: The useReducer hook allows you to manage complex state in a
functional component. It’s similar to the useState hook, but instead of a simple
value, it takes a reducer function and an initial state.

• useCallback Hook: The useCallback hook allows you to memoize a function so that
it’s only re-created when its dependencies change. This can help improve
performance by preventing unnecessary re-renders.

• useMemo Hook: The useMemo hook allows you to memoize a value so that it’s
only re-computed when its dependencies change. This can help improve
performance by preventing unnecessary re-computations,

• useRef Hook: The useRef hook allows you to create a mutable ref object that
persists for the lifetime of the component. You can use it to store and access values
that don’t trigger a re-render.

• useLayoutEffect Hook: The useLayoutEffect hook is similar to useEffect, but it’s

executed synchronously after all DOM mutations. This makes it useful for
manipulating the DOM immediately after a component is rendered.

• useDebugValue: This Hook can be used to display a label in React DevTools when
creating custom Hooks. This Hook should be used in custom Hooks to display the
current state of your Hooks, as it will make it easier to debug them.

24 | P a g e
2.6. Ant Design – React JS UI Library

Ant Design is a React.js UI library that contains easy-to-use

components that are useful for building interactive user interfaces. It
is very easy to use as well as integrate. It is one of the smart options
to design web applications using react. It provides us with high-
quality components which can be used with ease.

Features of Ant Design:

• Enterprise-class UI designed for web applications.
• A set of high-quality React components out of the box.
• Written in TypeScript with predictable static types.
• Whole package of design resources and development tools.

Component Designs:

25 | P a g e
 3. BACKEND DEVELOPMENT

3.1. INTRODUCTION TO NODEJS

Node.js is an open-source server environment that uses

JavaScript on server. A Node.js application runs within a
single process, without generating a new thread for each
request. Node.js includes asynchronous I/O primitives as
a part of its standard library, which prevents JavaScript
code from blocking and, in general, libraries in Node.js
are developed using non-blocking paradigms. This makes
blocking behaviour the exception instead of the rule.

Importance of Node.js

Node.js is famous due to the use of JavaScript across the entire stack, asynchronous
programming model for handling multiple requests simultaneously, fast execution due
to the V8 engine, large and active community support, scalability for real-time
applications, cross-platform compatibility, and its role in enabling full-stack
development. All these features make Node.js very fast and popular.

3.1.1. Key features of Node.js

• Node.js enables developers to use JavaScript across the entire stack, from front-end
to back-end. This consistency simplifies development and reduces context
switching.
• Asynchronous Programming Model: Node.js uses an event-driven, non-blocking
(asynchronous) I/O model. This allows handling multiple requests simultaneously
without blocking the execution of other tasks. As a result, Node.js applications are
highly responsive and efficient.
• Fast Execution: Node.js leverages the V8 engine, developed by Google, which
compiles and executes JavaScript at lightning speeds. This performance advantage
makes it suitable for real-time applications and microservices.

26 | P a g e
• Large and Active Community: Node.js has a vibrant community of developers,
libraries, and tools.
• Scalability: Node.js is lightweight and scalable, making it an excellent choice for
building real-time applications, RESTful APIs, and microservices.
• Cross-Platform Compatibility: Node.js runs on Windows, Linux, Unix, macOS,
and more. This flexibility allows developers to write code once and deploy it
anywhere.

3.1.2. Working of Node.js:

Node.js accepts the request from the clients and sends the response, while working
with the request node.js handles them with a single thread. To operate I/O operations
or requests node.js use the concept of threads. Thread is a sequence of instructions that
the server needs to perform. It runs parallel on the server to provide the information to
multiple clients. Node.js is an event loop single-threaded language. It can handle
concurrent requests with a single thread without blocking it for one request.

Node.js Ecosystem:

Node.js has a vibrant ecosystem with a plethora of libraries, frameworks, and tools.
some key components are:

• npm (Node Package Manager): npm is the default package manager for Node.js. It
allows developers to install, manage, and share reusable code packages (called
modules).
• Express.js: Express is a popular web application framework for Node.js. It
simplifies routing, middleware handling, and request/response management. Many
developers choose Express for building APIs, web servers, and single-page
applications.
• Socket.io: For real-time communication, Socket.io is a go-to library. It enables
bidirectional communication between the server and clients using WebSockets or
fallback mechanisms.
• Mongoose: In MongoDB (a NoSQL database), Mongoose provides an elegant way
to model your data and interact with the database. It offers schema validation,
middleware, and query building.

Node.js Server Architecture:

To manage several concurrent clients, Node.js employs a “Single Threaded Event

27 | P a g e
Loop” design. The JavaScript event-based model and the JavaScript callback
mechanism are employed in the Node.js Processing Model.

It employs two fundamental concepts:

• Asynchronous model
• Non-blocking of I/O operations

Components of the Node.js server Architecture:

• Requests: Depending on the actions that a user needs to perform, the requests
to the server can be either blocking (complex) or non-blocking (simple).
• Node.js Server: The Node.js server accepts user requests, processes them, and
returns results to the users.
• Event Queue: The main use of Event Queue is to store the incoming client
requests and pass them sequentially to the Event Loop.
• Thread Pool: The Thread pool in a Node.js server contains the threads that are
available for performing operations required to process requests.
• Event Loop: Event Loop receives requests from the Event Queue and sends out
the responses to the clients.
• External Resources: In order to handle blocking client requests, external
resources are used. They can be of any type (computation, storage, etc.).

The event loop only performs a single process at a time. This means that it can only
execute one function at a time, and since functions can include multiple instructions,
the event loop will only execute one instruction at a time. The beauty of the event loop
is that it has the ability to “put aside” time-consuming I/O activities so that other
instructions can continue to execute without interruption. This is different from
running everything on a single thread. This is why, despite the possibility of numerous
users simultaneously sending queries to a Node.js API, we receive quick results.

However, through the use of worker threads, we can execute instructions as an

Asynchronous model. Internally, Node.js makes use of the libuv library, which is a
C++ library that manages operating system-related tasks like concurrency, networking,
and asynchronous I/O-based operating systems. This library creates a thread pool
of four threads to execute OS-related tasks while making use of all the CPU cores’
processing capacity. It also helps in managing all the other threads. Hence, libuv
provides Node.js with multi-threaded capabilities in some cases.

28 | P a g e
3.2. INTRODUCTION TO EXPRESS:

Express.js is a fast, flexible and minimalist

web framework for Node.js. It’s effectively a
tool that simplifies building web applications
and APIs using JavaScript on the server side.
Express is an open-source that is developed and maintained by the Node.js
foundation.

3.2.1. Importance of Express.js:

• Middleware and Routing: Express.js makes it easy to organize your application’s

functionality using middleware and routing. Middleware functions allow you to
handle tasks like authentication, logging, and error handling. Routing ensures that
incoming requests are directed to the appropriate handlers.
• Minimalistic Design: Express.js follows a simple and minimalistic design
philosophy. This simplicity allows you to quickly set up a server, define routes,
and handle HTTP requests efficiently. It’s an excellent choice for building web
applications without unnecessary complexity.
• Flexibility and Customization: Express.js doesn’t impose a strict application
architecture. You can structure your code according to your preferences. Whether
you’re building a RESTful API or a full-fledged web app, Express.js adapts to
your needs.
• Scalability: Designed to be lightweight and scalable, Express.js handles a large
number of requests asynchronously. Its event-driven architecture ensures
responsiveness even under heavy loads.
• Active Community Support: With a thriving community, Express.js receives
regular updates and improvements.

29 | P a g e
 4. DATABASE

4.1. MongoDB: Cross Platform, Document Oriented Database

MongoDB is an open-source document-oriented

database that is designed to store a large scale of
data and also allows you to work with that data
very efficiently. It is categorized under the
NoSQL (Not only SQL) database because the
storage and retrieval of data in the MongoDB are not in the form of tables.
The MongoDB database is developed and managed by MongoDB.Inc. It also provides
official driver support for all the popular languages like C, C++, C#, and .Net, Go, Java,
Node.js, Perl, PHP, Python etc.

Working of MongoDB:

MongoDB operates on a document-oriented model rather than the traditional table-based

relational database structure.

• Documents: The basic unit of data in MongoDB, similar to a row in a relational

database, but much more flexible. Documents are stored in BSON format (Binary
JSON), allowing for nested and complex data structures.
• Collections: Groups of documents, similar to tables in a relational database.
• Databases: A physical container for collections, providing a namespace for grouping
collections.

Key Features:

• CRUD Operations: Create, Read, Update, Delete operations are fundamental for
interacting with MongoDB.

1. Create: Insert documents into a collection.

2. Read: Query documents from a collection.
3. Update: Modify existing documents.
4. Delete: Remove documents from a collection.

• Indexing: MongoDB supports indexing to optimize query performance. Indexes can

be created on any field within documents.

• Aggregation Framework: Used for complex data processing and transformation,

similar to SQL's GROUP BY clause but more powerful and flexible.

In the MongoDB database, a single collection comprises multiple documents, and these
documents may further comprise the different numbers of values, fields, and so on. One
document doesn't need to be a must to relate with the other documents, as it happens in
relational databases.

30 | P a g e
4.2. MVC Architecture in MERN Stack:

The Model-View-Controller (MVC) is an architectural pattern that separates an

application into three basic components: the model, the view, and the controller. Each of
these components are built to handle specific development aspects of an application.
MVC is one of the most frequently used industry-standard web development framework
to create scalable and extensible projects.

• Mongoose’ (model) defines the data part. This is where we will store all of the crucial
data our application needs to function.
• Express & Node.js does all the functional programming and will be used to write the
Logic Tier (controller). It is the request-response handler. This tier represents the
Application Server that will act as a bridge of communication for the Client and
Database. This tier will serve the React components to the user’s device, and accept
HTTP requests from the user and follow with the appropriate response.
• React serves as the “V” in the MVC. Client tier (View) is written in JavaScript,
HTML, and CSS, using ReactJS as the framework. This level of the architecture is
what the user will interact with to access the features of application.

31 | P a g e
 5. DEVELOPMENT TOOLS

5.1. POSTMAN:

Postman is an API (application programming interface)

development tool that helps to build, test and modify APIs. It has
the ability to make various types of HTTP requests (GET, POST,
PUT, PATCH), save environments for later use, converting the
API to code for various languages (like JavaScript, and Python).

Key features of Postman:

Postman stands as an indispensable tool for modern API development, offering a range
of features that streamline the development process.

• Versatile Request Methods: Postman supports an array of HTTP request methods,

encompassing GET, POST, PUT, DELETE, and PATCH. This versatility allows
developers to interact comprehensively with APIs.
• Flexible Request Body Formats: Developers benefit from the flexibility of handling
various request body formats, including form-data, URL-encoded data, raw data, and
binary data. This adaptability caters to the diverse requirements of different APIs.
• Authentication Simplified: Postman simplifies the intricacies of authentication by
providing support for various methods such as API keys, Auth, and Basic Auth. This
streamlines the process of securing API interactions, ensuring a robust and secure
development environment.
• Organized API Testing: Collections in Postman serve as a powerful organizational
tool, allowing developers to categorize and manage API requests efficiently. This
organized structure facilitates seamless sharing and collaboration within development
teams. Moreover, the platform enables the automation of testing through the use of
JavaScript, enhancing the efficiency of the testing process.
• Efficient Documentation: Postman excels in the generation of API documentation
directly from requests and collections. This feature provides a streamlined and

32 | P a g e
 centralized approach to documenting APIs, benefiting both internal development
teams and external stakeholders. The documentation process is efficient, ensuring
clarity and accessibility.

Working of Postman:

Postman sends the request to the webserver and then the server sends the response back
to it. A user has to set all the headers and cookies API expects to check the
response. API call mainly uses two things:

• HTTP Request
Request Methods:
There are several types of Request methods in POSTMAN. Mainly there are four request
methods in an application.
• GET Request: To retrieve or fetch data
• POST Request: To create and update data
• PUT Request: To update data
• DELETE Request: For deleting data

Request URL: A long-width bar in Postman where URL to make the HTTP request is
entered.
Request Headers: In the request header, key value of the application is entered. The two
main key values are:
• Content-Type: The format of data is specified by Content-Type. Mainly JSON
format is used in the content type.
• Authorization: This information is included to identify the requester.
Request Body: In Postman, In Request Body we can mention some specific information
that needs to be sent with the request.

• HTTP Response:
Once the request is sent to Postman, the response is received back from the API that
contains Body, Cookies, Headers, Tests, Status Code, and API Response time. Body and
Header get organized in different tabs. Status code gets displayed in another tab with the
time taken to complete the API call. Some important status codes are given below to
verify the response.

• 200– For successful request.

• 201– For successful request and data was created
• 204– For Empty Response
• 400– For Bad Request.
• 401– For Unauthorized access. Authentication failed or the user does not have
permission for the requested operation.
• 403– For Forbidden, Access Denied
• 404– For data not found.
• 405– For method not allowed or requested method is not supported.
• 500– Internal server error.
• 503– For Service unavailable

33 | P a g e
5.2. GITLAB:

Git is a distributed version control system used for tracking

changes in source code during software development. It
allows multiple developers to collaborate on a project,
tracking changes made to files, and coordinating work
seamlessly.

GitLab is a web-based DevOps lifecycle tool that provides a complete solution for
managing Git repositories, from version control to CI/CD (Continuous
Integration/Continuous Deployment). It offers both self-hosted and cloud-hosted options,
catering to the needs of different teams and organizations.

34 | P a g e
 Key features of GITLAB:

• Source Code Management (SCM): GitLab provides robust source code

management through Git repositories. It allows teams to create, review, and manage
code repositories efficiently. The platform supports all Git functionalities, including
branching, merging, and pull requests.
• Continuous Integration and Continuous Deployment (CI/CD): GitLab CI/CD is
integrated directly into the platform, enabling seamless automation of the build, test,
and deployment processes. This helps in maintaining high code quality and reduces
the time to market by automating repetitive tasks.
• Issue Tracking and Project Management: GitLab includes comprehensive issue
tracking and project management tools. Teams can create issues, assign them, track
progress, and link them to specific code commits. This integration ensures
transparency and accountability in the development process.
• Code Review and Collaboration: GitLab’s merge request system facilitates code
reviews, allowing team members to review changes, provide feedback, and approve
code before it is merged. This process improves code quality and promotes
collaborative development.
• Security and Compliance: GitLab offers various security features, such as static and
dynamic application security testing (SAST and DAST), dependency scanning, and
container scanning. These tools help in identifying and mitigating security
vulnerabilities early in the development lifecycle.
• Wiki and Documentation: Each GitLab project comes with a wiki that can be used
to document the project, create guides, and maintain other documentation. This
feature helps in keeping all relevant information in one place and accessible to the
team.
• Pipeline and Automation: GitLab pipelines are a powerful feature that allows the
automation of tasks. Pipelines can be defined in a YAML file (.gitlab-ci.yml) and
include various stages such as build, test, and deploy. This automation ensures
consistency and efficiency in the software development lifecycle.

5.3. JIRA- Project Management Tool:

JIRA Software is a powerful project management tool

developed by Atlassian, designed to help teams plan,
track, and manage agile software development projects.
Known for its flexibility and wide range of features, JIRA
is widely used by software development teams to
streamline their workflows and improve project outcomes.

Key features of JIRA:

35 | P a g e
• Agile Project Management: JIRA supports agile methodologies such as Scrum
and Kanban. It provides customizable boards, backlogs, and sprints, allowing
teams to visualize their workflows, manage tasks, and track progress efficiently.
• Issue and Task Tracking: At the core of JIRA is its robust issue tracking system.
Issues can represent tasks, bugs, features, or any work item. Users can create,
assign, prioritize, and monitor issues through their lifecycle, ensuring nothing falls
through the cracks.
• Customizable Workflows: JIRA offers highly customizable workflows to match
the unique processes of any team. Workflows define the states an issue can go
through and the transitions between those states, enabling teams to model their
specific processes.
• Reporting and Analytics: JIRA provides a variety of reporting tools to help
teams gain insights into their performance. Burndown charts, velocity charts, and
sprint reports help track progress and identify areas for improvement.
Customizable dashboards offer real-time visibility into project status.
• Integrations: JIRA integrates with numerous development tools and services,
including Confluence (for documentation), Bitbucket (for code repositories), and
Bamboo (for CI/CD pipelines). It also supports integrations with third-party tools
through its marketplace.
• Roadmaps: Advanced roadmaps in JIRA allow teams to plan and visualize their
work on a larger scale. This feature is particularly useful for managing multiple
projects and ensuring alignment with organizational goals.
• Automation: JIRA’s automation capabilities help reduce manual effort and
streamline processes. Users can create automation rules to handle repetitive tasks,
such as transitioning issues based on certain triggers or sending notifications.
• Permissions and Security: JIRA offers fine-grained permission controls,
allowing administrators to define who can view, create, edit, and delete issues.
This ensures that sensitive information is protected and only accessible to
authorized users.

36 | P a g e
 6. PROJECTS/TASK ASSIGNED
“Dynamic Admin Panel for Seller Configuration”

6.1. PROJECT DESCRIPTION:

Development of dynamic admin panel to facilitate the management of seller-related

settings and parameters. It provides admins or authorized users with a user-friendly
interface to search for sellers, view their configurations, and update the configuration
panel as needed.

6.2. OBJECTIVE: To develop a dynamic admin panel that allows administrators to

efficiently manage seller configurations on Fastrr Dashboard.

Key features of the project include:

• Dynamic Form Rendering: Seller configurations are generated dynamically based on

seller configurations data received from backend APIs. This ensures flexibility and
adaptability to changing configuration requirements.

• Search Functionality: Administrators can search for sellers using various criteria such
as email, domain name, company name, or company ID. The search results are
displayed in a table for easy access.

• Configurable Table: The table displaying seller configurations dynamically adjusts its
columns based on the data received from the backend. It provides actions like
accessing the seller dashboard and configuring seller settings.

• Authentication and Authorization: The system ensures secure access by

authenticating administrators using JWT tokens. Authorization checks are performed
to restrict access to certain features based on user roles and permissions.

• Modal for Configuration: A custom modal interface allows administrators to update

individual seller settings. It provides a user-friendly interface for modifying settings
such as activation status and dashboard access.

• Error Handling and Notifications: The application includes robust error handling
mechanisms to manage API call failures and validation errors. Users are notified of
errors via notifications, enabling them to take appropriate action.

37 | P a g e
6.3. FLOW OF THE PROJECT:

The Configuration Panel interacts with the backend API and renders dynamic forms based
on the received configuration data.

1. Initial Setup:
- The React component `ConfigurationPanel` is mounted within the application.
- It initializes state variables such as `searchKey`, `searchValue`, `sellerEmail`,
`isModalOpen`, `sellerConfig`, `updateConfigData`, and `flag` using the
`useState` hook.

2. API Data Fetching:

- The component uses the `useQuery` hook from `react-query` to fetch
configuration data from the backend API.
- The `useQuery` hook sends a GET request to the `/api/ve1/aggregator-
service/user/search-seller` endpoint with appropriate parameters (`searchKey`,
`searchValue`) to retrieve configuration data based on the search criteria.
- Upon successful retrieval, the configuration data is stored in the `panelData` state
variable.
- If there is an error during the API request, an error notification is displayed.

3. Rendering Search Input:

- The component renders an input field for searching sellers, allowing admins to
filter configuration data based on specific criteria such as email, domain name,
company name, or company ID.

38 | P a g e
4. Dynamic Form Rendering:
- Based on the received configuration data (`panelData`), the component
dynamically renders forms to display and manage configuration settings.
- Each configuration group (e.g., "Company Id & Notifications," "Edd
Details," etc.) corresponds to a section within the configuration panel.
- Within each group, configuration keys are mapped to form input components
based on their `type` attribute (e.g., text input, checkbox, dropdown).
- The `readKey` and `writeKey` attributes are used to retrieve and update
configuration data.

5. Modal for Configuration Updates:

- When the administrator clicks on the "configuration" button for a specific
seller, a modal (`SellerConfigModal`) is opened.
- The modal displays form fields pre-filled with the seller's existing
configuration data fetched dynamically.
- Admins can modify the configuration settings within the modal.

39 | P a g e
6. Updating Configuration:
- On submitting the configuration updates within the modal, by clicking on
‘Save & Proceed’ Button, the component sends a PUT request to the
`/api/ve1/aggregator-service/user/config-update` endpoint with the updated
data.
- The `updatePanel` function handles the API call to update the configuration.
- If the update is successful, a success notification is displayed.

7. Seller Activation Status:

- The component also fetches the seller's activation status using another
`useQuery` hook.
- It sends a GET request to the `/api/ve1/aggregator-service/user/resync`
endpoint to update the seller's status based on certain parameters
(`typeValue`, `sellerEmail`, `pickrrAuth`).
- If the update is successful, a success notification is displayed.

40 | P a g e
 8. Interaction with Dashboard:
- Admins can interact with the dashboard by clicking on the "Dashboard"
button for a specific seller.
- The component opens the Dashboard in a new tab/window, passing the
necessary authentication token (`pickrrAuthToken`).

9. Local Storage Management:

- The component retrieves the admin's email from local storage to determine
access rights for certain features.
- Access rights are checked to enable or disable specific actions based on the
admin's role.

10. User Interaction and Event Handling:

- Event handlers are implemented to handle user interactions such as searching
for sellers, opening the configuration modal, and submitting configuration
updates.
- Form inputs are controlled components, meaning their values are managed
by state variables (`searchValue`, `sellerEmail`, etc.), and changes are
handled through event callbacks.

6.4. TECHNOLOGIES USED:

• Frontend Development:

- React: JavaScript library for building user interfaces.

- Ant Design: UI library for building React applications.
- Tailwind CSS: A utility first CSS framework utilised for efficient styling.
• Backend Development:

- Node.js: JavaScript runtime for building server-side applications.

- Express.js: Web application framework for Node.js.
• Database:

- MongoDB: NoSQL database for storing seller configurations.

41 | P a g e
6.5. DEPENDENCIES:

A software dependency is a reusable code library or package that allows quick

software delivery as it allows developers to building on previous work. The JavaScript
runtime environment Node.js uses the Node Package Management, or npm, as its
default package manager. It is made up of the npm command-line client and the npm
registry, an online repository for free and paid private packages. The client is used to
access the registry, and the npm website is used to browse and search for the packages
that are currently available.

Server-Side Dependencies:

• MongoDB - The MongoDB Node.js driver enables Node.js applications to connect

to MongoDB and operate with data using an asynchronous API that makes use of
Promises or conventional callbacks for interaction.

• Mongoose - A link between MongoDB and the Node.js JavaScript run-time

environment is made possible via the object-oriented JavaScript programming
package called Mongoose.

• Nodemon - Nodemon is a programme that facilitates the creation of Node.js-based

apps by relaunching the node application whenever a file change in the directory is
identified. It is a node wrapper substitute.

• JSON Web Token - A concise, URL-safe method of encoding claims that need to
be exchanged between two parties is the JSON Web Token (JWT). In a JSON Web
Token (JWT), the claims are encoded as a JSON object. This is used as the plaintext
of a JSON Web Encryption (JWE) structure or as a payload of a JSON Web
Signature (JWS) structure allowing the claims to be encrypted, digitally signed or
integrity protected with a Message Authentication Code (MAC).

• Google API’s - (Google APIs Node.js Client) is a library for leveraging Google
APIs with Node.js. The API endpoints are produced automatically, and
authorization and authentication using OAuth, API Keys, and JWT tokens are
supported.

• Express - Express is a straightforward and adaptable Node.js web application

framework that offers a comprehensive selection of functionality for both web-
based and mobile applications. It facilitates the creation of a strong API rapidly by
providing access to a wide range of HTTP utility methods and middle-ware.

• Express-fileupload - Uploading and downloading files is among the key features of

any web app. npm package express-fileupload is used to handle file uploads, and

42 | P a g e
 the express library’s res.download() function will take care of downloads. The
middleware is supplied to the app as express-fileupload,

• Dotenv -Dotenv is a zero-dependency module that loads process.env with

environment variables from .env files.

• CORS - A server can specify any origins (domain, scheme, or port) other than its
own from which a browser should be able to load resources using the Cross-Origin
Resource Sharing (CORS) protocol, which is based on the HTTP header.

• Cloudinary - A potent media API is called Cloudinary. The cloudinary package

makes it easier to create transformation URLs and offers unique elements and
directives that make it simple to incorporate assets into our React application. We
can quickly and simply integrate our application with Cloudinary, as well as easily
optimise, transform, upload, and manage the assets in our cloud.

Client-Side Dependencies:

• Axios - Axios is a promises-based HTTP client library. It facilitates CRUD

activities and the delivery of asynchronous HTTP requests to REST endpoints.
This REST endpoint/API could be our own backend Node.js server or an external
API like the Google API, GitHub API, and so on. The most often API queries are
get, post, and delete because we always need to retrieve data to display on our
applications as well as add and remove data from and to our API.

• React - React is a JavaScript library used to create user interfaces. Only the
functionality required to define React components is contained in the react
package. A React renderer, such as react-dom for the web or react-native for native
applications, is generally used in conjunction with it. When the data changes, React
quickly updates and renders the appropriate components.

• React-DOM - The server and DOM renderers for React are accessible through this
package. It is meant to be used in conjunction with the react package, which
contains the basic React components. If necessary, the react-dom package offers
DOM-specific functions that can be used as a backdoor to leave the React model.

• React-Router-DOM - A npm package called React Router DOM makes it possible

to integrate dynamic routing into web applications. It can be utilised to display
pages and enable visitor navigation. It is a complete client- and server-side routing
library for React. Building single page applications, or programmes with numerous
pages or components but no page refresh since the content is dynamically
downloaded from the URL, requires the use of React Router Dom. React Router
Dom makes it possible for this procedure, which is known as routing.

43 | P a g e
 • React-Redux - The official Redux/TS templates for Create React App, which
make use of Redux Toolkit, are the suggested method for beginning new projects
with React Redux. React Redux is the name of Redux’s official React binding. It
enables React components to access Redux Store data so they can update the data
by sending actions to the store. Redux assists in project growth by providing a
viable means of managing state using a unidirectional data flow design.

6.6. KEY PROJECT DELIVERABLES:

• Developed a feature that dynamically generates forms based on seller configuration

data received from backend APIs. Ensured the admin panel stays updated with the
latest configurations and parameters without requiring manual changes to the
codebase.

• Search Functionality: Implemented a robust search feature enabling administrators

to quickly find and manage sellers using various filters and sorting options.

• Enhanced the efficiency of locating specific sellers or configurations, thereby

improving the overall user experience.

• Real-time Configuration Management: Enabled administrators to update seller

configurations in real-time, providing the flexibility to add, modify, or delete
configuration parameters as needed.

• User Access Control: Incorporated features to manage user roles and permissions,
ensuring only authorized personnel could access and modify seller configurations.

• Backend Development: Enhanced User Interface: Utilized Ant Design components to

create a professional, consistent, and user-friendly interface. Focused on responsive
design principles to ensure the admin panel is accessible across various devices and
screen sizes. Built a scalable and efficient server-side logic using Node.js and
Express.js. Developed RESTful APIs to handle CRUD operations and facilitate
seamless communication between the frontend and backend.

• Development Tools and Collaboration: Employed GitLab for version control, CI/CD
pipelines, and code reviews to maintain code quality and streamline deployment
processes. Used JIRA for project management, task tracking, and sprint planning,
ensuring timely completion of project milestones.

• Leveraged Postman for API testing and validation to ensure robust and reliable
backend services.

44 | P a g e
 6.7. OUTCOMES:

• Successfully developed and deployed the dynamic admin panel within the stipulated
timeline, receiving positive feedback from the team.

• Improved the efficiency of managing seller configurations, resulting in a smoother

administrative process and enhanced operational effectiveness.

• Gained valuable experience in both frontend and backend development, improving my

versatility as a web developer and contributing significantly to the company's projects.

6.8. FUTURE SCOPE

The Dynamic Admin Panel developed during my internship has laid a strong foundation
for efficient seller configuration management. However, there are several potential
enhancements and expansions that can be explored to further improve its functionality,
usability, and overall impact.

• Advanced Analytics and Reporting

- Integrate analytical tools for deeper insights.
- Develop customizable reporting features.

• Integration with Emerging Technologies

- Integrate machine learning for predictive analytics.
- Explore blockchain for data integrity.

• Improved Collaboration and Workflow

- Add in-app messaging and real-time collaboration tools.
- Implement workflow automation.

• API Expansion and Integration:

- Expand API capabilities for extensive integrations.
- Enable third-party application integrations.

• Continuous Monitoring and Feedback:

- Implement real-time monitoring tools.
- Develop mechanisms for continuous user feedback.

45 | P a g e
 1. TASK ASSIGNED

1.1. TASK DESCRIPTION:

Development of a “Select Rule Type” card component user interface using frontend
technologies to enable users to create shipping rules for various predefined rules like
Prepaid Discount, COD Charge, Shipping Charge, Disable COD, Shipping Visibility for
configuration purposes on Dashboard using HTML, CSS, JavaScript, ReactJS, Tailwind
CSS, AntDesign.

SELECT RULE TYPE COMPONENT DESIGN:

INTEGRATION WITH DASHBOARD:

46 | P a g e
UI COMPONENT FOR PREPAID DISCOUNT VALUE:

47 | P a g e
UI COMPONENT FOR COD CHARGE VALUE:

UI COMPONENT FOR SHIPPING CHARGE VALUE:

UI COMPONENT FOR SHIPPING VISIBILITY:

48 | P a g e
 CONCLUSION
My internship at Pickrr Technologies Pvt. Ltd. has been an enriching journey,
significantly enhancing my understanding and proficiency in software
development. This hands-on experience has provided me with practical insights
into various web technologies, including React.js, Node.js, and MongoDB.
Working on developing and integrating complex components within the Pickrr
platform has deepened my understanding of the intricacies involved in software
development. This process has highlighted the importance of meticulous
planning, agile methodologies, and effective teamwork.

One of the critical learnings from this internship was the importance of agile
project management. Regular sprint meetings and iterative feedback loops
allowed for continuous improvement and timely identification of potential
issues. This approach not only ensured that the project stayed on track but also
fostered a collaborative environment where ideas and solutions were freely
exchanged.

Moreover, the internship underscored the significance of user-centric design and

development. Through user feedback sessions and usability testing, I learned
how crucial it is to develop interfaces that are intuitive and user-friendly. This
experience taught me how to balance functionality with usability, ensuring that
the end product is both powerful and easy to use.

In addition to technical skills, this internship has been instrumental in honing

my soft skills. Effective communication, both within the team and with external
stakeholders, was essential to the project's success. Presenting ideas clearly,
listening to feedback, and working collaboratively towards a common goal are
skills that I will carry forward into my future career.

Overall, my time at Pickrr has been invaluable in preparing me for future

challenges in the tech industry. It has provided me with a solid foundation in
web development, a deeper understanding of the software development
lifecycle, and a renewed passion for continuous learning and improvement. I am
grateful for this opportunity and look forward to applying these lessons in my
future endeavours

49 | P a g e
References:
• Williams, L. (2021). "Implementing Advanced Security Protocols in Web Applications."
Cybersecurity Journal, 5(1), 112-130.

• Smith, J., & Doe, R. (2022). "User-Centric Design in Web Development." International Journal of
Human-Computer Interaction, 14(4), 234-250.

• Lee, K., & Chang, H. (2021). "API Expansion Strategies for Web Applications." Journal of Software
Engineering, 18(2), 167-182.

• GeeksforGeeks. (n.d.). "Libuv in Node.js." Retrieved from https://www.geeksforgeeks.org/libuv-in-

node-js/.

• Mozilla Developer Network (MDN). (n.d.). "Introduction to React." Retrieved from

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-
side_JavaScript_frameworks/React_getting_started.

• MongoDB. (n.d.). "Introduction to MongoDB." Retrieved from https://www.mongodb.com/basics.

• W3Schools. (n.d.). "Node.js Tutorial." Retrieved from https://www.w3schools.com/nodejs/ .

• Agile Alliance. (n.d.). "What is Agile?" Retrieved from https://www.agilealliance.org/agile101/ .

• Nielsen Norman Group. (n.d.). "Usability 101: Introduction to Usability." Retrieved from
https://www.nngroup.com/articles/usability-101-introduction-to-usability/.

• OWASP Foundation. (n.d.). "Top 10 Web Application Security Risks. Retrieved from
https://owasp.org/www-project-top-ten/ .

• Doe, J., & Smith, A. (2020). "Modern Practices for Predictive Analytics in Web Applications."
Journal of Web Development and Technologies, 12(3), 45-56.

• GeeksforGeeks. (n.d.). "Express.js express static function." Retrieved from

https://www.geeksforgeeks.org/express-js-express-static-function/.

• Brown, R., & Green, P. (2019). "Scalability Techniques in Node.js Applications." International
Journal of Web Engineering, 11(2), 98-112.

• React. (n.d.). "React – A JavaScript library for building user interfaces." Retrieved from
https://reactjs.org/.

• GeeksforGeeks. (n.d.). "Express.js res send function." Retrieved from

https://www.geeksforgeeks.org/express-js-res-send-function/.

• Johnson, M. (2020). "Effective Agile Methodologies for Software Development." Journal of Project
Management, 22(3), 89-102.

50 | P a g e
 APPENDIX

ABOUT THE ORGANISATION:

Pickrr Technologies Pvt. Ltd.

Pickrr Technologies Pvt. Ltd., is a leading logistics and supply chain solutions
provider headquartered in New Delhi, India. The company specializes in offering
seamless and efficient end-to-end logistics services to businesses of all sizes, from
small and medium enterprises (SMEs) to large e-commerce giants. Pickrr’s mission is
to revolutionize the logistics industry by providing cutting-edge technology solutions
that simplify and optimize the shipping process for its clients.

Vision and Mission:

Vision:
Pickrr aims to become the most trusted logistics partner for businesses across the
globe, delivering excellence through innovation, technology, and a customer-centric
approach.

Mission:
To provide reliable, efficient, and scalable logistics solutions that empower businesses
to focus on their core competencies while Pickrr takes care of their shipping and
logistics needs.

Services Offered:
Pickrr offers a comprehensive range of logistics services, including:

1. Courier Aggregation: Pickrr partners with multiple courier services to provide

businesses with the best shipping options based on cost, speed, and reliability.
This aggregation model ensures that clients can choose the most suitable carrier
for their specific needs.
2. Fulfilment Solutions: Pickrr provides end-to-end fulfilment services, including
warehousing, inventory management, order processing, and last-mile delivery.
These solutions help businesses streamline their operations and reduce
operational overheads.
3. Real-Time Tracking: Through its advanced technology platform, Pickrr
enables real-time tracking of shipments, providing complete visibility and
transparency to clients and their customers.

51 | P a g e
 4. Return Management: Pickrr handles return logistics efficiently, offering hassle-
free solutions for managing returned goods, which is crucial for maintaining
customer satisfaction and optimizing reverse logistics.
5. Cross-Border Shipping: Pickrr facilitates international shipping, helping
businesses expand their reach to global markets with ease and reliability.

Technology and Innovation:

Pickrr’s technological prowess is at the core of its service offerings. The company
utilizes state-of-the-art technology to develop innovative solutions that address the
dynamic needs of the logistics industry.

Corporate Culture and Values:

Pickrr’s corporate culture is built on the values of innovation, integrity, customer

satisfaction, and continuous improvement. The company fosters a collaborative and
inclusive work environment where employees are encouraged to take initiative, think
creatively, and contribute to the company’s growth and success.

• Customer-Centric Approach: A strong focus on understanding and addressing

the unique needs of each client to deliver tailored solutions.
• Innovation: Commitment to continuous innovation and staying ahead of
industry trends to provide the best possible service.
• Integrity: Upholding the highest standards of integrity and transparency in all
business dealings.
• Teamwork: Promoting a collaborative work environment that values diversity
and encourages teamwork.

Achievements and Milestones:

Since its inception, Pickrr has achieved significant milestones, including:

• Rapid expansion of its service network across India and internationally.

• Building a strong client base comprising leading e-commerce companies and
diverse businesses.
• Recognition for its innovative solutions and contributions to the logistics
industry through various awards and accolades.

Pickrr Technologies Pvt. Ltd. continues to lead the logistics sector with its
commitment to excellence, innovation, and customer satisfaction.

52 | P a g e