FINTECH WEB APP USING REACT

PROJECT REPORT submitted in partial fulfillment of the requirements

Submitted by
V.B. Meher Chowdary (218W1A1264)
Under the guidance of
Mr. BIJESH.S

Sr. Project Director – Safe

Software & Integrated Solutions
For the award of the degree
BACHELOR OF TECHNOLOGY
IN
INFORMATION TECHNOLOGY

DEPARTMENT OF INFORMATION TECHNOLOGY

V R SIDDHARTHA ENGINEERING COLLEGE
(AUTONOMOUS – AFFILIATED TO JNTU – K, KAKINADA)
Approved by AICTE & Accredited by NBA
KANURU, VIJAYAWADA – 7
ACADEMIC YEAR
(2024 – 2025)
 V.R. SIDDHARTHA ENGINEERING COLLEGE

(Affiliated to JNTUK: Kakinada, Approved by AICTE, Autonomous)

(An ISO certified and NBA accredited institution)

Kanuru, Vijayawada – 520007

CERTIFICATE

This is to certify that this project report titled “FINTECH WEB APP USING MERN STACK” is a
bonafide record of work done by V.B. MEHER CHOWDARY (218W1A1264) under my guidance and
supervision is submitted in partial fulfilment of the requirements for the award of the degree of Bachelor of
Technology in Information Technology, V.R. Siddhartha Engineering College (Autonomous under JNTUK)
during the year 2024 - 2025.

(Mr. BIJESH.S) (Dr. M. Suneetha)

Sr. Project Director Professor &Head

Safe Software & Integrated Solutions Dept. of Information Technology

EXTERNAL EXAMINER
 ACKNOWLEDGEMENT

First and foremost, I sincerely salute our esteemed institution V.R SIDDHARTHA ENGINEERING
COLLEGE for giving me this opportunity for fulfilling my project. I am grateful to our principal Dr.
A.V.RATNA PRASAD, for his encouragement and support all through the way of my project.

On the submission of this Project report, I would like to extend my honor to Dr. M. Suneetha, Head
of the Department, IT for her constant motivation and support during the course of my work.

I feel glad to express my deep sense of gratefulness to my project guide Mr. Bijesh. S,Sr. Project
Director – Safe Software & Integrated Solutions for his guidance and assistance in completing this project
successfully.

I would also like to convey my sincere indebtedness to all faculty members, including supporting staff
of the Department, friends and family members who bestowed their great effort and guidance at appropriate
times without which it would have been very difficult on my part to finish the project work.
 TABLE OF CONTENTS

ACKNOWLEDGEMENT iii

LIST OF FIGURES v

ABSTRACT vi

CHAPTER-1 Introduction 8

1.1 Origin of the Problem 8

1.2 Basic definitions and Background 9

1.3 Problem Statement 10

1.4 Applications 11

CHAPTER-2 Review of Literature 12

2.1 Literature Survey 12

CHAPTER-3 Proposed Methodology 13

3.1 System Specifications 13

3.2 Architecture diagram 13

3.4 Used technologies 14

CHAPTER-4 Implementation Steps 18

4.1 Designing UI/UX in Figma 18

4.2 Setup the Development Environment 18

4.3 Implement layout and components 18

4.4 Develop the loan application form 19

4.5 Implement OTP verification flow 19

4.6 Dynamic data binding and API integration 20

4.7 Setup routing and navigation 20

4.8 Form validation and error handling 20

 4.9 Testing 20

4.10 Deployment 20

CHAPTER-5 Results and Observations 21

5.1 Results 21

Internship Certificate 26

CHAPTER – 6 Conclusion and Future Study 31

6.1 Conclusion 27

6.2 Future Study 27

References 28
 LIST OF FIGURES

Figure Page
Figure – 1: Architecture Diagram 13

Figure – 2: Figma design 18

Figure – 3: App components 19

Figure – 4: OTP generation 19

Figure – 5: Landing Page 21

Figure – 6: Login Page 21

Figure – 7: Registration Page 22

Figure – 8: OTP validation 22

Figure – 9: Steps for applying a loan 23

Figure – 10: Validation check 23

Figure – 11: Loan amount selection 24

Figure – 12: Loan Details 25

