A Project Report on

BIT COIN TRADING APPLICATION

Submitted for fulfillment of the requirement of the Main Project (4MCA1) for

MASTER OF COMPUTER APPLICATIONS

Submitted by

Rakesh S (P18IW22S126017)

Name of Guide
Dr. Benita Jaison

ST. FRANCIS COLLEGE

MCA DEPARTMENT
Affiliated To Bengaluru City University
3rd Block, 8th Main, Koramangala
Bangalore-560034
 Bit Coin Trading Application

ST. FRANCIS COLLEGE

CERTIFICATE

This is to certify that the report entitled “Bit Coin Trading Application” embodies the original
work by Rakesh S (P18IW22S126017) for the fulfilment of the requirements of Main Project
(4MCA1) for MCA, IVth Semester course during the academic semester from August 2024
to December 2024 as prescribed by Bengaluru City University.

Project Guide Head of the Department

Dr. Benita Jaison Dr. Nazura Javed Kutty

Place:
Date:

St. Francis College i

 Bit Coin Trading Application

ST. FRANCIS COLLEGE

CERTIFICATE

This is to certify that the report entitled “Bit Coin Trading Application” embodies the original
work by Rakesh S (P18IW22S126017) for the fulfilment of the requirements of Main Project
(4MCA1) for MCA, IVth Semester course during the academic semester from August 2024 to
December 2024 as prescribed by Bengaluru City University.

External Examiner

1.______________________________

2.______________________________

Place:

Date:

St. Francis College ii

 Bit Coin Trading Application

Acknowledgement

It is a great pleasure to express my sincere gratitude to those who have contributed to my

learning, through their support, encouragement and guidance. I sincerely thank the Director,
Rev. Bro. Peter and Deputy Director Bro. Dr. Titus Anto of St. Francis College for
providing me with the necessary facilities for the completion of the project. With great pleasure
I place on record my deep gratitude to the Principal, Dr. Subba Rao for providing all the
facilities for the completion of the project. We endure our humble and sincere gratitude to
Dr. Nazura Javed, (HOD) for her great encouragement and valuable support. I am grateful
for the co-operation and valuable suggestions rendered by my guide Dr.Benita Jaison,
Assistant Professor for her sincere assistance, valuable guidance and careful reviews, without
which my effort would have been in vain. Thanks for the inspiration given to me in my task
by her kind appreciation and suggestion through my project. I also express my gratitude to all
the faculty members of the Department of MCA.

I thank all the staff members of the Department of Master of Computer Applications, for
extending their constant support to complete the project. I express my heartfelt thanks to my
parents and friends who were a constant source of support and inspiration throughout the
project.

St. Francis College iii

 Bit Coin Trading Application

Table of Contents

1. ABSTRACT ...................................................................................................................... 1

2. INTRODUCTION............................................................................................................ 2

2.1 OBJECTIVES .................................................................................................................. 3

2.2 ADVANTAGES OF PROPOSED SYSTEM ................................................................. 5

3. SYSTEM REQUIRED SPECIFICATION .................................................................... 7

3.1 DFD ................................................................................................................................... 9

3.2 SOFTWARE / HARDWARE CONFIGURATION ................................................... 14

3.3 GANTT CHART ............................................................................................................ 15

4. SYSTEM DESIGN DOCUMENT ................................................................................ 16

4.1 CLASS DIAGRAM........................................................................................................ 18

4.2 SEQUENCE DIAGRAM............................................................................................... 19

4.3 USE CASE DIAGRAM ................................................................................................. 20

4.4 DATABASE DESIGN ................................................................................................... 21

TABLES AND RELATIONSHIPS ...................................................................................... 21

4.5 MODULE DESIGN ....................................................................................................... 25

5. CODING / TESTING .................................................................................................... 31

5.1 MODULE DESCRIPTION WITH BRIEF ALGO .................................................... 56

5.3 SYSTEM TESTING ...................................................................................................... 66

6. CONCLUSION .............................................................................................................. 68

7. FUTURE ENHANCEMENT ........................................................................................ 69

8. REFERENCES............................................................................................................... 70

St. Francis College iv

 Bit Coin Trading Application

1. Abstract

The project aims to develop a compressive crypto trading platform utilizing a java full-stack
approach. The platform will integrate various advanced features, including an AI chat boot for
handling crypto-related queries, a seamless buy and sell interface for multiple crypto
currencies, and robust portfolio management tools. Additionally, the project will enhance
wallet functionality with secure wallet-to-wallet transfer, withdrawals to bank accounts, and
balanced top-ups. The platform will also provide detailed transaction history and powerful
search capabilities for crypto currencies. Ensuring top-notch security, the platform will
incorporate robust authentication mechanisms, including two-factor authentication. The
platform will leverage modern technologies such as Spring Boot, React, MySQL, and various
APIs to deliver a high-performance, secure and scalable solution.

Advanced wallet functionality will enable secure wallet-to-wallet transfers, withdrawals to

bank accounts, and easy balance top-ups. Detailed transaction history, including withdrawal
and wallet logs, will be accessible to users for transparency and tracking purposes. The
platform will also include a powerful search feature, allowing users to find essential
information about any crypto-currency to make informed trading decisions.

Security is paramount in the design of this platform. It will incorporate strong authentication
mechanisms, including two-factor authentication and secure login and registration processes,
to protect user accounts. The technology stack for this platform includes Spring Boot for the
backend, MySQL for the database, and React with Tailwind CSS for the frontend, ensuring a
high-performance, secure, and scalable solution.

The integration of payment gateways such as Razor pay and Stripe will facilitate smooth
financial transactions, making it easier for users to manage their funds. By combining these
features, the platform aims to provide a comprehensive solution that addresses the needs of
modern crypto traders and investors, enhancing their ability to trade efficiently and securely in
the evolving crypto-currency market.

St. Francis College 1

 Bit Coin Trading Application

2. Introduction

This project is a robust cryptocurrency platform designed to offer users an efficient and
seamless experience for managing and trading digital assets. The platform incorporates an AI
chatbot, utilizing the Gemini and CoinGecko APIs to provide real-time responses to
cryptocurrency-related queries such as market values and trends, helping users make informed
decisions. Additionally, it features an intuitive buy and sell interface that supports a wide range
of cryptocurrencies, enabling smooth transactions.

A major focus of the platform is portfolio management, allowing users to monitor their
investments, track performance, and make data-driven decisions about their holdings. The
wallet functionality is designed to be comprehensive, offering secure wallet-to-wallet transfers,
the ability to add funds, and options for withdrawing to bank accounts.

The platform also provides a detailed transaction history, allowing users to view and track both
withdrawal and wallet activities. A powerful search feature helps users find essential
information on any cryptocurrency, streamlining the trading process. Security is paramount,
with features such as secure login and registration, two-factor authentication (2FA), and an
easy-to-use password recovery process, ensuring that user accounts are well protected.

Built using cutting-edge technology, the backend is powered by Spring Boot, with MySQL DB
for data storage, Spring Security for robust protection, and Java Mail Sender for
communication services. On the frontend, React, Tailwind CSS, Redux, Axios, React-Router-
Dom, and Shadcn UI work together to create a responsive, dynamic, and user-friendly
interface. The integration of payment gateways like Razorpay and Stripe ensures that all
transactions are secure and reliable. Overall, this platform combines performance, security, and
functionality, offering a complete solution for cryptocurrency traders and investors.

St. Francis College 2

 Bit Coin Trading Application

2.1 Objectives

1. Provide Seamless Cryptocurrency Transactions:

• Develop a user-friendly interface for buying, selling, and transferring

cryptocurrencies with support for multiple currencies.
• Integrate secure payment gateways like Razorpay and Stripe to facilitate smooth
financial transactions.

2. Offer Real-Time Market Insights:

• Utilize Gemini and CoinGecko APIs to deliver real-time cryptocurrency price

updates and market trends.
• Enable users to search for and retrieve essential data about various cryptocurrencies
to make informed trading decisions.

3. Ensure Secure and Reliable Wallet Functionality:

• Implement advanced wallet features such as wallet-to-wallet transfers, withdrawals

to bank accounts, and adding balances securely.
• Provide detailed transaction history to allow users to track their financial activity
with transparency.

4. Enhance User Experience with AI-Powered Assistance:

• Integrate an AI chat bot capable of handling crypto-related queries and providing

real-time information on market data.
• Improve customer support and user engagement by offering quick, accurate
responses.

St. Francis College 3

 Bit Coin Trading Application

