Declaration

I, Evans Oduor Otieno, a student of the Department of Computer Science and IT at The East
African University, hereby declare that this proposal titled "Web Bidding App for Art using React,
Node.js, and WebSockets" is my original work. The content of this proposal has been prepared
by me.

All references and citations used in this proposal have been duly acknowledged. I understand
that plagiarism is a serious academic offense and I confirm that this proposal adheres to The
East African University's guidelines for academic integrity.
Dedication

To my family, whose unwavering support has allowed me to pursue my dreams.

To my professor, [Professor's name], for his guidance and mentorship in the field of web
development.
Acknowledgement

I would like to acknowledge the support and guidance I received from the faculty and staff of the
Computer Science and IT department at The East African University. Their encouragement and
expertise were invaluable in the development of this proposal.
Abstract

This proposal outlines the development of a web-based bidding application for the art
community, leveraging the power of React, Node.js, and WebSockets. Designed to address the
limitations of existing solutions, this app prioritizes user-friendliness and real-time functionality.
Core features include secure artist listings, a dynamic bidding system with M-Pesa integration
for seamless transactions, and real-time notifications to keep users engaged.

The proposed system utilizes a three-tier architecture with a MariaDB database for secure data
storage. The user interface will be designed with clarity and intuitive navigation in mind, catering
to artists, buyers, and administrators. Developed using Agile methodology, the project
emphasizes user stories and iterative development to ensure the app effectively meets the
needs of the art community. This web bidding platform has the potential to foster a vibrant
online art marketplace, facilitating secure transactions and promoting artistic expression in
Kenya
Introduction

Background:

The art world is experiencing a surge in online activity. Online art auctions are becoming
increasingly popular due to their convenience, global reach, and wider audience. These
platforms offer artists greater exposure and collectors a diverse selection of works.

Problem Statement:

While existing online art auction solutions offer a valuable service, they often lack user-
friendliness and real-time functionality. Some platforms can be cumbersome to navigate, while
others struggle to deliver a seamless bidding experience. Additionally, security concerns and
limited payment options can deter both artists and buyers from participating fully.

Scope:

This project proposes the development of a web-based bidding application specifically designed
for the art community in Kenya. The core functionalities will focus on creating a user-friendly and
secure platform for artists to list their work and for buyers to participate in real-time auctions.

Objectives:

Our primary objectives are to:

Develop a user-friendly and intuitive interface for artists, buyers, and administrators.

Implement a secure and reliable real-time bidding system.

Integrate M-Pesa for convenient and secure mobile payment processing.

Provide real-time notifications to keep users engaged and informed throughout the auction
process.

Justification:

This web bidding application has the potential to significantly benefit the Kenyan art community.
By fostering a secure and user-friendly platform, we aim to:
Increase accessibility for both artists and art enthusiasts.

Provide a platform that empowers artists to showcase their work to a wider audience.

Offer buyers a convenient and secure way to discover and acquire art.

Limitations:

In the initial phase, the project may focus on a specific art category to ensure a well-defined
user base. Additionally, the initial version might offer a core set of functionalities, with further
features planned for future iterations based on user feedback.
Literature Review

This literature review examines the current state of online art auction platforms, explores the
suitability of chosen web development technologies, and discusses the potential of M-Pesa
integration (if applicable) for a proposed web bidding application.

1. Existing Online Art Auction Platforms

Several established online art auction platforms offer various functionalities and cater to diverse
audiences. Here's an analysis of a few prominent examples:

Sotheby's and Christie's: These traditional auction houses have established online platforms
offering high-value art and a focus on high-net-worth collectors. Their user interfaces prioritize
showcasing prestigious artworks and cater to a sophisticated audience.
(https://www.sothebys.com/en/, https://www.christies.com/en)

Artsy: This platform targets a broader audience with a curated selection of contemporary and
emerging artists. Artsy offers a user-friendly interface and educational resources, aiming to
make art collecting more accessible. (https://www.artsy.net/)

Invaluable: This platform aggregates auctions from various auction houses, providing a
comprehensive search engine for artwork across categories and price points.
(https://www.invaluable.com/)

User Reviews and Considerations: While online platforms offer convenience and global reach,
user reviews sometimes highlight concerns regarding:

User-friendliness: Complex bidding interfaces or unclear information can discourage new

collectors.

Security: Robust security measures are crucial to ensure user data and financial transactions
are protected.

Limited Artist Exposure: Emerging or lesser-known artists may struggle for visibility on
established platforms.

These points highlight the potential for a web bidding app that prioritizes user-friendliness,
transparency, and accessibility for a wider range of art enthusiasts.

2. Web Development Technologies

The proposed web bidding app will leverage the following technologies:

React: This popular JavaScript library offers a component-based structure for building user
interfaces. React allows for efficient development of dynamic and reusable UI components,
leading to a user-friendly and responsive application. (https://react.dev/)
Node.js: This JavaScript runtime environment enables real-time communication between the
server and client. Node.js is well-suited for building scalable web applications that require real-
time features like auction updates and bidding notifications. (https://nodejs.org/en)

WebSockets: This communication protocol allows for persistent, two-way communication

between the server and client. WebSockets facilitate real-time updates on auction statuses,
bids, and notifications, enhancing user engagement. (https://socket.io/)

MariaDB: This open-source relational database management system offers a robust and secure
platform for storing auction data, user information, and transaction details. MariaDB's scalability
and reliability are well-suited for managing the application's data needs. (https://mariadb.org/)

These technologies, combined with their respective strengths, will create a real-time web
bidding application that offers a seamless user experience.

3. M-Pesa Integration (Optional)

If the target audience for the web bidding app resides primarily in the East African region,
integrating M-Pesa as a payment option can be highly beneficial. M-Pesa is a mobile money
transfer service widely used in the region, offering a secure and convenient way to conduct
mobile payments. Integrating M-Pesa can significantly increase user adoption and participation
in the web bidding app by:

Facilitating Mobile Payments: M-Pesa allows users to easily deposit and withdraw funds directly
from their mobile phones, eliminating the need for credit cards or international transactions.

Financial Inclusion: By offering a familiar and accessible payment method, M-Pesa integration
can encourage participation from users who may not have access to traditional payment
methods.

Research by https://www.safaricom.co.ke/main-mpesa/about-m-pesa/introduction highlights the

positive impact of M-Pesa integration on mobile application usage and financial inclusion in East
Africa. Integrating M-Pesa with strong security measures can ensure a safe and user-friendly
payment experience for the web bidding app.
PROPOSED SYSTEM

System Overview

The proposed web bidding application, titled "ArtReach," aims to create a user-friendly and
accessible online platform for buying and selling art. It addresses limitations identified in
existing platforms by focusing on:

Enhanced User Experience: ArtReach will prioritize a clean and intuitive user interface,
making it easy for new collectors and enthusiasts to navigate.

Artist Visibility: The platform will provide dedicated features to showcase emerging and
lesser-known artists alongside established ones, increasing artist exposure.

Transparency and Security: Real-time bidding updates and secure payment processing will
foster trust and transparency within the online auction environment.

Target Audience

ArtReach targets a broad audience, including:

New Art Collectors: The user-friendly interface and educational resources will empower new
collectors to confidently participate in the online art market.

Art Enthusiasts: A wide range of curated and searchable artwork will cater to diverse
interests, allowing enthusiasts to discover and explore art.

Artists: If the system allows artist registration, it can provide a platform for them to showcase
their work, connect with potential buyers, and potentially manage their own auctions.
System Architecture

ArtReach will utilize a three-tier architecture for optimal performance, security, and
maintainability. Here's a high-level diagram and explanation of the components:

1. Components:

User Interface (UI) - React: This is the part users see and interact with. Built with React, it will
provide a user-friendly and responsive experience. Here's how users will interact with ArtReach:

Browsing Artwork: They can search for artwork based on artist, style, price, or other criteria.
Imagine a search bar and filters to narrow down options.

Viewing Auction Details: Each artwork will have a dedicated page showcasing details like
image, description, current bid, time remaining, and artist information.

Bidding: Users can easily place bids directly on the auction page. This might involve an
interface with a bidding amount input and a button to submit the bid.

Managing Profiles: Users can create accounts and manage their profiles. This could include
sections for viewing past bids, creating watchlists of favorite artworks, and updating personal
information.

Real-time Updates: The UI will dynamically update with new information. Imagine seeing the
latest bid amount reflected immediately or a countdown timer ticking down in real-time. Push
notifications (if applicable) could also alert users about outbids or important auction updates.

Focusing on the User Experience:

While these are the core functionalities, let's think about making the UI even better:
Intuitive Interface: The design should be clear and easy to navigate, even for new users.

Visually Appealing: High-quality images of the artwork and a clean layout will enhance the user
experience.

Accessibility: The UI should be accessible to users with disabilities, following accessibility best
practices.

2. Business Logic Layer

This layer serves as the core of my application, built using Node.js with the Express.js
framework. Express.js streamlines the development process by providing features for:

Routing: Express.js helps define routes that handle incoming requests from the UI. These
routes map to specific functionalities within the Business Logic Layer.

Middleware: Middleware functions can be implemented within Express.js to perform tasks like
user authentication, logging, or data validation before requests reach core functionalities.

Here's how it will address the features you described:

1. User Management:

User management is a critical component of the web bidding application. It

ensures secure access, controls user actions, and potentially differentiates user
experiences based on roles. Here's a comprehensive breakdown of how user
management will be implemented in the Business Logic Layer (Node.js with Express.js):

1. User Registration and Login:

· Express.js Routes: Express.js provides a framework for defining routes that

handle incoming user requests. In ArtReach, specific routes will be established
for user registration and login functionalities.
· Registration Route: This route will handle user-submitted registration
information (e.g., username, password, email). The Business Logic Layer will
then:
· Validate the submitted data (e.g., ensuring password strength, unique
username).
· Securely hash and store user passwords in the Data Access Layer (using a one-
way hashing algorithm like bcrypt).
· Create a new user record in the database with relevant user details.
· Login Route: This route will handle user login credentials (username and
password). The Business Logic Layer will then:
· Verify the submitted username and password against stored credentials in the
Data Access Layer.
· If valid, generate a secure session token (e.g., JWT) and send it back to the
user's browser for authentication in subsequent requests.
 · If invalid, provide appropriate error messages to the user.

2. Authentication and Authorization:

· Authentication: The process of verifying a user's identity is crucial for secure

access. ArtReach will implement authentication using:
· Session Tokens: Upon successful login, the Business Logic Layer will generate
a secure session token (e.g., a JSON Web Token - JWT). This token will be
included in subsequent user requests and can be verified by the server to
confirm the user's logged-in status. This helps avoid the need for repeated logins
during a session.
· Token Validation: Express.js middleware can be implemented to intercept
incoming requests and verify the validity of the included session token before
allowing access to specific functionalities. This ensures only authenticated users
can perform actions within the application.
· Authorization: Even after successful authentication, user roles and permissions
will determine what actions they can take within the app. ArtReach might
consider implementing different user roles, such as:
· Bidder: Standard users who can register, login, browse artwork, and participate
in auctions by placing bids.
· Artist (Optional): If the system allows artist registration, this role could enable
them to upload artwork, manage their listings, and potentially set reserve prices.
· Administrator (Optional): An administrator role could manage user accounts,
auctions, system settings, and potentially monitor overall application activity.

Security Considerations:

· Password Hashing: Always store user passwords using a one-way hashing

algorithm (e.g., bcrypt) to protect them from being compromised in case of a data
breach.
· Secure Session Tokens: Implement secure mechanisms for generating, storing,
and transmitting session tokens (e.g., HTTPS for secure communication).
· Authorization Enforcement: Clearly define user roles and permissions within
the Business Logic Layer to ensure users can only access authorized
functionalities.
2. Payment Gateway Interaction:

· Express.js Routes: Express.js plays a key role in enabling interaction with the
chosen payment gateway or wallet system (consider M-Pesa integration if
applicable) through defined routes. These routes will handle requests from the
Business Logic Layer to:
· Retrieve User Wallet Balance: This functionality allows the Business Logic
Layer to query the payment gateway or wallet system to obtain a user's current
available balance. This information will be crucial for bid validation.
· Process Payments (Optional): Depending on the chosen system and
functionalities offered, ArtReach might implement routes for processing
successful bids. This could involve securely transferring funds from the winning
bidder's wallet to the artist or platform (if applicable).

2. Bid Validation with Wallet Balance Check:

· Verification before Bidding: To ensure a smooth bidding experience and avoid

declined bids due to insufficient funds, the web app will implement a balance
check during the bid validation process within the Business Logic Layer. Here's
how it will work:
· Upon Bid Placement: When a user submits a bid, the Business Logic Layer
triggers an interaction with the payment gateway or wallet system through the
defined Express.js route.
· Balance Retrieval: The Business Logic Layer retrieves the user's current wallet
balance.
· Bid Validation Check: The Business Logic Layer compares the retrieved
balance with the current bid amount.
· Sufficient Funds: If the balance is sufficient to cover the bid amount, the bid
validation proceeds, and the bid is processed further (e.g., updating auction
details, potentially notifying other bidders).
· Insufficient Funds: If the balance is insufficient, the bid is rejected, and the user
receives an appropriate error message indicating they need to top up their wallet
before placing bids.