Figure – 13: Application Submission 25

 ABSTRACT

The Instant Loan Application is a web-based application designed to streamline the process of applying for
loans by providing an intuitive and user-friendly interface. Developed using React.js for front-end
development and Figma for design, the application aims to offer users a seamless loan application experience
with minimal effort.

The front-end interface is built using React.js, a powerful JavaScript library, ensuring a dynamic and
responsive user experience across all devices. It allows users to interact with features such as selecting loan
amounts, choosing loan tenures, and providing personal and bank details. The design process for the
application was carried out using Figma, ensuring a clean and modern interface that aligns with the best UX/UI
practices for ease of use and aesthetic appeal.

The application includes essential functionalities such as input validation to ensure that users provide the
correct information, enhancing security and improving the overall user experience. Additionally, the
application incorporates features such as OTP-based mobile number verification and secure navigation
between pages, all designed to guide the user through the loan application process step-by-step.

By combining React.js for development and Figma for design, the Instant Loan Application ensures a smooth
and efficient loan application process for users, with a focus on ease of use, security, and responsiveness.

Keywords: React.js, Figma, Front-end Development, Loan Application, User Experience.

 CHAPTER - 1

INTRODUCTION

The Instant Loan Application is a modern, web-based solution tailored to simplify and expedite personal loan
processing for users who need financial support on short notice. With increasing demand for fast and accessible
loan options, this platform addresses the need for a secure, efficient, and user-friendly application that
minimizes wait times and administrative complexities.
Built with React.js for a dynamic, responsive frontend and designed in Figma to enhance user experience
through a clean, intuitive layout, the application allows users to complete loan applications effortlessly while
maintaining strong security protocols. The core process involves users providing essential details, such as
desired loan amount, tenure, and personal information. To safeguard sensitive data and verify user identity, an
OTP-based email verification system is implemented. This OTP (One-Time Password) verification adds an
additional layer of security by requiring users to authenticate their email addresses, ensuring only verified
users can proceed with the application.
The platform also incorporates a real-time loan calculator that enables users to select a loan amount and tenure,
displaying updated repayment information instantly. This interactive feature enhances transparency by giving
users a clear view of their repayment obligations upfront.
With its robust, component-based architecture in React.js, the Instant Loan Application efficiently handles
data retrieval and display, providing a seamless interaction flow for users. Additionally, the application is
structured to scale, supporting potential integrations with backend services and databases for storing user and
loan data securely.
Overall, the Instant Loan Application offers a streamlined solution for fast, secure, and user-centric loan
processing, making it ideal for individuals seeking immediate financial assistance while maintaining full
transparency and security throughout the application process.

1.1 Origin Of Problem:

The The demand for fast, accessible, and reliable loan services has surged, particularly as digital finance
evolves and individuals increasingly seek financial solutions online. Traditional loan processes, often
characterized by lengthy paperwork, prolonged verification, and extensive in-person interactions, have
struggled to meet the immediacy and convenience that modern users expect. This legacy process can deter
individuals who need immediate financial assistance, forcing them to navigate complex systems for something
as essential as securing a personal loan.

8
With the rise of smartphones and digital solutions, many individuals now expect seamless, online access to
essential services, including loans. However, even digital loan applications frequently lack streamlined
verification and security, potentially compromising user data and increasing the risk of unauthorized access.
Additionally, many online loan systems overlook the importance of interactive tools, like loan calculators, that
allow users to transparently estimate repayment terms. This oversight can make it challenging for users to fully
understand their financial commitments upfront, which may impact trust and satisfaction.

Recognizing these gaps, the Instant Loan Application was conceptualized as an innovative, user-centric
platform that simplifies loan applications while addressing security and usability concerns. The integration of
an OTP-based email verification system aims to provide an additional layer of protection, ensuring that only
verified users proceed. Furthermore, the inclusion of real-time calculation features enables transparency,
allowing users to see their repayment details instantly, which empowers them to make informed decisions.
The problem originates from the existing complexity and fragmented nature of loan applications, which
prevent users from experiencing a quick, secure, and fully transparent loan process. By using a Figma-designed
interface paired with React.js, the project aims to deliver a modern, responsive, and secure solution that
addresses the inefficiencies in traditional loan systems, ultimately offering users a seamless way to meet their
financial needs with confidence and ease.