5. Strengthen Platform Security and Authentication:

• Implement robust security measures like two-factor authentication and secure login
processes to protect user accounts.
• Ensure safe user data handling and secure transactions using Spring Security and
encrypted communications.

6. Enable Portfolio Management:

• Provide tools for users to monitor their crypto portfolios, track performance, and
make informed investment decisions.
• Allow users to view their portfolio's value over time and receive notifications about
significant changes in value.

7. Deliver a Scalable, High-Performance Platform:

• Use Spring Boot and MySQL DB to build a scalable backend capable of handling
a growing number of users and transactions.
• Develop a responsive and visually appealing frontend using React, Tailwind CSS,
and Redux for optimal user interaction.

8. Facilitate Continuous User Engagement and Growth:

• Encourage active participation by offering easy wallet top-ups, transaction history

visibility, and simple password recovery options.
• Create a system that evolves with the crypto market, adapting to new trends, user
needs, and technological advancements.

These objectives aim to create a secure, user-friendly, and efficient platform that enhances user
experience while fostering continuous growth in the cryptocurrency space.

St. Francis College 4

 Bit Coin Trading Application

2.2 Advantages of proposed system

1. AI Chat Bot Integration:

• Real-time Crypto Data: Using Gemini and CoinGecko APIs ensures users have
up-to-date market information for informed trading decisions.
• Enhanced User Engagement: Provides instant responses to queries, improving
user experience and reducing reliance on customer support.

2. Buy & Sell Crypto Interface:

• Wide Cryptocurrency Support: Facilitates trading across multiple

cryptocurrencies, increasing platform versatility.
• User-Friendly Interface: Simplifies transactions, making it accessible for both
novice and experienced traders.

3. Portfolio Management:

• Investment Monitoring: Users can track portfolio performance, helping them

make strategic adjustments in real-time.
• Better Decision Making: With a clear overview of investments, users can
optimize their strategies.

4. Advanced Wallet Functionality:

• Secure Transfers: Ensures funds can be safely transferred between wallets,

providing flexibility and convenience.
• Direct Withdrawals: Easy withdrawal of funds to bank accounts enhances user
trust and platform credibility.
• Top-Up Features: Allows users to add funds easily, promoting continuous
engagement and quick response to market changes.

St. Francis College 5

 Bit Coin Trading Application

5. Transaction History:

• Detailed Logs: Users can access past transaction data, which is critical for personal
audits and tax reporting.
• Transparency: Improves trust by offering a clear record of all financial activity.

6. Robust Authentication and Security:

• Two-Factor Authentication: Adds a strong layer of protection, reducing the risk

of unauthorized access.
• Password Recovery: Simplifies account recovery, making it easier for users to
regain access without compromising security.

7. Cutting-Edge Technology Stack:

• Scalability: Spring Boot, MySQL, and React ensure the system can handle
increasing traffic and data loads efficiently.
• Security: Spring Security and Java Mail Sender provide enhanced user data
protection and secure communications.
• Modern Frontend: Technologies like Tailwind CSS and Redux ensure responsive,
efficient, and visually appealing interfaces, enhancing the overall user experience.

8. Payment Gateways:

• Multiple Payment Options: Razorpay and Stripe provide flexibility in payments,

catering to diverse user preferences and increasing the likelihood of transactions.

Overall, the platform is designed for high performance, security, user engagement, and
scalability, offering a competitive edge in the cryptocurrency market.

St. Francis College 6

 Bit Coin Trading Application

3. System Required specification

The Java Full Stack with a front-end using React.js and a backend built with Spring Boot
and MySQL is a powerful web development stack. Each component in this stack has its own
system requirements. Here are the typical system requirements for each part of this stack:

MySQL Client-Server:

• MySQL DB is a relational database management system. The system requirements will

depend on the size and complexity of your database and workload.

• Operating Systems: MySQL can run on Windows, macOS, Linux, and other Unix-
based systems.

Spring Boot:

• Spring Boot is a Java-based framework for building microservices.

• Operating Systems: Works across Windows, Linux, and macOS platforms.

• For optimal performance, ensure adequate CPU and memory for high-traffic
applications.

Spring Security:

• Spring Security provides security features for Java applications.As it’s part of the
Spring framework, the requirements are similar to Spring Boot.

• Java Version: JDK 8 or higher.

• No additional system requirements beyond the web application server (Tomcat, Jetty,
etc.).

Java Mail Sender:

• Java Mail Sender is used for sending emails in Spring applications.

• System requirements are tied to the Java runtime environment and Spring Boot, as it is
an embedded feature.

• Java Version: JDK 8 or higher.

St. Francis College 7

 Bit Coin Trading Application

• Network: Requires an email server (SMTP) for sending emails; you need a stable
internet connection to communicate with the mail server.

React:

• React is a JavaScript library for building user interfaces.

• The system requirements depend on the browsers and devices you intend to support.

• Browsers Supported: Chrome, Firefox, Edge, Safari.

• Node.js Required: React apps are typically built using Node.js, which requires:

Tailwind CSS:

• Tailwind CSS is a utility-first CSS framework.

• It’s processed via Node.js in development mode, so system requirements are similar to
React/Node.js environments.

• Node.js Required: Same as React (Node.js 14.x or higher).

• Memory and Disk Space: Minimal; additional space may be required for Tailwind’s
build tools.

Shadcn UI:

• Shadcn UI is a component library for building UIs.

• System requirements align with the React setup since it is tightly integrated.

St. Francis College 8

 Bit Coin Trading Application

3.1 DFD

A data flow diagram (DFD) maps out the flow of information for any process or system. It
uses defined symbols like rectangles, circles and arrows, plus short text labels, to show data
inputs, outputs, storage points and the routes between each destination. Data flowcharts can
range from simple, even hand-drawn process overviews, to in-depth, multi-level DFDs that dig
progressively deeper into how the data is handled. They can be used to analyze an existing
system or model a new one. Like all the best diagrams and charts, a DFD can often visually
say things that would be hard to explain in words, and they work for both technical and
nontechnical audiences, from developer to CEO. That’s why DFDs remain so popular after all
these years. While they work well for data flow software and systems, they are less applicable
nowadays to visualizing interactive, real-time or database-oriented software or systems.

Symbols and Notations Used in DFDs

• Yourdon and Coad
• Yourdon and DeMarco
• Gane and Sarson

One main difference in their symbols is that Yourdon-Coad and Yourdon-DeMarco use circles
for processes, while Gane and Sarson use rectangles with rounded corners, sometimes called
lozenges. There are other symbol variations in use as well, so the important thing to keep in
mind is to be clear and consistent in the shapes and notations you use to communicate and
collaborate with others.

Using any convention’s DFD rules or guidelines, the symbols depict the four components of
data flow diagrams.

1. External entity: an outside system that sends or receives data, communicating with
the system being diagrammed. They are the sources and destinations of information entering
or leaving the system. They might be an outside organization or person, a computer system
or a business system. They are also known as terminators, sources and sinks or actors. They
are typically drawn on the edges of the diagram.

St. Francis College 9

 Bit Coin Trading Application

2. Process: any process that changes the data, producing an output. It might perform
computations, or sort data based on logic, or direct the data flow based on business
rules. A short label is used to describe the process, such as “Submit payment.”
3. Data store: files or repositories that hold information for later use, such as a database
table or a membership form. Each data store receives a simple label, such as
“Orders.”
4. Data flow: the route that data takes between the external entities, processes and data
stores. It portrays the interface between the other components and is shown with
arrows, typically labelled with a short data name, like “Billing details.”

Rules For Constructing A DFD

• Process should be named and numbered for an easy reference. Each name should be
representative of the process.
• The direction of flow is from top to bottom and from left to right. Data traditionally flow from
source to the destination although they may flow back to the source. One way to indicate this is
to draw long flow line back to a source. An alternative way is to repeat the source symbol as a
destination. Since it is used more than once in the DFD, it is marked with a short diagonal.

When a process is exploded into lower level details, they are numbered.

St. Francis College 10

 Bit Coin Trading Application

DFD Level 1

DFD Level 2

St. Francis College 11

 Bit Coin Trading Application

3.2 ER diagram

ER Diagram stands for Entity Relationship Diagram, also known as ERD is a diagram that
displays the relationship of entity sets stored in a database. In other words, ER diagrams help
to explain the logical structure of databases. ER diagrams are created based on three basic
concepts: entities, attributes and relationships.

