WEB APPLICATON DEVELOPMENT

at

PICKRR TECHNOLOGIES PVT. LTD.

B. TECH 6th SEMESTER INTERNSHIP

INTERNSHIP PERIOD: JANUARY 2024 – MAY 2024

Under the guidance of

Mr. MANUJ MUNDRA

(Industrial Mentor)
&
Dr. RATNA DAHIYA
(Faculty Mentor)

Presented By:
Ashish Narayan Jha
Roll No. : 12114036
CONTENTS
• About The Organisation
• My Role at the Organisation
• Technologies Learnt: Frontend, Backend & Database
• Development Tools and Software Used
• Design and Integration of UI Components/ Tasks Assigned
• Project Assigned
• Project Outcomes and Future Scope
• Learnings & Conclusions

2
 About the
Organisation

Pickrr is a leading logistics and supply chain

solutions provider. 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.

3
Pickrr is easily integrable with platforms such as Shopify,
Magento, Unicommerce and Woocommerce for seamless
and effective order management.

Pickrr works with leading courier companies to ensure our

clients the lowest possible charges on shipping.

Pickrr’s industry-leading platform helps e-commerce business simplify

4 shipping by dispatching, managing and tracking orders through a
single dashboard.
 Specific Projects and Tasks:
Dynamic Admin Panel for Seller Configuration:
• Developed a user-friendly admin panel for managing seller
configurations on the Fastrr Dashboard.
MY ROLE AT THE ORGANISATION • Implemented dynamic form rendering and advanced search
functionalities.
• Integrated backend APIs for data fetching and configuration updates.
• Ensured secure access and authorization using JWT tokens.
Select Rule Type Card Component:
POSITION: • Developed a "Select Rule Type" card component for the Pickrr
• Software Development Intern Dashboard.
• Enabled users to create shipping rules for various predefined options.
• Used HTML, CSS, JavaScript, React.js, Tailwind CSS, and Ant
DURATION: Design for frontend development.
UI Components Design for Shipping Rules:
• January 8, 2024 – May 15, 2024 • Designed and implemented UI components for setting prepaid
discounts, COD charges, and shipping visibility.
• Integrated functionalities to apply maximum or minimum discounts
PRIMARY RESPONSIBILITIES: based on user input.
• Web Application Development: Developing
and optimizing web applications using the
MERN (MongoDB, Express.js, React.js, TECHNOLOGIES STACK USED
Node.js) stack.
⮚ Frontend Development : HTML, CSS, Tailwind CSS,
JavaScript, ReactJS, Ant Design
⮚ Backend Development :Node.js , Express JS

5
⮚ Database : MongoDB
⮚ Development Tools Used: Postman, GitLab, JIRA
 MVC Architecture in MERN Stack