1.2 Basic Definitions and Background

1.2.1 Figma:
Figma is a web-based design tool widely used for interface design, user experience (UX) creation, and
prototyping. Known for its collaborative features, Figma allows multiple users to work on the same design
in real-time, making it a preferred tool for teams developing and refining UI/UX elements. Figma’s design
and prototyping capabilities enable designers to create dynamic user interfaces, build interactive
prototypes, and streamline the process of gathering feedback. This collaborative design environment is
particularly beneficial for aligning design elements with development in projects like the Instant Loan
Application.

1.2.2 React Js:

React.js, commonly referred to as React, is an open-source JavaScript library developed by Meta (formerly
Facebook) used for building user interfaces (UI), especially for single-page applications (SPAs). React's
component-based structure allows developers to create reusable UI components, making it ideal for
dynamic applications like the Instant Loan Application. By efficiently updating and rendering components
based on data changes, React helps build interactive and responsive web interfaces.

9
1.2.3 OTP Based Verification:
OTP (One-Time Password) is a security feature commonly used in online transactions and user
verification. In this project, OTP-based email verification serves as an authentication method to confirm
user identity during account registration. By sending a unique, time-sensitive code to the user's email,
OTP verification adds an additional layer of security, ensuring that only authenticated users can proceed
with the loan application. This security feature safeguards user data and reduces the risk of unauthorized
access.

1.2.4 JavaScript:
JavaScript is a versatile, high-level programming language essential for front-end and back-end
development. JavaScript powers interactive and dynamic elements in web applications, making it a crucial
language in this project for developing the user interface and handling real-time updates. On the server
side, JavaScript is used within Node.js to manage backend logic, further enhancing the consistency and
performance of the application across the full stackThese are foundational technologies commonly used
in modern web development and play key roles in building interactive, scalable, and dynamic web
applications.

1.2.5 CSS and Responsive Design:

CSS (Cascading Style Sheets) is used for styling web pages and ensuring a consistent visual appearance
across different devices and screen sizes. Responsive design principles enable the Instant Loan
Application to adapt to various devices, such as desktops, tablets, and smartphones, providing a smooth
user experience across platforms. By leveraging CSS and responsive design, the project delivers a
polished, intuitive, and accessible interface for users applying for loans from any device.

1.3 Problem Statement

In today’s fast-paced digital economy, individuals often face challenges in accessing quick and reliable
financial solutions to meet immediate needs, such as medical expenses, education fees, or unforeseen
emergencies. Traditional loan application processes are typically time-consuming, involving extensive
paperwork, in-person verifications, and delayed approvals, which can hinder users from addressing urgent
financial demands.

There is a critical need for an efficient, secure, and user-friendly digital platform that allows users to apply
for and manage loans seamlessly. A modern web-based application is required to simplify the loan application
process, enhance user experience, and provide quick access to funds with robust security measures. The
solution must ensure safe user authentication, protect sensitive data, and deliver a smooth, responsive interface
accessible from multiple devices.

10
 The Instant Loan Application, leveraging the MERN stack, aims to bridge this gap by providing a secure
platform for users to apply for loans digitally. With features like OTP-based email verification for user
authentication, a straightforward loan application form, and responsive design, this project addresses the need
for a fast, accessible, and reliable digital lending solution.

1.4 Applications
The memoir app has versatile applications across various sectors promoting sustainability, welfare and
environmental consciousness.

Personal Financial Assistance: The primary application of the Instant Loan Application is for individuals
seeking immediate financial support. Users can quickly apply for loans to meet urgent personal needs,
such as medical expenses, education fees, or other unforeseen financial requirements. This platform offers
a fast, reliable solution for users to access funds without traditional banking delays, improving their
financial flexibility and security.

Small Business Support: Entrepreneurs and small business owners can utilize the Instant Loan
Application for quick funding to cover operational costs, inventory purchases, or marketing campaigns.
This application supports small businesses by providing accessible capital, enhancing their ability to
manage cash flow and expand their ventures.

Educational Funding: Students and educational institutions can benefit from the platform by offering
instant loans for tuition, supplies, or certification fees. Students can focus on their studies without the
added stress of securing education funding through lengthy traditional processes.