ER Diagrams contain different symbols that use rectangles to represent entities, ovals to define
attributes and diamond shapes to represent relationships.

Following are the main components and its symbols in ER Diagrams:

• Rectangles: This Entity Relationship Diagram symbol represents entity types

• Ellipses: Symbol represent attributes
• Diamonds: This symbol represents relationship types
• Lines: It links attributes to entity types and entity types with other relationship types
• Primary key: attributes are underlined
• Double Ellipses: Represent multi-valued attributes

St. Francis College 12

 Bit Coin Trading Application

St. Francis College 13

 Bit Coin Trading Application

3.2 Software / Hardware configuration

Hardware Requirements:

The hardware requirements used to develop this project are:

• Computer Processor: Core i5 Processor

• Speed: 1.80 GHz Processor
• Hard Disk: 400 GB or more
• RAM: 8GB

Software Requirements:

The hardware requirements used to develop this project are:

• Operating System: Windows 10

• Front end: Visual Studio Code, React.
• Back end: MySQL Client Sever and Node.js JavaScript runtime for server-side
development.
• Express.js: Web application framework for Node.js.
• Database: MySQL Programming
• Mail Server: Java Mail Server with Spring Security.
• Language: JavaScript
• Documentation: Microsoft Office 2019

St. Francis College 14

 Bit Coin Trading Application

3.3 Gantt chart

Gantt Chart for Bit Flow Trading Application

St. Francis College 15

 Bit Coin Trading Application

4. System Design Document

The design phase is the life cycle phase in which the detailed design of the selected system in
the study phase is accomplished. In the design phase, the technical specifications are prepared
for the performance of all allocated tasks. It also includes the construction of programs and
program testing. In the design phase, the first step is to determine the output is to be produced
and in what format. Second, input data and master files have to be designed to meet the
requirements of proposed output. The system analyst has to define the methods of capturing
and input programs and format of the output and its use by the users.

System design is the process of designing the elements of a system such as the architecture,
modules and components, the different interfaces of those components and the data that goes
through that system. The purpose of the System Design process is to provide sufficient detailed
data and information about the system and its system elements to enable the implementation
consistent with architectural entities as defined in models and views of the system architecture.
The design is a solution, the translation of requirements into centre ways of meeting. The design
is actually the process of organizing and developing a database model that accurately reflects
the organization functioning in the real world and implementing that model by creating a
database requires an appropriate methodology. System can be divided into two phases:

1. Logical Design.
2. Physical Design.

• Architecture:
This is the conceptual model that defines the structure, behaviour and more views of a system.
We can use flowcharts to represent and illustrate the architecture.

• Modules:
This are components that handle one specific tasks in a system. A combination of the modules
make up the system.

• Components :

St. Francis College 16

 Bit Coin Trading Application

This provides a particular function or group of related functions. They are made up of modules.

• Interfaces:
This is the shared boundary across which the components of the system exchange information
and relate.

• Data :
This the management of the information and data flow.

St. Francis College 17

 Bit Coin Trading Application

4.1 Class diagram

The class diagram centers around the User class, which manages user data and links to Wallet,
Portfolio, and TransactionHistory. The Wallet class tracks balances and enables functions
like addBalance(), withdrawToBank(), walletToWalletTransfer(). TransactionHistory
records all wallet transactions, connecting with BankAccount for tracking withdrawals.
Portfolio manages the user’s cryptocurrency assets, allowing for addAsset(), removeAsset(),
and calculateTotalValue() methods, with each asset represented by the CryptoAsset class.
MarketDataAPI fetches real-time prices from Gemini and CoinGecko. The Authentication
class secures the platform through login, registration, and two-factor authentication, while
Trade handles buy/sell operations and updates Portfolio holdings. Finally, Notification alerts
users to events like trades and logins, adding security and engagement features.

St. Francis College 18

 Bit Coin Trading Application

4.2 Sequence diagram

In the sequence diagram, the User initiates interactions by logging into the platform, where the
Authentication class verifies credentials and implements two-factor authentication if needed.
Upon successful login, the user can perform wallet operations via the Wallet class, such as
adding funds or transferring between wallets, which updates TransactionHistory. For crypto
trading, the User requests a buy or sell action, triggering the Trade class to execute the
transaction, update the Portfolio, and record the transaction in TransactionHistory. The
Portfolio class, in turn, fetches current asset prices from MarketDataAPI using external
sources like Gemini and CoinGecko to keep data up-to-date. After each transaction,
Notification sends an alert confirming the completed action. If the user withdraws funds to a
bank, the BankAccount class processes the transfer and updates TransactionHistory
accordingly.

St. Francis College 19

 Bit Coin Trading Application

4.3 Use case diagram

In the use case for this cryptocurrency platform, a User starts by registering or logging in,
where Authentication verifies credentials and enables two-factor authentication for security.
Once logged in, the User can view and manage their Wallet to add funds, transfer between
wallets, or withdraw to a BankAccount. For trading, the User accesses the Trade interface to
buy or sell cryptocurrencies, which updates the Portfolio and logs the action in
TransactionHistory. Portfolio enables the user to monitor and track investments, with real-
time prices fetched from MarketDataAPI via Gemini and CoinGecko APIs. Users can search
for any cryptocurrency, obtaining essential trading information. After every trade, withdrawal,
or login event, the Notification system sends alerts, ensuring the user stays informed.

St. Francis College 20

 Bit Coin Trading Application

4.4 Database design

The database design for this cryptocurrency platform centers around key entities like User,
Wallet, TransactionHistory, Portfolio, CryptoAsset, and BankAccount, with relationships
mapped to support data flow and operations. The User table holds essential user information
and authentication data, linking to the Wallet table for storing balances and transaction
histories. TransactionHistory records every transaction, connecting to BankAccount for
withdrawal details. The Portfolio table organizes crypto assets, tracking each asset’s quantity
and current value through the CryptoAsset table, which is regularly updated with real-time
prices from MarketDataAPI. Each table and relationship are designed for efficiency, enabling
secure and responsive data management across the platform.

Tables and Relationships

➢ Users Table
• id (Primary Key)
• fullName
• email
• mobile
• password
• status
• isVerified
• twoFactorAuth_enabled
• twoFactorAuth_sendTo
• picture
• role

➢ Coins Table
• id (Primary Key)
• symbol
• name
• image
• current_price
• market_cap
• market_cap_rank
• fully_diluted_valuation
• total_volume
• high_24h
• low_24h
• price_change_24h
• price_change_percentage_24h

St. Francis College 21

 Bit Coin Trading Application

• market_cap_change_24h
• market_cap_change_percentage_24h
• circulating_supply
• total_supply
• max_supply
• ath
• ath_change_percentage
• ath_date
• atl
• atl_change_percentage
• atl_date
• roi
• last_updated

➢ Assets Table
• id (Primary Key)
• quantity
• buy_price
• coin_id (Foreign Key referencing Coins)
• user_id (Foreign Key referencing Users)

➢ Withdrawals Table
• id (Primary Key)
• status
• amount
• user_id (Foreign Key referencing Users)
• date

➢ Watchlists Table
• id (Primary Key)
• user_id (Foreign Key referencing Users)

➢ Watchlist_Coins Table (Join Table for many-to-many relationship)

• watchlist_id (Foreign Key referencing Watchlists)
• coin_id (Foreign Key referencing Coins)

➢ WalletTransactions Table
• id (Primary Key)
• wallet_id (Foreign Key referencing Wallets)
• type
• date
• transfer_id
• purpose
• amount

St. Francis College 22

 Bit Coin Trading Application

➢ Wallets Table
• id (Primary Key)
• user_id (Foreign Key referencing Users)
• balance

➢ VerificationCodes Table
• id (Primary Key)
• otp
• user_id (Foreign Key referencing Users)
• email
• mobile
• verification_type

➢ TradingHistories Table
• id (Primary Key)
• selling_price
• buying_price
• coin_id (Foreign Key referencing Coins)
• user_id (Foreign Key referencing Users)

➢ PaymentOrders Table
• id (Primary Key)
• amount
• status
• payment_method
• user_id (Foreign Key referencing Users)

➢ PaymentDetails Table
• id (Primary Key)
• account_number
• account_holder_name
• ifsc
• bank_name
• user_id (Foreign Key referencing Users)

➢ Orders Table
• id (Primary Key)
• user_id (Foreign Key referencing Users)
• order_type
• price
• timestamp
• status
• order_item_id (Foreign Key referencing OrderItems)

St. Francis College 23

 Bit Coin Trading Application