TECHNOLOGIES LEARNT

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 stands for MongoDB, Express, React, Node

 Mongoose’ (Model): It defines the data part.

 Express & Node.js (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.
 React (View) : Client tier is written in JavaScript, HTML,
6
and CSS, using ReactJS as the framework.
Frontend Development Technologies

• For structuring and styling the web pages and rapidly • For adding interactive elements to the web pages:
build custom designs :
JavaScript is a programming language used for
Tailwind CSS is a Utility-first CSS
creating dynamic content on websites. It is
framework for building rapid custom UI. It
a lightweight, cross-platform and single-
is a highly customizable, low-level CSS
threaded programming language
framework.

• For implementing pre-built UI components for a • For building user interfaces with a component-based architecture.
professional look :
React is a declarative, component based library that
Ant Design is a React.js UI library that
allows developers to build reusable UI components
contains easy-to-use components that are
and It follows the Virtual DOM(Document Object
useful for building interactive user
Model) approach, which optimizes rendering
interfaces. It is very easy to use as well as
performance by minimizing DOM updates.
integrate. It is one of the smart options to
design web applications using React.

.
 Working of REACT JS:
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.

Component-Based Architecture:
React is recommended in creating SPAs (Single Page Applications), allowing
smooth content updates without page reloads. React provides the feature to break
down the UI into smaller, self-contained components. Each component can have its
own state and props.
8
 Working of Node JS:
Node.js is famous due to the use of JavaScript across the entire stack,
asynchronous programming model for handling multiple requests
Backend Development Technologies simultaneously, fast execution due to the V8 engine, large and active
community support, scalability for real-time applications, cross-platform
compatibility.

Node JS Server Architecture and Working:

• Node.js:
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 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.

9
 Express JS:
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.

Importance of Express JS:

To manage several concurrent clients, Node.js employs a “Single  Middleware and Routing
Threaded Event Loop” design. The JavaScript event-based model  Minimalistic Design
and the JavaScript callback mechanism are employed in the Node.js  Error Handling
Processing Model.  Body Parsing
 Designed to be lightweight and scalable, Express.js handles a large number of
• Event Queue: The main use of Event Queue is to store the requests asynchronously.
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.

10
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. 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.

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 .

11
 DEVELOPMENT TOOLS: API
TESTING

• Postman is an API (application programming

interface) development and testing tool that helps to
build, test and modify APIs.

Request Methods:

Mainly 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.
12
Collaborative Software Development
Platform

GitLab is an Open Source code

repository and collaborative software
development platform for large
DevOps projects.

It provides a complete solution for managing Git

repositories, from version control to CI/CD
(Continuous Integration/Continuous
Deployment ).

13
PROJECT MANAGEMENT TOOL
JIRA WORKFLOW

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:

• Agile Project Management

• Issue and Task Tracking
• Customisable Workflow
• Reporting and Analytics
• Integrations, Automation, Security

14
 TASK ASSIGNED:
UI Libraries Used-
Ant Design TASK: 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 Pickrr Dashboard using HTML, CSS, JavaScript, ReactJS,
Ant Design is a React.js UI library that contains
Tailwind CSS, AntDesign.
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
UI DESIGN TEMPLATE:
smart options to design web applications using
react. It provides us with high-quality
components which can be used with ease.

 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.

15
DESIGN & • Designed frontend for admins to decide the Prepaid Discount
INTEGRATION OF UI Value according to mode of payment UPI, CARDS,
NETBANKING, Wallets, EMI’s, BNPL, CREDPAY,
COMPONETS: REWARDS.

 Also implemented the functionality that when the “Apply Max

value” is checked, the system applies the maximum discount
when both the flat and percentage discounts are provided,
otherwise apply the minimum discount
• Developed a UI Component which allow admin or
authorised users to create different shipping rules such as :
Prepaid Discount, COD Charge, Shopping Charge, Disable
COD, Shopping Visibility

16
• UI component to set up COD Charges value, shipping
charge value, shipping visibility on Dashboard.

Technology stack Used:

⮚ Frontend : React JS, Tailwind CSS, JavaScript, Ant
Design
⮚ Backend : Node JS , Express JS
17
⮚ Database : MongoDB
PROJECT
ASSIGNED
TITLE: “Dynamic Admin Panel for Seller Configuration”

Initial Phase:
Project Overview • Requirement gathering and analysis.
• Development of a dynamic admin panel to manage seller • Designing the overall architecture and user interface.
configurations on the Fastrr Dashboard.
• Provides a user-friendly interface for administrators to search, Development Phase:
view, and update seller settings. • Frontend development using React, Ant Design, and Tailwind
• Project involved frontend and backend development, ensuring a CSS.
robust and scalable solution. • Backend development using Node.js and Express.js.
• Integration of dynamic form rendering and search functionalities.
Objective
Testing Phase:
• Create an efficient and user-friendly admin panel for dynamic
• Rigorous testing for functionality, security, and performance.
management of seller configurations based on data received from
• User acceptance testing with real-time feedback.
backend APIs.
• Streamline the process for administrators to search, view, and
Deployment Phase:
update seller settings.
• Deployment, Monitoring and optimization post-deployment.

18
DETAILED PROJECT FLOW

Initial Setup: Local Storage Management:

• Initialization of the React component “Configuration Panel’ with • Management of access rights and JWT tokens in local storage.
state variables.
Authentication and Authorization:
API Data Fetching: • The system ensures secure access by authenticating administrators
• Utilizing `useQuery` hook from `react-query` to fetch data from using JWT tokens. Authorization checks are performed to restrict
backend APIs. access to certain features based on user roles and permissions.

Dynamic Form Rendering: Updating Configuration:

• Forms created dynamically based on the configuration data • Submission of updated configurations via PUT requests to the
retrieved from APIs. backend.

Rendering Search Input: User Interaction and Event Handling:

• Dynamic input fields with advanced search option for searching • Event handlers for form submissions, button clicks, and other user
sellers using criteria like email, domain name, company name, or interactions.
ID.
Error Handling and Notifications:
Modal for Configuration Updates: • Robust mechanisms to handle API call failures and validation
• Custom modal interface for allowing updates to seller errors, with user notifications for actions.
configurations. Dynamic adjustment of table columns based on
19 backend data, with action buttons for accessing seller dashboards
and configuration settings.
 • 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
PROJECT IMPLEMENTATION the `panelData` state variable. If there is an error during the API request, an
error notification is displayed.

Initial Setup:

• The React component `ConfigurationPanel` is mounted

within the application.
Rendering Search Input:
• It initializes state variables such as `searchKey`,
`searchValue`, `sellerEmail`, `isModalOpen`, • The component renders an input field for searching sellers, allowing admins
`sellerConfig`, `updateConfigData`, and `flag` using the to filter configuration data based on specific criteria such as email, domain
`useState` hook. name, company name, or company ID.
API Data Fetching:

• The component uses the `useQuery` hook from `react-

query` to fetch configuration data from the backend API.

20
 Modal for Configuration Updates:
CONSOLE:
• 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.

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.

21
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.

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`).
PROJECT OUTCOMES & FUTURE
SCOPE
FUTURE SCOPE

Advanced Analytics and Reporting:

Project Success • Integration of analytical tools for deeper insights and customizable reporting.
Successful development and deployment of the dynamic admin
panel within the timeline. Integration with Emerging Technologies:
• Incorporating machine learning for predictive analytics and blockchain for
Skill Development data integrity.

Significant improvement in both frontend and backend Improved Collaboration and Workflow:
development skills. • Adding in-app messaging and real-time collaboration tools.
Team Collaboration
API Expansion:
Effective collaboration and communication within the • Extensive integration with third-party applications to expand functionality.
development team.
Efficiency Improvement Continuous Monitoring and Feedback:
• Implementing continuous monitoring and feedback mechanisms for ongoing
improvements.
Enhanced efficiency and productivity in managing seller
configurations.

23
LEARNINGS & CONCLUSION Project Management Skills:
• Task Prioritization: Prioritized tasks using JIRA.
• Version Control: Used Git and GitLab for
collaborative development
Technical Skills:
Overall Experience
• MERN Stack: Practical experience with MongoDB, Express.js, The internship at Pickrr Technologies Pvt. Ltd. provided valuable
React.js, Node.js. hands-on experience in web application development.
• API Integration: Created and consumed RESTful APIs,
implemented JWT authentication. Skill Development
• UI/UX Design: Developed user-friendly interfaces using Enhanced both technical and soft skills, preparing for future career
React.js, Tailwind CSS, Ant Design. opportunities.

Future Goals
Soft Skills: Aiming to leverage the skills and knowledge gained during the
• Problem-Solving: Efficient troubleshooting and creative internship to contribute to impactful projects in the future.
solutions.
• Collaboration & Communication: Improved teamwork and ACKNOWLEDGMENT
communication through regular feedback sessions.
• Time Management: Balanced multiple tasks and met project Mentorship: Grateful for the guidance and support from Mr.
deadlines. Manuj Mundra and Dr. Ratna Dahiya throughout the internship.

Opportunity: Thankful to Pickrr Technologies Pvt. Ltd. for

24
providing this learning opportunity.