Travel Loans: Travel enthusiasts can leverage the Instant Loan Application to fund their travel plans
without financial limitations. Whether for leisure or business, the app allows users to borrow funds to
cover travel expenses, making dream destinations and experiences more attainable.

Emergency Relief: During natural disasters or emergencies, individuals and families may need rapid
financial assistance. The Instant Loan Application can provide essential funding to help cover urgent
needs, such as temporary housing, food, or medical supplies, supporting users in times of crisis.

Vehicle Financing: The application can serve users seeking to purchase or lease vehicles for personal or
business use. By providing a straightforward loan process, users can secure necessary transportation
without extensive waiting times or complex financial requirements.

Professional Development: Professionals can use the Instant Loan Application to fund career
development, including certification programs, workshops, or training. This application allows users to
invest in their professional growth, supporting skill advancement and career progression.

11
 CHAPTER – 2

REVIEW OF LITERATURE

2.1 Literature Survey

1. Rapid Financing Platform Using MERN Stack [2021]

his project presents a full-stack application developed with the MERN stack to provide a streamlined,
user-friendly platform for applying for personal loans. The system enables users to enter loan amounts, view
estimated repayment schedules, and receive instant approval or rejection notifications. MongoDB stores user
information securely, while React.js creates a smooth and responsive user experience. Node.js and Express
handle server-side operations, ensuring quick API response times. This application demonstrates the potential
of MERN technology for creating efficient financial platforms with real-time decision-making capabilities.

2. Digital lending system with OTP verification [2020]

This system is designed for digital loan applications, emphasizing user security through OTP-based
email verification during the registration process. The platform allows users to submit loan requests by
specifying loan amounts, tenures, and repayment preferences. The backend is developed using Node.js and
Express to handle loan requests, while MongoDB securely stores user information and loan data. OTP
verification adds a security layer to validate user identities. This application illustrates the significance of
secure, user-friendly digital lending solutions, catering to individuals seeking fast, convenient loans.

3. Automated Loan approval and processing system [2019]

The "Automated Loan Approval System" uses web technologies to streamline loan applications by
automating loan request evaluations. The platform assesses the applicant’s information and provides instant
eligibility feedback based on predetermined criteria. By integrating a user-friendly interface with backend
analytics, this system ensures a fast loan processing experience while minimizing human intervention. The
application highlights the growing trend of digital financial services aimed at enhancing the accessibility and
convenience of personal loan

4. Quick Cash Assistance App for Emergency Loans [2022]

This application focuses on providing users with emergency financial assistance, offering loan
approvals in minutes. Using a MERN stack architecture, it allows users to apply for loans by selecting amounts
and tenures, and provides immediate interest rate and repayment information. React.js delivers a responsive
frontend, while the backend, built with Node.js and Express, performs quick loan evaluations based on
predefined eligibility checks.

12
 CHAPTER – 3

PROPOSED METHODOLOGY

The chapter describes the proposed method, architecture diagram, system specifications, flowchart, used
technologies that are applied for this project.

3.1 System Specifications

The system for this project requires Linux (Ubuntu 16.04 to 20.04) or Windows (7 to 10), with a
minimum of 4 GB RAM and a 2 GHz processor (dual-core or higher). It is essential to have Node.js
(version 12.x or higher) and npm installed for managing dependencies. MongoDB (version 4.x or higher) is
used for database management. The recommended code editor is Visual Studio Code, along with Git for
version control. React.js and Express.js are used for front-end and back-end development, respectively.
Google Chrome or Mozilla Firefox should be used for testing, and Postman is suggested for API testing.
Optionally, Docker can be used for containerized deployment.

Figure 1: Architecture Diagram

The Instant Loan Application Web App is designed with a focus on providing a smooth and intuitive user
experience. The front-end is developed using React.js, which enables the creation of dynamic and
interactive interfaces. React’s component-based structure makes the app responsive and allows for
seamless updates, ensuring that users can interact with the loan application process easily.

Figma is utilized during the UI/UX design phase to create high-fidelity, interactive prototypes. These
prototypes guide the front-end development, ensuring that the user interface is visually appealing and
user-friendly.