➢ OrderItems Table
• id (Primary Key)
• quantity
• coin_id (Foreign Key referencing Coins)
• buy_price
• sell_price
• order_id (Foreign Key referencing Orders)

➢ Notifications Table
• id (Primary Key)
• from_user_id (Foreign Key referencing Users)
• to_user_id (Foreign Key referencing Users)
• amount
• message

➢ MarketChartData Table
• id (Primary Key)
• timestamp
• price

➢ ForgotPasswordTokens Table
• id (Primary Key)
• user_id (Foreign Key referencing Users)
• otp
• verification_type
• send_to

St. Francis College 24

 Bit Coin Trading Application

4.5 Module design

➢ User Registration Form

This form gathers essential user information, including full name, email address, and password,
while implementing validation checks to ensure data integrity and security. Users must verify
their email to activate their accounts, enhancing security and preventing unauthorized
registrations.

➢ User Login Page

The login page allows users to securely access their accounts by entering their registered email
and password. It features a "Forgot Password" link for account recovery and incorporates two-
factor authentication (2FA) to add an extra layer of security, ensuring that only authorized users
can access sensitive information.

St. Francis College 25

 Bit Coin Trading Application

➢ Home Page

Serving as the platform's main dashboard, the home page provides a comprehensive overview
of the user's account, showcasing current cryptocurrency market trends, portfolio performance
metrics, and quick links to essential functionalities such as trading and wallet management. It
also highlights alerts or notifications related to user activity.

➢ Portfolio Details

This section presents an in-depth view of the user's cryptocurrency holdings, including detailed
information about each asset such as current market value, quantity owned, and overall profit
or loss. Users can track their investments' performance over time and view historical data for
informed decision-making.

St. Francis College 26

 Bit Coin Trading Application

➢ Watch List

The watch list feature allows users to curate a selection of cryptocurrencies they wish to
monitor closely. It displays real-time price changes, percentage fluctuations, and market trends
for each asset, enabling users to make timely investment decisions based on market
movements.

➢ Trading History

This feature provides a comprehensive record of all completed transactions, detailing each
trade's date, type (buy or sell), quantity, price at execution, and overall profit or loss. Users can
analyze their trading patterns and strategies by reviewing historical performance.

St. Francis College 27

 Bit Coin Trading Application

➢ Buy or Sell

The trading interface allows users to execute cryptocurrency trades with ease. Users can select
the asset they wish to buy or sell, specify the quantity, and view the current market price. The
platform provides real-time updates and trade confirmations to ensure a smooth transaction
process.

➢ Wallet Details

This section offers a complete overview of the user's digital wallet, including current balances
for various cryptocurrencies, transaction history, and options to add funds or withdraw to a
linked bank account. It ensures users can manage their assets efficiently and securely.

St. Francis College 28

 Bit Coin Trading Application

Payment Details

➢ Users can manage their payment methods within this feature, including linking bank
accounts, credit cards, and other payment options. The section displays transaction
records related to deposits, withdrawals, and trading activities, providing users with a
clear financial overview.

➢ Profile Details

This area allows users to manage their personal information, such as contact details and
account settings. Users can update their profiles, change passwords, and configure security
settings to enhance account safety and personalization.

St. Francis College 29

 Bit Coin Trading Application

➢ Two Step Verification

To bolster security, this feature requires users to complete an additional verification step
during login or when performing sensitive actions, such as withdrawals or account changes.
Users can choose between various verification methods, such as SMS codes or
authentication apps.

➢ Ai Chat Bot

The AI chat bot serves as a virtual assistant, providing users with real-time support for
cryptocurrency-related inquiries, including current market prices, trading tips, and platform
navigation. It uses natural language processing to understand user questions and deliver
accurate, informative responses, enhancing the overall user experience.

St. Francis College 30

 Bit Coin Trading Application

5. Coding / Testing

Login Page:

import { Input } from "@/components/ui/input";

// import "./Login.css";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useDispatch, useSelector } from "react-redux";
import { login } from "@/Redux/Auth/Action";
import { useNavigate } from "react-router-dom";
import { Skeleton } from "@/components/ui/skeleton";
import SpinnerBackdrop from "@/components/custome/SpinnerBackdrop";
// import { toast } from "@/components/ui/use-toast";
import { ToastAction } from "@/components/ui/toast";
import { useToast } from "@/components/ui/use-toast";

const formSchema = z.object({

email: z.string().email("Invalid email address"),
password: z.string().min(8, "Password must be at least 8 characters long"),
});
const LoginForm = () => {
const navigate = useNavigate();
const dispatch = useDispatch();
const { auth } = useSelector((store) => store);
const { toast } = useToast();
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
},
});

St. Francis College 31

 Bit Coin Trading Application

const onSubmit = (data) => {

data.navigate = navigate;
dispatch(login(data));
console.log("login form", data);
};
return (
<div className="space-y-5">
<h1 className="text-center text-xl">Login</h1>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
className="border w-full border-gray-700 py-5 px-5"
placeholder="enter your email"
/>
</FormControl>

<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password" // Added password field
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
type="password" // Added type attribute for password input
className="border w-full border-gray-700 py-5 px-5"
placeholder="Enter your password"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>

St. Francis College 32

 Bit Coin Trading Application

{!auth.loading ? (
<Button type="submit" className="w-full py-5">
Login
</Button>
):(
<SpinnerBackdrop show={true} />
)}
</form>
</Form>
</div>
);
};

export default LoginForm;

Register Page:

import { Input } from "@/components/ui/input";

import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/components/ui/form";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { register } from "@/Redux/Auth/Action";
import SpinnerBackdrop from "@/components/custome/SpinnerBackdrop";

const formSchema = z.object({

fullName: z.string().nonempty("Full name is required"),
email: z.string().email("Invalid email address").optional(),
password: z
.string()
.min(8, "Password must be at least 8 characters long")
.optional(),

St. Francis College 33

 Bit Coin Trading Application

});
const SignupForm = () => {
const {auth}=useSelector(store=>store)

const navigate=useNavigate();
const dispatch=useDispatch()
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
email: "",
password: "",
fullName: "",
},
});
const onSubmit = (data) => {
data.navigate=navigate
dispatch(register(data))
console.log("signup form", data);
};
return (
<div className="space-y-5">
<h1 className="text-center text-xl">Create New Account</h1>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="fullName"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
type="text"
className="border w-full border-gray-700 py-5 px-5"
placeholder="Enter your full name"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"

St. Francis College 34

 Bit Coin Trading Application

render={({ field }) => (

<FormItem>
<FormControl>
<Input
{...field}
className="border w-full border-gray-700 py-5 px-5"
placeholder="enter your email"
/>
</FormControl>

<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormControl>
<Input
{...field}
type="password"
className="border w-full border-gray-700 py-5 px-5"
placeholder="Enter your password"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{!auth.loading? <Button type="submit" className="w-full py-5">
Register
</Button>:<SpinnerBackdrop show={true}/>}
</form>
</Form>
</div>
);
};

export default SignupForm;

St. Francis College 35

 Bit Coin Trading Application

Coin Search Page:

import
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { invoices } from "../Home/AssetTable";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUserAssets } from "@/Redux/Assets/Action";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { getAllOrdersForUser } from "@/Redux/Order/Action";
import { calculateProfite } from "@/Util/calculateProfite";
import { readableDate } from "@/Util/readableDate";
import { Input } from "@/components/ui/input";
import { SearchIcon } from "lucide-react";
import { searchCoin } from "@/Redux/Coin/Action";
import { useNavigate } from "react-router-dom";
import SpinnerBackdrop from "@/components/custome/SpinnerBackdrop";