The application incorporates OTP-based email verification to enhance security during the loan application
process. Users receive a one-time password for authentication, ensuring that their personal information
remains secure.
13
The final product is a web application that enables users to apply for loans with ease, manage their loan
details, and navigate through the application process smoothly, providing a secure, reliable, and visually
pleasing experience.

3.2 Used Technologies

The technologies used in the project are ReactJS framework, Figma, html & css and javascript for front-
end development.

3.2.1: React Js

ReactJS is a popular JavaScript library used for building user interfaces. It was developed by Facebook and
released in 2013. React allows developers to create reusable UI components and build complex UIs efficiently.

Here are some key features and concepts of ReactJS:

Component-Based Architecture: React follows a component-based architecture, where UIs are

divided into independent and reusable components. Each component represents a part of the UI, and
they can be composed together to create complex applications.
Virtual DOM: React uses a virtual DOM (Document Object Model) to efficiently update and render
components. The virtual DOM is a lightweight representation of the actual DOM and allows React to
perform efficient updates by minimizing direct manipulations to the real DOM.
JSX: React uses JSX (JavaScript XML) syntax, which is an extension to JavaScript that allows you to
write HTML-like code within JavaScript. JSX makes it easier to define the structure and logic of
components in a declarative manner.
Unidirectional Data Flow: React follows a unidirectional data flow, also known as one-way binding.
Data flows from parent components to child components, and any changes in the data trigger updates
down the component hierarchy. This helps maintain predictable and efficient rendering of components.
Reconciliation: React employs a reconciliation algorithm to efficiently update the UI. When the state
or props of a component change, React compares the new and previous versions of the component's
virtual DOM and updates only the necessary parts, minimizing unnecessary re-rendering.
React Hooks: Introduced in React 16.8, hooks are functions that allow developers to use state and
other React features in functional components. Hooks provide a more concise and reusable way to
manage state and side effects in React applications.
React Router: React Router is a popular library that provides routing capabilities for single-page
applications built with React. It allows you to define different routes and their corresponding
components, enabling navigation and rendering of specific components based on the current URL.

14
3.2.2: Figma

Figma is a powerful, web-based design tool that allows teams to collaborate in real-time on user interface (UI)
and user experience (UX) design projects. It is widely used for designing web applications, mobile apps, and
other digital interfaces. Below are some key features of Figma:

Here are some key aspects of Figma:

Real-time collaboration: Figma allows multiple team members to work on the same design file
simultaneously, making it ideal for collaborative work environments. Changes are visible to all team
members in real-time, allowing for instant feedback and faster iterations.

Components and Design Systems: Figma allows designers to create reusable components (like buttons,
input fields, etc.), which can be updated globally. If a component is changed, all instances of it across the
design file are automatically updated, making design systems more efficient to manage.

Prototyping: Figma has a built-in prototyping feature that enables designers to create interactive
prototypes. Designers can link frames, set interactions, transitions, and animations, providing a real-time,
interactive representation of how the application will work. This is useful for demonstrating app flow
without writing code.

Design Hand-off: Figma allows designers to hand off their designs to developers seamlessly. Developers
can inspect designs, view dimensions, styles, colors, and download assets directly from the design file.
This eliminates the need for separate documentation or files.

Plugins and Integrations: Figma supports a wide range of third-party plugins that can enhance the design
workflow, such as accessibility tools, data integrations, icons, illustrations, and more. It also integrates
with tools like Slack, JIRA, and Zeplin for better project management.

Responsive Design: Figma allows designers to create responsive designs for multiple screen sizes. With
features like Auto Layout, designers can set up constraints and grid systems to ensure their designs adapt
well to different devices.

Ease of Use and Learning: Figma is known for its user-friendly interface and ease of use. It allows both
beginners and experienced designers to quickly get started with designing high-quality UI/UX without a
steep learning curve.

In summary, Figma is an all-in-one design tool that streamlines collaboration, design, prototyping, and
development workflows, making it a popular choice among UI/UX designers and teams in fast-paced
environments.

15
3.2.3 : HTML

HTML is the standard markup language used to create the structure and content of web pages. Here are the
key features of HTML:

Structure of web pages: HTML provides the foundation for web pages by defining the structure and
layout of content such as headings, paragraphs, images, and links.