const SearchCoin = () => {

const dispatch = useDispatch();
const { asset, order,coin } = useSelector((store) => store);
const [keyword, setKeyword] = useState("keyword");
const navigate=useNavigate()

const handleSearchCoin = () => {

dispatch(searchCoin(keyword));
};

St. Francis College 36

 Bit Coin Trading Application

if(coin.loading){
return <SpinnerBackdrop/>
}

return (
<div className="p-10 lg:p=[50%]">
<div className="flex items-center justify-center pb-16">
<Input
className="p-5 w-[90%] lg:w-[50%] rounded-r-none"
placeholder="explore market..."
onChange={(e) => setKeyword(e.target.value)}
/>
<Button onClick={handleSearchCoin} className="p-5 rounded-l-none">
<SearchIcon />
</Button>
</div>
<Table className="px-5 relative">
<TableHeader className="py-9">
<TableRow className="sticky top-0 left-0 right-0 bg-background ">
<TableHead className="py-3">Market Cap Rank</TableHead>
<TableHead>Treading Pair</TableHead>

<TableHead className="text-right">SYMBOL</TableHead>
</TableRow>
</TableHeader>

<TableBody className="">
{coin.searchCoinList?.map((item) => (
<TableRow onClick={()=>navigate(`/market/${item.id}`)} key={item.id}>
<TableCell>

<p className="">
{item.market_cap_rank}
</p>
</TableCell>
<TableCell className="font-medium flex items-center gap-2">
<Avatar className="-z-50">
<AvatarImage
src={item.large}
alt={""}
/>
</Avatar>
<span> {item.name}</span>
</TableCell>

St. Francis College 37

 Bit Coin Trading Application

<TableCell className="text-right">${item.symbol}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
};

export default SearchCoin;

Admin Withdrawl Page:

import {
getAllWithdrawalRequest,
getWithdrawalHistory,
proceedWithdrawal,
} from "@/Redux/Withdrawal/Action";
import { readableTimestamp } from "@/Util/readbaleTimestamp";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

St. Francis College 38

 Bit Coin Trading Application

const WithdrawalAdmin = () => {

const dispatch = useDispatch();

const { withdrawal } = useSelector((store) => store);

useEffect(() => {
dispatch(getAllWithdrawalRequest(localStorage.getItem("jwt")));
}, []);

const handleProccedWithdrawal = (id, accept) => {

dispatch(
proceedWithdrawal({ jwt: localStorage.getItem("jwt"), id, accept })
);
};

return (
<div className="px-20 ">
<h1 className="text-3xl font-bold py-10">All Withdrawal Requests</h1>
<div>

<Table>
<TableHeader>
<TableRow>

<TableHead className="py-5">Date</TableHead>
<TableHead className="py-5">User</TableHead>
<TableHead>Method</TableHead>
<TableHead>Amount</TableHead>
<TableHead className="text-right">Status</TableHead>
<TableHead className="text-right">Procced</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{withdrawal.requests.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium py-5">
{readableTimestamp(item?.date)}
</TableCell>
<TableCell>
<p className="font-bold">{item.user.fullName}</p>
<p className="text-gray-300">{item.user.email}</p>
</TableCell>
<TableCell>{"Bank Account"}</TableCell>
<TableCell className="text-green-500">{item.amount} USD</TableCell>

St. Francis College 39

 Bit Coin Trading Application

<TableCell className="text-right">
<Badge
className={`text-white ${
item.status == "PENDING"
? "bg-red-500 "
: "bg-green-500"
}
`}
>
{item.status}
</Badge>
</TableCell>
<TableCell className="text-right">
<DropdownMenu>
<DropdownMenuTrigger className=" outline-none ">
<Button variant="outline">PROCCED</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem className="">
<Button
onClick={() => handleProccedWithdrawal(item.id, true)}
className="w-full bg-green-500 text-white hover:text-black"
>
Acceppt
</Button>
</DropdownMenuItem>
<DropdownMenuItem>
<Button
onClick={() =>
handleProccedWithdrawal(item.id, false)
}
className="w-full bg-red-500 text-white hover:text-black"
>
Decline
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>

</TableCell>
</TableRow>
))}
</TableBody>
</Table>

St. Francis College 40

 Bit Coin Trading Application

</div>
</div>
);
};

export default WithdrawalAdmin;

Account Verification Page:

import { sendVerificationOtp, verifyOtp } from "@/Redux/Auth/Action";

import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import Auth from "../Auth/Auth";

const AccountVarificationForm = ({handleSubmit}) => {

const [value, setValue] = useState("");
const dispatch = useDispatch();
const {auth}=useSelector(store=>store)

const handleOnChange = (e) => {

console.log(e.target.value);
};

const handleSendOtp = (verificationType) => {

dispatch(
sendVerificationOtp({

St. Francis College 41

 Bit Coin Trading Application

verificationType,
jwt: localStorage.getItem("jwt"),
})
);
};

return (
<div className="flex justify-center">
<div className="space-y-5 mt-10 w-full">
<div className="flex justify-between items-center">
<p className="">Email :</p>
<p>{auth.user?.email}</p>
<Dialog>
<DialogTrigger>

<Button
onClick={() => handleSendOtp("EMAIL")}
>
Sent OTP
</Button>

</DialogTrigger>
<DialogContent className="">
<DialogHeader className="">
<DialogTitle className="px-10 pt-5 text-center">
Enter OTP
</DialogTitle>
</DialogHeader>
<div className="py-5 flex gap-10 justify-center items-center">
<InputOTP

value={value}
onChange={(value) => setValue(value)}
maxLength={6}
>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>

St. Francis College 42

 Bit Coin Trading Application

<InputOTPSlot index={3} />

<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
<DialogClose>
<Button onClick={()=>handleSubmit(value)} className="w-
[10rem]">Submit</Button>
</DialogClose>

</div>
</DialogContent>
</Dialog>
</div>
{/* <div className="flex justify-between items-center">
<p className="">Mobile :</p>
<p>+918987667899</p>

<Button onClick={() => handleSendOtp("MOBILE")}>Sent OTP</Button>

</div> */}
</div>
</div>
);
};

export default AccountVarificationForm;

Trading Page:

import { getAssetDetails } from "@/Redux/Assets/Action";

import { payOrder } from "@/Redux/Order/Action";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { DialogClose } from "@/components/ui/dialog";

import { Input } from "@/components/ui/input";

import { DotIcon } from "@radix-ui/react-icons";
import { DollarSign } from "lucide-react";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

const TreadingForm = () => {

St. Francis College 43

 Bit Coin Trading Application

const { coin, asset, wallet } = useSelector((store) => store);

const [quantity, setQuantity] = useState(0);
const [amount, setAmount] = useState(0);
const dispatch = useDispatch();
const [orderType, setOrderType] = useState("BUY");

const handleOnChange = (e) => {

const amount = e.target.value;
setAmount(amount);
const volume = calculateBuyCost(amount,
coin.coinDetails.market_data.current_price.usd);
setQuantity(volume);
};

function calculateBuyCost(amountUSD, cryptoPrice) {

let volume = amountUSD / cryptoPrice;

let decimalPlaces = Math.max(

2,
cryptoPrice.toString().split(".")[0].length
);

return volume.toFixed(decimalPlaces);
}

const handleBuyCrypto = () => {

dispatch(
payOrder({
jwt: localStorage.getItem("jwt"),
amount,
orderData: {
coinId: coin.coinDetails?.id,
quantity,
orderType,
},
})
);
};

useEffect(()=>{
dispatch(getAssetDetails({coinId:coin.coinDetails.id,jwt:localStorage.getItem("jwt")}))

},[])

St. Francis College 44

 Bit Coin Trading Application

return (
<div className="space-y-10 p-5">
<div>
<div className=" flex gap-4 items-center justify-between">
<Input
className="py-7 focus:outline-none "
placeholder="enter amount..."
onChange={handleOnChange}
type="number"
/>
<div>
<p className="border text-2xl flex justify-center items-center w-36 h-14 rounded-
md">
{quantity}
</p>
</div>
</div>
{orderType == "SELL"?
(asset.assetDetails?.quantity * coin.coinDetails?.current_price <
amount) && (
<h1 className="text-red-800 text-center pt-4">
Insufficient quantity to sell
</h1>
):(quantity * coin.coinDetails?.market_data.current_price.usd >
wallet.userWallet?.balance) && (
<h1 className="text-red-800 text-center pt-4">
Insufficient Wallet Balance To Buy
</h1>
)}
</div>

<div className="flex gap-5 items-center">

<div>
<Avatar>
<AvatarImage src={coin.coinDetails?.image.large} />
</Avatar>
</div>
<div>
<div className="flex items-center gap-2">
<p>{coin.coinDetails?.symbol?.toUpperCase()}</p>
<DotIcon className="text-gray-400" />
<p className="text-gray-400">{coin.coinDetails?.name}</p>
</div>

St. Francis College 45

 Bit Coin Trading Application

<div className="flex items-end gap-2">

<p className="text-xl font-bold">
{coin.coinDetails?.market_data.current_price.usd}
</p>
<p
className={`${
coin.coinDetails?.market_data.market_cap_change_24h < 0
? "text-red-600"
: "text-green-600"
}`}
>
<span className="">
{coin.coinDetails?.market_data.market_cap_change_24h}
</span>
<span>
({coin.coinDetails?.market_data.market_cap_change_percentage_24h}%)
</span>
</p>
</div>
</div>
</div>

<div className="flex items-center justify-between">

<p>Order Type</p>
<p>Market Order</p>
</div>
<div className="flex items-center justify-between">
<p>{orderType == "BUY" ? "Available Case" : "Available Quantity"}</p>
<div>
{orderType == "BUY" ? (
<div className="flex items-center ">
<DollarSign />

<span className="text-2xl font-semibold">

{wallet.userWallet?.balance}
</span>
</div>
):(
<p>{asset.assetDetails?.quantity || 0}</p>
)}
</div>
</div>
<div className="">
<DialogClose className="w-full">

St. Francis College 46

 Bit Coin Trading Application

<Button
onClick={handleBuyCrypto}
className={`w-full py-6 ${
orderType == "SELL" ? "bg-red-600 text-white" : ""
}`}
disabled={
quantity==0 ||
(orderType == "SELL" && !asset.assetDetails?.quantity) ||
(orderType == "SELL" ?
(asset.assetDetails?.quantity * coin.coinDetails?.market_data.current_price.usd <
amount):quantity * coin.coinDetails?.market_data.current_price.usd >
wallet.userWallet?.balance)
}
>
{orderType}
</Button>
</DialogClose>

<Button
onClick={() => setOrderType(orderType == "BUY" ? "SELL" : "BUY")}
className="w-full mt-5 text-xl"
variant="link"
>
{orderType == "BUY" ? "Or Sell" : "Or Buy"}
</Button>
</div>
</div>
);
};

export default TreadingForm;

Payment Details Page:

import { Button } from "@/components/ui/button";

import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";

St. Francis College 47

 Bit Coin Trading Application

import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import PaymentDetailsForm from "./PaymentDetailsForm";
import { useDispatch, useSelector } from "react-redux";
import { useEffect } from "react";
import { getPaymentDetails } from "@/Redux/Withdrawal/Action";
import { maskAccountNumber } from "@/Util/maskAccountNumber";

const PaymentDetails = () => {

const dispatch = useDispatch();
const { withdrawal } = useSelector((store) => store);

useEffect(() => {
dispatch(getPaymentDetails({ jwt: localStorage.getItem("jwt") }));
}, []);

return (
<div className="px-20 ">
<h1 className="text-3xl font-bold py-10">Payment Details</h1>
{withdrawal.paymentDetails ? (
<Card className="mb-10">
<CardHeader>
<CardTitle>
{withdrawal.paymentDetails?.bankName.toUpperCase()}
</CardTitle>
<CardDescription>
A/C No:{" "}
{maskAccountNumber(withdrawal.paymentDetails?.accountNumber)}
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center">
<p className="w-32">A/C Holder</p>
<p className="text-gray-400">
: {withdrawal.paymentDetails.accountHolderName}
</p>
</div>
<div className="flex items-center">
<p className="w-32">IFSC</p>

St. Francis College 48

 Bit Coin Trading Application

<p className="text-gray-400">
: {withdrawal.paymentDetails.ifsc.toUpperCase()}
</p>
</div>
</CardContent>
</Card>
):(
<Dialog>
<DialogTrigger>
<Button className="py-6">Add Payment Details</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader className="pb-5">
<DialogTitle>Payment Details</DialogTitle>
</DialogHeader>
<PaymentDetailsForm />
</DialogContent>
</Dialog>
)}
</div>
);
};

export default PaymentDetails;

Transfer Form Page:

import { transferMoney } from "@/Redux/Wallet/Action";

import { Button } from "@/components/ui/button";
import { DialogClose } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import { useDispatch } from "react-redux";

const TransferForm = () => {

const dispatch = useDispatch();
const [formData, setFormData] = useState({
amount: "",
walletId: "",
purpose: "",
});

St. Francis College 49

 Bit Coin Trading Application

const handleChange = (e) => {

setFormData({
...formData,
[e.target.name]: e.target.value,
});
// setAmount(e.target.value);
};

const handleSubmit = () => {

dispatch(
transferMoney({
jwt: localStorage.getItem("jwt"),
walletId: formData.walletId,
reqData: {
amount: formData.amount,
purpose: formData.purpose,
},
})
);
console.log(formData);
};
return (
<div className="pt-10 space-y-5">
<div>
<h1 className="pb-1">Enter Amount</h1>
<Input
name="amount"
onChange={handleChange}
value={formData.amount}
className="py-7"
placeholder="$9999"
/>
</div>
<div>
<h1 className="pb-1">Enter Wallet Id</h1>
<Input
name="walletId"
onChange={handleChange}
value={formData.walletId}
className="py-7"
placeholder="#ADFE34456"
/>
</div>

St. Francis College 50

 Bit Coin Trading Application

<div>
<h1 className="pb-1">Purpose</h1>
<Input
name="purpose"
onChange={handleChange}
value={formData.purpose}
className="py-7"
placeholder="gift for your friend..."
/>
</div>

<DialogClose>
<Button
onClick={handleSubmit}
variant=""
className="w-full p-7 text-xl"
>
Send
</Button>
</DialogClose>
</div>
);
};

export default TransferForm;

Withdrawl Page:

import { getWithdrawalHistory } from "@/Redux/Withdrawal/Action";

import { readableDate } from "@/Util/readableDate";
import { readableTimestamp } from "@/Util/readbaleTimestamp";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";

St. Francis College 51

 Bit Coin Trading Application

import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

const Withdrawal = () => {

const dispatch = useDispatch();

const { withdrawal } = useSelector((store) => store);

useEffect(() => {
dispatch(getWithdrawalHistory(localStorage.getItem("jwt")));
}, []);

return (
<div className="px-20 ">
<h1 className="text-3xl font-bold py-10">Withdrawal</h1>
<div>
<Table>
<TableHeader>
<TableRow>
<TableHead className="py-5">Date</TableHead>
<TableHead>Method</TableHead>
<TableHead>Amount</TableHead>
<TableHead className="text-right">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{withdrawal.history.map((item) => (
<TableRow key={item.id}>
<TableCell className="font-medium py-5">
{readableTimestamp(item?.date)}
</TableCell>
<TableCell>{"Bank Account"}</TableCell>
<TableCell>₹{item.amount}</TableCell>
<TableCell className="text-right">

St. Francis College 52

 Bit Coin Trading Application

<Badge className={`text-white ${item.status=="PENDING"?"bg-red-500 ":"bg-

green-500" }
`}>
{item.status}
</Badge>

</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
};

export default Withdrawal;

Watchlist Page:

import { useEffect, useState } from "react";

import { addItemToWatchlist, getUserWatchlist } from "@/Redux/Watchlist/Action";

import { useDispatch, useSelector } from "react-redux";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { BookmarkFilledIcon } from "@radix-ui/react-icons";

const Watchlist = () => {

const dispatch = useDispatch();

St. Francis College 53

 Bit Coin Trading Application

const [page, setPage] = useState(1);

const { watchlist,coin } = useSelector((store) => store);
const navigate = useNavigate();

useEffect(() => {
dispatch(getUserWatchlist());
}, [page]);

const handleAddToWatchlist=(id)=>{
dispatch(addItemToWatchlist(id))
}
return (
<div className="pt-8 lg:px-10">
<div className="flex items-center pt-5 pb-10 gap-5">
<BookmarkFilledIcon className="h-10 w-10"/>
<h1 className=" text-4xl font-semibold">Watchlist</h1>
</div>

<Table className="px-5 lg:px-20 border-t relative border-x border-b p-10 ">

<ScrollArea className={""}>
<TableHeader>
<TableRow className="sticky top-0 left-0 right-0 bg-background">
<TableHead className="py-4">Coin</TableHead>
<TableHead>SYMBOL</TableHead>
<TableHead>VOLUME</TableHead>
<TableHead>MARKET CAP</TableHead>
<TableHead>24H</TableHead>
<TableHead className="">PRICE</TableHead>
<TableHead className="text-right text-red-700">Remove</TableHead>
</TableRow>
</TableHeader>
<TableBody className="">
{watchlist.items.map((item) => (
<TableRow className="" key={item.id}>
<TableCell
onClick={() => navigate(`/market/${item.id}`)}
className="font-medium flex items-center gap-2 cursor-pointer"
>
<Avatar className="-z-50">
<AvatarImage src={item.image} alt={item.symbol} />
</Avatar>
<span> {item.name}</span>
</TableCell>
<TableCell>{item.symbol.toUpperCase()}</TableCell>

St. Francis College 54

 Bit Coin Trading Application

<TableCell>{item.total_volume}</TableCell>
<TableCell>{item.market_cap}</TableCell>
<TableCell
className={`${
item.market_cap_change_percentage_24h < 0
? "text-red-600"
: "text-green-600"
}`}
>
{item.market_cap_change_percentage_24h}%
</TableCell>
<TableCell>{item.current_price}</TableCell>

<TableCell className="text-right">
<Button onClick={()=>handleAddToWatchlist(item.id)} className="h-10 w-10"
variant="outline" size="icon">
<BookmarkFilledIcon className="h-6 w-6" />
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</ScrollArea>
</Table>
</div>
);
};

export default Watchlist;

St. Francis College 55

 Bit Coin Trading Application

5.1 Module description with brief Algorithm

Module 1: User Authentication

Description: This module handles user registration, login, and security through two-factor
authentication (2FA). It ensures that only authorized users can access the platform and perform
transactions.

Algorithm:

1. Registration Algorithm:
o Input: User details (name, email, password)
o Validate input for completeness and format.
o Hash the password for security.
o Store user details in the database.
o Send a verification email to the user.
o Wait for email verification confirmation.
o Activate the user account.
2. Login Algorithm:
o Input: Email and password.
o Retrieve user data from the database using the email.
o Compare the hashed password with the stored hash.
o If valid, generate and send a 2FA code to the registered device.
o Input the received 2FA code and verify it.
o If successful, grant access; otherwise, show an error message.

St. Francis College 56

 Bit Coin Trading Application

Module 2: Portfolio Management

Description: This module allows users to view and manage their cryptocurrency holdings,
providing insights into their investments' performance.

Algorithm:

1. View Portfolio Algorithm:

o Input: User ID.
o Retrieve the user's portfolio data from the database.
o Calculate the current value of each asset based on real-time market prices.
o Display asset details, including quantity, value, and overall profit/loss.
2. Update Portfolio Algorithm:
o Input: Asset details (ID, quantity, action: buy/sell).
o Validate the action and check wallet balance.
o Update the portfolio based on the transaction (increase or decrease quantity).
o Log the transaction in the trading history.
o Recalculate the overall portfolio value.

Module 3: Trading System

Description: This module facilitates buying and selling cryptocurrencies, ensuring secure
and efficient transaction processing.

Algorithm:

1. Buy/Sell Transaction Algorithm:

o Input: Asset ID, quantity, action (buy/sell).
o Validate that the user has sufficient funds or assets for the transaction.
o Retrieve current market price for the asset.
o If buying, deduct the total cost from the user's wallet.
o If selling, add the proceeds to the user's wallet.
o Update the portfolio and transaction history accordingly.
2. Transaction History Algorithm:
o Input: User ID.
o Retrieve all transactions associated with the user.

St. Francis College 57

 Bit Coin Trading Application

o Display transaction details, including date, type, asset, and amount.

Module 4: Wallet Management

Description: This module manages users' digital wallets, allowing them to view balances,
transfer funds, and withdraw to bank accounts.

Algorithm:

1. View Wallet Algorithm:

o Input: User ID.
o Retrieve wallet balance and transaction history from the database.
o Display current balance for each cryptocurrency.
2. Fund Transfer Algorithm:
o Input: Source wallet ID, target wallet ID, amount.
o Validate the amount and check if the source wallet has sufficient funds.
o Deduct the amount from the source wallet.
o Add the amount to the target wallet.
o Log the transaction in both wallets’ histories.
3. Withdrawal Algorithm:
o Input: Wallet ID, amount, bank account details.
o Validate the withdrawal amount against the wallet balance.
o Process the transfer to the specified bank account.
o Update the wallet balance and log the transaction.

Module 5: Notification System

Description: This module manages user notifications related to account activities, trades, and
market alerts.

Algorithm:

1. Send Notification Algorithm:

o Input: User ID, notification type, message.
o Retrieve the user’s preferred notification settings (email/SMS).
o Format the message and send it via the chosen method.

St. Francis College 58

 Bit Coin Trading Application

o Log the notification in the user’s notification history.

2. View Notifications Algorithm:
o Input: User ID.
o Retrieve all notifications related to the user from the database.
o Display notifications in chronological order.

Module 6: AI Chat Bot

Description: This module provides users with an AI-powered chat interface for real-time
assistance regarding platform features and cryptocurrency data.

Algorithm:

1. User Query Handling Algorithm:

o Input: User query.
o Parse the query to identify key topics (e.g., market prices, trading
instructions).
o Fetch relevant data from the market data API or platform database.
o Generate a response based on the user’s query.
o Send the response back to the user in the chat interface.
2. Feedback Loop Algorithm:
o Input: User feedback on chat responses.
o Analyze feedback to identify areas for improvement.
o Update the AI model and response algorithms based on user interactions.

St. Francis College 59

 Bit Coin Trading Application

5.2 White Box testing

This allows the tests to

• Check whether all independent paths within a module have been exercisedat least
once
• Exercise all logical decisions on their false sides
• Execute all loops and their boundaries and within their boundaries
• Exercise the internal data structure to ensure their validity
• Ensure whether all possible validity checks and validity lookups have been
provided to validate data entry.

➢ Test Case 1: User Registration Form

Description:

• New users must provide a valid email, name, and password.

• The system must send a verification email upon registration.
• The account must be activated only after email verification.

Preparation:

• Open the registration page.

Execution:

• Enter valid user information and submit the form.

• Check email for verification link and click it.

Check:

• Confirm that the account is activated upon clicking the link.

• Verify that the user can log in with the registered credentials.

St. Francis College 60

 Bit Coin Trading Application

➢ Test Case 2: User Login Page

Description:

• Users must enter a registered email and password.

• The system must implement two-factor authentication for secure access.
• Incorrect credentials must display an error message.

Preparation:

• Ensure user is registered and has valid credentials.

Execution:

• Enter email and password, then submit.

• Enter the 2FA code sent to the registered device.

Check:

• Verify successful login with correct credentials.

• Check error messages for incorrect login attempts.

➢ Test Case 3: Home Page

Description:

• The home page must display an overview of portfolio performance.

• Recent activity should be visible to the user.
• Quick links to key functionalities must be accessible.

Preparation:

• Log in with valid user credentials.

Execution:

• Access the home page after logging in.

St. Francis College 61

 Bit Coin Trading Application

Check:

• Verify the display of portfolio metrics.

• Ensure all quick links are functioning and redirect to the correct pages.

➢ Test Case 4: Portfolio Details

Description:

• The portfolio must show current holdings, values, and profit/loss.

• Users must be able to view historical performance data.

Preparation:

• Log in and have some crypto assets in the portfolio.

Execution:

• Navigate to the portfolio details page.

Check:

• Confirm that all assets are displayed accurately.

• Verify historical performance calculations.

➢ Test Case 5: Watch List

Description:

• Users must be able to add or remove cryptocurrencies from the watch list.
• Real-time price updates must be reflected in the watch list.

Preparation:

• Log in and have access to the trading feature.

Execution:

• Add a cryptocurrency to the watch list, then remove it.

St. Francis College 62

 Bit Coin Trading Application

Check:

• Verify that the asset is added or removed correctly.

• Check that price updates are reflected in real-time.

➢ Test Case 6: Trading History

Description:

• The system must display a complete record of all transactions.

• Each transaction must include date, type, and amounts.

Preparation:

• Ensure the user has completed several trades.

Execution:

• Navigate to the trading history page.

Check:

• Verify that all transactions are displayed accurately.

• Ensure transaction details are complete.

➢ Test Case 7: Buy or Sell

Description:

• Users must be able to execute buy and sell transactions seamlessly.

• The system must confirm the transaction before execution.

Preparation:

• Log in and have sufficient funds in the wallet.

Execution:

• Attempt to buy or sell a cryptocurrency.

St. Francis College 63

 Bit Coin Trading Application

Check:

• Verify that the transaction is executed successfully.

• Confirm that wallet balances are updated accordingly.

➢ Test Case 8: Wallet Details

Description:

• The wallet details page must show current balances and transaction history.
• Users should be able to add funds or withdraw easily.

Preparation:

• Log in and have an active wallet.

Execution:

• Access the wallet details page and attempt a withdrawal.

Check:

• Verify that balances are displayed accurately.

• Confirm that transactions are recorded after a withdrawal.

➢ Test Case 9: Payment Details

Description:

• Users must be able to manage and view payment methods securely.

• The system should display transaction records for deposits and withdrawals.

Preparation:

• Log in with valid user credentials.

Execution:

• Navigate to the payment details section.

St. Francis College 64

 Bit Coin Trading Application

Check:

• Confirm that all payment methods are displayed correctly.

• Verify that transaction history is accurate.

➢ Test Case 10: AI Chat Bot

Description:

• The AI chat bot must respond to user queries regarding market data and platform
navigation.
• Responses should be accurate and relevant.

Preparation:

• Log in to the platform.

Execution:

• Initiate a chat with the AI bot and ask various questions.

Check:

• Verify that the bot provides relevant and helpful responses.

• Confirm that it can handle a range of cryptocurrency-related inquiries.

St. Francis College 65

 Bit Coin Trading Application

5.3 System Testing

System Testing

System testing in the BitFlow Trading Application ensures that the entire application
functions as a complete, integrated system and meets the specified requirements. This phase
validates the application's functionality, security, performance, compatibility, and user
acceptance to ensure it performs as expected in a real-world environment.

Functionality Testing:

• Trading Process: Test the complete trading flow, including account setup,
deposit/withdrawal, portfolio management (buy/sell orders), and transaction history.
• Wallet Management: Validate wallet functionalities, including funds transfer, balance
inquiry, and transaction records.
• Order Placement: Test order placement, order status updates, and ensuring orders
reflect accurately in the user’s portfolio.
• Verification and Notifications: Verify OTP generation for secure user actions, and
test notifications for updates or alerts, ensuring timely and correct delivery.
• Admin Controls: Test the admin’s ability to access all wallet details, accept or decline
payment requests, and perform other management actions.

Security Testing:

• Data Security: Ensure that user data, especially wallet and transaction information, is
stored and transmitted securely to prevent unauthorized access.
• Authorization and Authentication: Test user roles and permissions, ensuring only
admins have access to certain data and actions.
• Vulnerability Testing: Check for common vulnerabilities, such as SQL injection and
cross-site scripting, to prevent potential security threats.
• OTP and Verification Codes: Validate the secure generation and storage of OTPs and
verification codes to prevent misuse or unauthorized access.

St. Francis College 66

 Bit Coin Trading Application

Performance Testing:

• Load Testing: Assess application performance under varying levels of user load,
especially during peak trading times, to ensure smooth operation.
• Response Times: Monitor the system's response time for critical actions like order
placements, wallet transactions, and market data refreshes to ensure acceptable latency.
• Resource Utilization: Analyze server and database performance to detect bottlenecks
and ensure efficient resource usage under heavy load conditions.

Compatibility Testing:

• Cross-Browser Compatibility: Test the application on different browsers (e.g.,

Chrome, Firefox, Safari, Edge) to ensure consistent behavior and appearance.
• Device Compatibility: Verify that the application functions smoothly on various
devices (desktop, mobile, tablet) and screen resolutions.
• Responsive Design: Ensure that all elements, especially trading and wallet
functionalities, are fully responsive and accessible on supported platforms.

User Acceptance Testing (UAT):

• Stakeholder Validation: Engage real users or stakeholders in testing critical

functionalities, such as trading, wallet management, and portfolio tracking, to confirm
the system aligns with their expectations.
• Scenario-Based Testing: Perform UAT based on user scenarios, covering typical
trading workflows, order placements, and portfolio management to validate ease of use
and functionality.
• Feedback and Improvements: Gather feedback from users on any usability or
functionality concerns and implement necessary improvements.

Documentation Review:

• User Manuals and Guides: Review documentation to ensure all user-facing functions,
such as trading, order placements, and wallet operations, are clearly explained.
• Admin Documentation: Verify that admin tasks, including fund approvals, payment
controls, and wallet oversight, are documented for ease of understanding.

St. Francis College 67

 Bit Coin Trading Application

6. Conclusion

The Bitcoin trading application project successfully delivers a secure, user-friendly, and
feature-rich platform that makes cryptocurrency trading accessible to a wide range of users. By
combining essential tools for real-time market analysis, portfolio management, and secure
wallet integration, the application empowers users to make informed trading decisions and
navigate the complexities of digital assets. Its scalability and adaptability provide a foundation
for future growth, allowing for easy integration of new features and enabling the application to
remain competitive in the evolving cryptocurrency landscape. With robust security features
like multi-factor authentication, encryption, and fraud detection, the platform builds user trust
and ensures a safe environment for digital asset management.

Furthermore, the application fosters financial inclusion by lowering the barriers to entry for
new traders, providing a gateway for users to participate in the digital economy. Its design
emphasizes user experience through intuitive interfaces, customizable notifications, and
adaptable settings, which together create a smooth and engaging trading experience. The
platform is also well-positioned for future enhancements, such as AI-driven insights, social
trading, and advanced analytics, all of which can enrich the user experience and make the
platform an invaluable tool for both novice and seasoned traders.

The application also prepares for long-term sustainability by maintaining flexibility for
regulatory compliance, ensuring that it can adapt to changing rules in the cryptocurrency
industry. Ultimately, this Bitcoin trading application is poised to serve as a reliable, scalable,
and user-centric platform that can grow alongside its user base and the dynamic cryptocurrency
market, fostering a secure and community-driven space for digital trading.

St. Francis College 68

 Bit Coin Trading Application

7. Future Enhancement

Future enhancements for the Bitcoin trading application include AI-driven trading insights and
automated portfolio rebalancing to optimize trading strategies, as well as advanced security
measures and social trading features to foster a safe and collaborative user environment. These
additions will enhance functionality, user engagement, and adaptability within the evolving
cryptocurrency market.

1. AI-Powered Trading Bot: Integrate an AI-based trading bot that can analyse market
trends and execute trades based on user-defined strategies or automated AI insights.
2. Real-Time News & Sentiment Analysis: Provide real-time news feeds and sentiment
analysis from social media to help users gauge market sentiment and make more
informed trading decisions.
3. Advanced Charting & Technical Analysis Tools: Add comprehensive charting tools
with customizable indicators, enabling users to perform detailed technical analysis
directly within the application.
4. Portfolio Rebalancing and Insights: Include automated portfolio rebalancing features
and predictive insights to help users maintain their preferred asset allocation and
capitalize on market trends.
5. Personalized Alerts & Notifications: Allow users to set alerts for price changes,
market events, and portfolio updates, keeping them informed through SMS, email, or
in-app notifications.
6. Enhanced Security: Implement multi-factor authentication, biometric security, and
fraud detection to ensure a secure trading environment for users.
7. Fractional Trading & Staking Options: Introduce fractional trading to allow users to
buy small portions of high-value assets, along with staking options for earning passive
income.

St. Francis College 69

 Bit Coin Trading Application

8. References

Front-End Technologies

1. HTML
o W3C. (2024). HTML5 Specification. World Wide Web Consortium. Available
from: https://www.w3.org/TR/html52/
2. CSS
o W3C. (2024). Cascading Style Sheets (CSS) - A Beginner's Guide. World Wide
Web Consortium. Available from: https://www.w3.org/Style/CSS/
3. React.js
o React Team. (2024). React Documentation. Available from:
https://react.dev/learn
4. Tailwind CSS
o Tailwind Labs. (2024). Tailwind CSS Documentation. Available from:
https://tailwindcss.com/docs
5. Shadcn UI
o Shadcn. (2024). Shadcn UI Documentation. Available from: https://shadcn.dev/

Back-End Technologies

6. Java
o Oracle. (2024). Java SE Documentation. Available from:
https://docs.oracle.com/javase/
7. Spring Boot
o Pivotal Software, Inc. (2024). Spring Boot Documentation. Available from:
https://docs.spring.io/spring-boot/docs/current/reference/html/
8. Spring Security
o Pivotal Software, Inc. (2024). Spring Security Documentation. Available from:
https://docs.spring.io/spring-security/reference/
9. Java Mail Sender
o Oracle. (2024). JavaMail API Documentation. Available from:
https://javaee.github.io/javamail/docs/api/

St. Francis College 70

 Bit Coin Trading Application

Database Technologies

10. MySQL
o Oracle Corporation. (2024). MySQL Documentation. Available from:
https://dev.mysql.com/doc/

These references provide comprehensive documentation and insights into the technologies
used in Bit Coin Trading Application project., ensuring that I have reliable sources for each
aspect of the integration.

St. Francis College 71