Hyperlinks: HTML allows the creation of hyperlinks using the <a> tag, enabling navigation between
pages or websites, facilitating the interconnected nature of the web.

Forms and User inputs: HTML supports the creation of forms with various input types like text fields,
checkboxes, and buttons, which are used for gathering user data.

Multimedia Support: HTML enables the embedding of multimedia elements such as images, audio, and
video on web pages using the <img>, <audio>, and <video> tags.

Accessibility: HTML includes attributes and elements that support accessibility, such as alternative text
for images (alt attribute) and the use of ARIA (Accessible Rich Internet Applications) roles to assist users
with disabilities.

Responsive Design: HTML integrates with CSS to create responsive web designs that adjust to different
screen sizes, ensuring the content is accessible and visually appealing across devices (desktops, tablets,
smartphones).

3.2.4: CSS

CSS is used for styling and formatting the layout of web pages. It controls how HTML elements are displayed
on the screen, including colors, fonts, spacing, positioning, and responsiveness. Here are the key features of
CSS:

Separation of content and Design: CSS allows for the separation of content (HTML) from design (style).
This makes the web development process more efficient and modular, as styles can be applied to multiple
pages using a single CSS file.

Selectors and properties: CSS uses selectors to target HTML elements (like tags, classes, or IDs) and
applies specific styles to them. Properties such as color, font-size, margin, padding, and background define
the visual appearance of elements

16
Layout control: CSS offers powerful layout features like flexbox and grid that help developers create
complex layouts without relying on tables or positioning elements manually. These methods provide more
flexible and responsive design options.

Positioning: CSS allows precise control over element positioning using properties like position, top, left,
right, bottom, and z-index. It helps in placing elements in specific locations within the document, either
statically or dynamically.

Animations and Transitions: CSS supports animations and transitions, enabling smooth and visually
engaging effects for elements such as buttons, menus, and images.

Color and Background styling: CSS allows setting background colors, gradients, images, and patterns.
It also offers color manipulation through RGBA (Red, Green, Blue, Alpha) and HSL (Hue, Saturation,
Lightness) color models, providing flexibility in design allows developers to share code between the client
and server, enhancing productivity and code reuse.

HTML is essential for defining the structure and content of a web page, while CSS is responsible for styling
that content and ensuring it is visually appealing across different devices. Both HTML and CSS are
fundamental to web development, as they work together to create rich, interactive, and well-designed user
experiences on the web.

17
 CHAPTER – 4
IMPLEMENTATION STEPS

4.1: Designing the UI/UX in Figma:

Once the project requirements were clear, I moved on to designing the user interface and experience using
Figma. I started by creating wireframes to visualize the layout and navigation flow, keeping the user journey
in mind. This included designing various screens such as the home page, loan application form, OTP
verification page, and success/error messages. Figma was used to create high-fidelity mockups that depicted
how the final product would look. I made sure to keep the design simple, clean, and mobile-responsive,
ensuring that the app would be user-friendly and accessible on all devices.

Figure 2: Figma Design

4.2: Set Up the Development Environment:

I set up a development environment using Node.js and npm for managing dependencies and React.js for
building the frontend. I initialized the project with create-react-app and set up version control with Git and
GitHub.

4.3: Implement Layout and Components:

Based on the Figma designs, I began developing reusable React components for the layout, including buttons,
headers, and input fields. I styled these components using CSS to match the design, ensuring responsiveness.

18
4.4: Develop the Loan Application Form:

I created the loan application form with dynamic inputs like loan amount sliders and a loan tenure
dropdown. React state management was used to capture user inputs, and form validation was added to ensure
required fields were filled.

Figure 3: App components

4.5 : Implement OTP Verification Flow:

I designed and implemented the OTP verification flow, where users could input the OTP sent to their
email. I managed OTP input through React state and added basic error handling for invalid OTPs.

Figure 4: OTP generation

19
4.6: Dynamic Data Binding and API Integration:

I integrated dynamic data binding by connecting the frontend to the backend through APIs using
Axios. This allowed the app to send and receive user data, providing real-time feedback such as success or
error messages.

4.7: Set Up Routing and Navigation:

Using React Router, I set up routing for smooth navigation between pages like the loan form
and OTP verification. This allowed users to navigate through the app without reloading the page.

4.8: Form Validation and Error Handling:

I added validation for the loan application form and error handling for API responses. If users
made errors, I displayed helpful error messages, ensuring a user-friendly experience.

4.9: Testing:

I thoroughly tested the app on different devices to ensure responsiveness and functionality. I also
tested the form, OTP flow, and API interactions to ensure everything worked as expected.

4.10: Deployment:

Once the app was tested, I built it for production using npm run build and deployed it to. I made
sure the app was fully functional in the live environment and accessible through a custom domain.

20
 CHAPTER – 5
RESULTS AND OBSERVATIONS

5.1 Results

Figure 5: Landing Page

Landing page offers a welcoming introduction, clearly showcasing your core services, products, or
unique value to engage and guide visitors efficiently.

Figure 6: Login Page

21
 Figure 7: Registration Page

Registration page provides a simple, secure form for users to create an account, complete with OTP
verification for added security.

Figure 8: OTP validation

22
Figure 9: Steps for Applying for a Loan

Figure 10: Validation check

23
Any incorrect PAN or Aadhaar number inputs trigger immediate validation feedback, highlighting the field in
error and displaying a clear error message to guide the user. This ensures users are notified of inaccuracies
early, reducing submission errors and improving the overall data accuracy in the system.

Figure 11:Loan amount selection

Users can select their desired loan amount, tenure, and interest rate, with intuitive controls to tailor these
parameters to their needs. The system provides real-time feedback on the monthly installment amount based
on the selected tenure and interest, helping users understand their repayment obligations and make informed
financial decisions. This dynamic feature simplifies the process, ensuring a seamless and user-friendly
experience in evaluating loan options.

24
 Figure 12: Loan details

 The app dynamically displays the loan amount based on user selections for loan, tenure, and interest
rate.
 Users see a breakdown of their monthly installment, providing a clear view of repayment amounts.
 The display allows users to easily understand the financial commitment associated with their chosen
loan terms.
 Real-time updates on the loan summary enable users to make well-informed financial decisions based
on their preferences.

Figure 13: Application submission

After submitting the application, users receive a unique application ID for tracking and reference purposes.

25
CERTIFICATE

26
 CHAPTER – 6
CONCLUSION AND FUTURE STUDY

6.1 Conclusion:

In conclusion, the development of this web application as a frontend project successfully combined design and
functionality to deliver a seamless user experience. Utilizing Figma for prototyping ensured that the user
interface was intuitive, visually appealing, and met project requirements for an efficient workflow. React was
instrumental in creating a dynamic, responsive layout that allows users to engage effortlessly with the
application’s features. By focusing on performance and ease of navigation, this project achieves its goal of
providing a user-friendly platform that encourages meaningful interaction. The project stands as a testament
to the potential of thoughtful design and frontend development in creating impactful digital solutions.

6.1 Future Study

1. User Behavior Analytics: Implementing analytics would provide insights into user interactions to
guide app improvements and feature prioritization.

2. Mobile Platform Adaptation: Adapting the app for mobile platforms through responsive design or
React Native would increase accessibility across devices.

3. User Experience Optimization: Conducting user experience (UX) studies to refine the platform's
design and functionality, ensuring that it remains user-friendly and intuitive for all demographics.

4. AI-Driven Features: Integrating AI features like personalized recommendations would create a more
engaging and adaptive user experience.

5. Multi-language Support: Adding multi-language support would make the app accessible to a broader,
global audience, enhancing its reach and usability.

In the future, expanding the app’s features, integrating advanced AI, and improving accessibility would
significantly enhance user experience and make the app more versatile and globally appealing.

27
 REFERENCES

1. https://react.dev/

2. https://moneyview.in/

3. https://www.bajajfinserv.in/insta-personal-loan

4. https://www.figma.com/community/file/1346870920621806464/payment-finance-app-design

5. https://www.figma.com/community/file/1426158576708709944/clear-credit-loan-calculator-credit-

provider-web-landing-page

6. https://www.figma.com/community/file/1299649606466060904/property-investment-

landing-page-figma

7. https://github.com/techagentng/loan_web

8. https://github.com/Shanmukh025/MPBSystem

28