INDEX
[Link] CONTENT PAGE NO
INTRODUCTION 2
1 1.1 ABSTRACT
3
1.2 PROJECT OVERVIEW 3
SYSTEM ANALYSIS 4
2.1 EXISTING SYSTEM 5
2
2.2 PROPOSED SYSTEM 5
2.3 SYSTEM REQUIRED
6
SPECIFICATION
SYSTEM DESIGN 7
3.1 INPUT AND OUTPUT DESIGN 8
3
3.2 TECHNOLOGY USED 9
SOURCE CODE 11
4
1
5 SCREENSHOTS 56
6 CONCLUSION 66
INTRODUCTION
[Link] AUTION
1.1 ABSTRACT
The Indian Premier League (IPL) auction is a crucial event where franchise
teams bid for players to build their squads. Traditionally conducted as a live
event, an Online IPL Auction System offers a digital alternative that
enhances accessibility, efficiency, and transparency.
This system facilitates real-time bidding, player listing, team budget
management, and automated auction rules enforcement. It integrates secure
payment gateways, AI-driven bid recommendations, and blockchain-based
transaction records to ensure fairness and prevent fraud.
1.2 PROJECT OVERVIEW
The Server process the customers and the items are shipped to the address submitted by them.
The Website was designed into two modules first is for the customers who wish to buy the
articles. Second is for the storekeepers who maintains and updates the information pertaining
to the articles and those of the customers. The end user of this product is a departmental store
where the website is hosted on the web and the administrator maintains the database.
2
The website which is deployed at the customer database, the details of the items are brought
forward from the database for the customer view based on the selection through the menu and
the database of all the products are updated at the end of each transaction. Data entry into the
Website can be done through various screens designed for various levels of users. Once the
authorized personnel feed the relevant data into the system, several reports could be generated
as per the security.
SYSTEM ANALYSIS
System analysis is the process of gathering and interpreting facts, diagnosing problems and
using the Information to recommend improvements on the system. System analysis is a
problem solving activity that requires intensive communication between the system users and
system developers.
System analysis or study is an important phase of any system development process. The
system is viewed as a whole, the inputs are identified and the system is subjected to close
study to identify the
Problem areas. The solutions are given as a proposal. The proposal is reviewed on user request
and suitable changes are made. This loop ends as soon as the user is satisfied with the proposal.
2.1 EXISTING SYSTEM
The current system for Mobile Store is to visit the shop manually and from the available
product choose the items customer what and buying the item by payment of the item.
• It is less user-friendly.
• User must go to shop and select products.
3
• It is difficult to identify the required products.
• Description of the product limited.
• Not in reach of distant users.
2.2 PROPOSED SYSTEM
In the proposed system customer need not go to the shop for buying the products. He can order
the product he wish to buy through the website in his Smartphone. The shop owner will be
admin of the system. Shop owner can appoint moderators who will help owner in managing
the customers and product orders. The system also recommends a home delivery system for
the purchased products.
2.3 SYSTEM REQUIREMENT SPECIFICATION
• HARDWARE
Processor: INTEL Core i3 or AMD Rayzen 5
Ram: 4 GB
Disk space:Maximum 256GB
• HARDWARE
Operating System: (Windows,Mac Os)
Internet Browser:(Microsoft Edge,Google Chrome,FireFox)
2.3.1 GENERAL DESCRIPTION
Product description:
The system consists of two parts. A web sites which can provide the online MOBILE STORE
service and Online website for the customer to Online Buying MOBILE PHONES System
4
access the web service from his Smartphone. Website should be able to help Problem
Statement: As online MOBILE STORE became a trend nowadays the regular shops are losing
their customers to online brands. Customers have effortless
ONLINE MOBILE STORE experience and saving time through online. For competing with
those online brands, If shops are providing an online portal where their customers can shop
through internet and get the products at their doors it will increase the number of customers.
2.3.2 SYSTEM OBJECTIVES
• To provide for online IPL AUTION of products in an existing shop.
• To provide a online AUTION web site for the same shop the customer for selecting
his item and to help the owner in managing the orders from the customers
SYSTEM DESIGN
3.1 INPUT AND OUT PUT DESIGN
3.1.1 INPUT DESIGN:
Input design is the link that ties the information system into the world of its users. The input
design involves determining the inputs, validating the data, minimizing the data entry and
provides a multiuser facility. Inaccurate inputs are the most common cause of errors in data
processing. Errors entered by the data entry operators can be controlled by input design. The
useroriginated inputs are converted to a computer based format in the input design. Input data
are collected and organized into groups of similar data. Once identified, the appropriate input
media are selected for processing. All the input data are validated and if any data violates any
5
conditions, the user is warned by a message. If the data satisfies all the conditions, it is
transferred to the appropriate tables in the database. In this project the student details are to
be entered at the time of registration. A page is designed for this purpose which is user friendly
and easy to use. The design is done such that users get appropriate messages when exceptions
occur.
3.1 .2 OUTPUT DESIGN:
Online IPL AUTION system Computer output is the most important and direct source of
information to the user. Output design is a very important phase since the output needs to be
in an efficient manner. Efficient and intelligible output design improves the system
relationship with the user and helps in decision [Link] the user is the ultimate judge
of the quality of output. The output module of this system is the selected notifications.
3.2 TECHNOLOGY USED
The various system tools that have been used in developing both the front end of the project
are being discussed in the chapter.
3.2.1 CODE EDITOR
• MICROSOFT VS CODE
Visual Studio Code is a lightweight, powerful code editor developed by Microsoft. It offers
features like smart code completion (IntelliSense), integrated debugging, and Git version
control. It is highly customizable with a vast library of extensions. VS Code supports many
programming languages and runs on Windows, macOS, and Linux.
3.3.1 FRONT END
• HTML
HTML (HyperText Markup Language) is the standard language for creating web
pages. It uses tags to structure elements like headings, paragraphs, links, and images.
HTML files start with a <!DOCTYPE html> declaration and contain <html>, <head>, and
<body> tags. HTML5, the latest version, adds new features for multimedia and
6
semantic elements. HTML documents are saved with .html or .htm extensions. HTML
is essential for web development and forms the backbone of all websites. It provides
the structure that CSS and JavaScript enhance. Web developers use HTML to create
and design web content
• CSS
CSS (Cascading Style Sheets) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. It controls the layout, colors,
fonts, and overall visual appearance of web pages. CSS separates content from design,
making it easier to maintain and update. With CSS, you can create responsive designs
that adapt to different screen sizes. It also supports animations and transitions to
enhance user experience. CSS can be applied inline, internally within <style> tags, or
externally through separate .css files. It is an essential tool for web designers and
developers to create visually appealing and user-friendly websites.
• JAVA SCRIPT
JavaScript is a versatile programming language primarily used for creating dynamic
and interactive content on web pages. It can manipulate HTML and CSS to update
content, control multimedia, and animate images. JavaScript runs directly in the
browser, making it a crucial tool for front-end development. It supports event-driven,
functional, and object-oriented programming styles. JavaScript also plays a key role
in modern web frameworks and libraries like React, Angular, and [Link]. . It has a rich
ecosystem with numerous libraries and frameworks. JavaScript is an essential skill for
web developers to create responsive and engaging user experiences.
PROJECT LINK:
[Link]
7
SOURCE CODE
import Link from "next/link"
import { Card, CardContent, CardHeader, CardTitle } from
"@/components/ui/card"
export default function CategoriesPage() {
// Mock categories data
const categories = [
{
id: 1,
name: "Antiques",
description: "Rare and collectible items from the past",
itemCount: 245,
imageUrl: "/[Link]?height=150&width=250",
},
{
id: 2,
name: "Art",
description: "Paintings, sculptures, and other artistic works",
itemCount: 189,
imageUrl: "/[Link]?height=150&width=250",
8
},
{
id: 3,
name: "Jewelry",
description: "Fine jewelry, watches, and precious gems",
itemCount: 312,
imageUrl: "/[Link]?height=150&width=250",
},
{
id: 4,
name: "Collectibles",
description:"Sports memorabilia, coins, stamps, and more",
itemCount: 427,
imageUrl: "/[Link]?height=150&width=250",
},
{
id: 5,
name: "Electronics",
description: "Vintage and modern electronic devices",
itemCount: 156,
imageUrl: "/[Link]?height=150&width=250",
},
{
id: 6,
name: "Furniture",
description: "Antique and designer furniture pieces",
9
itemCount: 98,
imageUrl: "/[Link]?height=150&width=250",
},
]
return (
<div className="container mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8">Browse Categories</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[Link]((category) => (
<Link key={[Link]} href={`/categories/${[Link]}`}>
<Card className="h-full hover:shadow-md transition-shadow">
<CardHeader className="p-4 pb-2">
<CardTitle className="text-xl">{[Link]}</CardTitle>
</CardHeader>
<CardContent className="p-4 pt-0">
<img
src={[Link] || "/[Link]"}
alt={[Link]}
className="w-full h-32 object-cover mb-4 rounded-md"
/>
<p className="text-sm text-muted-foreground mb-
2">{[Link]}</p>
<p className="text-sm font-medium">{[Link]}
items</p>
</CardContent>
10
</Card>
</Link>
))}
</div>
</div>
)
}
ITEM
IMporT LInk froM "nExT/LInk"
IMporT { BuTTon } froM "@/coMponEnTs/uI/BuTTon"
IMporT { card, cardconTEnT } froM "@/coMponEnTs/uI/card"
IMporT BIdforM froM "@/coMponEnTs/BId-forM"
ExporT dEfauLT funcTIon ITEMdETaILpagE({ paraMs }: {
paraMs: { Id: sTrIng } }) {
// Mock ITEM daTa - In a rEaL app, ThIs wouLd BE fETchEd
BasEd on ThE Id
consT ITEM = {
Id: [Link]([Link]),
TITLE: "VInTagE waTch",
dEscrIpTIon:
"a rarE VInTagE waTch froM ThE 1950s In ExcELLEnT
condITIon. ThIs TIMEpIEcE fEaTurEs a goLd-pLaTEd casE,
MEchanIcaL MoVEMEnT, and orIgInaL LEaThEr sTrap. ThE
waTch facE Is In prIsTInE condITIon wITh no scraTchEs or
fadIng. ThIs Is a coLLEcTor's ITEM and a pIEcE of hIsTory.",
currEnTBId: 250,
11
MInBId: 260,
BIdcounT: 12,
TIMELEfT: "2 days, 5 hours",
sELLEr: "VInTagEcoLLEcTor",
sELLErraTIng: "4.9/5",
IMagEurL: "/[Link]?hEIghT=400&wIdTh=600",
BIdhIsTory: [
{ usEr: "coLLEcTor123", aMounT: 250, TIME: "yEsTErday aT
3:45 pM" },
{ usEr: "anTIquELoVEr", aMounT: 225, TIME: "yEsTErday aT
1:20 pM" },
{ usEr: "waTchfan42", aMounT: 200, TIME: "2 days ago aT
11:30 aM" },
],
rETurn (
<dIV cLassnaME="conTaInEr Mx-auTo px-4 py-8">
<LInk hrEf="/" cLassnaME="InLInE-fLEx ITEMs-cEnTEr MB-6
TExT-sM hoVEr:undErLInE">
← Back To aucTIons
</LInk>
<dIV cLassnaME="grId grId-coLs-1 Lg:grId-coLs-3 gap-8">
<dIV cLassnaME="Lg:coL-span-2">
12
<h1 cLassnaME="TExT-3xL fonT-BoLd MB-
4">{[Link]}</h1>
<dIV cLassnaME="MB-6">
<IMg src={[Link] || "/[Link]"}
aLT={[Link]} cLassnaME="w-fuLL roundEd-Lg" />
</dIV>
<dIV cLassnaME="MB-8">
<h2 cLassnaME="TExT-xL fonT-sEMIBoLd MB-
3">dEscrIpTIon</h2>
<p cLassnaME="TExT-MuTEd-
forEground">{[Link]}</p>
</dIV>
<dIV cLassnaME="MB-8">
<h2 cLassnaME="TExT-xL fonT-sEMIBoLd MB-3">sELLEr
InforMaTIon</h2>
<dIV cLassnaME="fLEx ITEMs-cEnTEr">
<dIV cLassnaME="Mr-4 Bg-MuTEd roundEd-fuLL w-12 h-12
fLEx ITEMs-cEnTEr jusTIfy-cEnTEr">
<span cLassnaME="TExT-Lg fonT-
sEMIBoLd">{[Link](0)}</span>
</dIV>
<dIV>
<p cLassnaME="fonT-MEdIuM">{[Link]}</p>
13
<p cLassnaME="TExT-sM TExT-MuTEd-
forEground">raTIng: {[Link]}</p>
</dIV>
</dIV>
</dIV>
<dIV>
<h2 cLassnaME="TExT-xL fonT-sEMIBoLd MB-3">BId
hIsTory</h2>
<dIV cLassnaME="Bg-MuTEd roundEd-Lg p-4">
{[Link] > 0 ? (
<uL cLassnaME="dIVIdE-y dIVIdE-MuTEd-
forEground/20">
{[Link]((BId, IndEx) => (
<LI kEy={IndEx} cLassnaME="py-3 fLEx jusTIfy-
BETwEEn">
<dIV>
<span cLassnaME="fonT-MEdIuM">{[Link]}</span>
<span cLassnaME="TExT-sM TExT-MuTEd-
forEground ML-2">({[Link]})</span>
</dIV>
<span cLassnaME="fonT-
sEMIBoLd">${[Link]}</span>
</LI>
))}
</uL>
14
):(
<p cLassnaME="TExT-cEnTEr py-4 TExT-MuTEd-
forEground">no BIds yET. BE ThE fIrsT To BId!</p>
)}
</dIV>
</dIV>
</dIV>
<dIV>
<card>
<cardconTEnT cLassnaME="p-6">
<dIV cLassnaME="MB-6">
<h2 cLassnaME="TExT-xL fonT-sEMIBoLd MB-4">aucTIon
dETaILs</h2>
<dIV cLassnaME="spacE-y-3">
<dIV cLassnaME="fLEx jusTIfy-BETwEEn">
<span cLassnaME="TExT-MuTEd-
forEground">currEnT BId:</span>
<span cLassnaME="fonT-
BoLd">${[Link]}</span>
</dIV>
<dIV cLassnaME="fLEx jusTIfy-BETwEEn">
<span cLassnaME="TExT-MuTEd-forEground">BId
counT:</span>
<span>{[Link]}</span>
</dIV>
15
<dIV cLassnaME="fLEx jusTIfy-BETwEEn">
<span cLassnaME="TExT-MuTEd-forEground">TIME
LEfT:</span>
<span cLassnaME="fonT-
MEdIuM">{[Link]}</span>
</dIV>
<dIV cLassnaME="fLEx jusTIfy-BETwEEn">
<span cLassnaME="TExT-MuTEd-forEground">MInIMuM
BId:</span>
<span cLassnaME="fonT-
MEdIuM">${[Link]}</span>
</dIV>
</dIV>
</dIV>
<BIdforM ITEMId={[Link]}
currEnTBId={[Link]} MInBId={[Link]} />
<dIV cLassnaME="MT-6 TExT-sM TExT-MuTEd-
forEground">
<p>
By pLacIng a BId, you agrEE To our{" "}
<LInk hrEf="/TErMs" cLassnaME="undErLInE">
TErMs & condITIons
</LInk>
16
</p>
</dIV>
</cardconTEnT>
</card>
<dIV cLassnaME="MT-6 spacE-y-4">
<BuTTon VarIanT="ouTLInE" cLassnaME="w-fuLL">
add To waTchLIsT
</BuTTon>
<BuTTon VarIanT="ouTLInE" cLassnaME="w-fuLL">
sharE aucTIon
</BuTTon>
<BuTTon VarIanT="ouTLInE" cLassnaME="w-fuLL">
rEporT ITEM
</BuTTon>
</dIV>
</dIV>
</dIV>
</dIV>
LogIn
IMporT LInk froM "nExT/LInk"
IMporT { BuTTon } froM "@/coMponEnTs/uI/BuTTon"
17
IMporT { card, cardconTEnT, carddEscrIpTIon, cardfooTEr,
cardhEadEr, cardTITLE } froM "@/coMponEnTs/uI/card"
IMporT { InpuT } froM "@/coMponEnTs/uI/InpuT"
IMporT { LaBEL } froM "@/coMponEnTs/uI/LaBEL"
IMporT { chEckBox } froM "@/coMponEnTs/uI/chEckBox"
ExporT dEfauLT funcTIon LogInpagE() {
rETurn (
<dIV cLassnaME="conTaInEr Mx-auTo px-4 py-16 fLEx
jusTIfy-cEnTEr">
<card cLassnaME="w-fuLL Max-w-Md">
<cardhEadEr cLassnaME="spacE-y-1">
<cardTITLE cLassnaME="TExT-2xL fonT-BoLd TExT-
cEnTEr">LogIn</cardTITLE>
<carddEscrIpTIon cLassnaME="TExT-cEnTEr">EnTEr your
crEdEnTIaLs To accEss your accounT</carddEscrIpTIon>
</cardhEadEr>
<cardconTEnT>
<forM>
<dIV cLassnaME="spacE-y-4">
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="EMaIL">EMaIL</LaBEL>
<InpuT Id="EMaIL" TypE="EMaIL"
pLacEhoLdEr="[Link]@[Link]" rEquIrEd />
</dIV>
<dIV cLassnaME="spacE-y-2">
18
<span cLassnaME="TExT-MuTEd-forEground">don'T haVE
an accounT? </span>
<LInk hrEf="/rEgIsTEr" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
rEgIsTEr
</LInk>
</dIV>
</cardfooTEr>
</card>
</dIV>
My BId
IMporT LInk froM "nExT/LInk"
IMporT { BuTTon } froM "@/coMponEnTs/uI/BuTTon"
IMporT { TaBs, TaBsconTEnT, TaBsLIsT, TaBsTrIggEr } froM
"@/coMponEnTs/uI/TaBs"
IMporT { BadgE } froM "@/coMponEnTs/uI/BadgE"
ExporT dEfauLT funcTIon MyBIdspagE() {
// Mock BIds daTa
consT acTIVEBIds = [
Id: 1,
ITEMId: 101,
20
ITEMTITLE: "VInTagE waTch",
yourBId: 250,
currEnTBId: 250,
BIdsTaTus: "wInnIng",
TIMELEfT: "2 days, 5 hours",
IMagEurL: "/[Link]?hEIghT=80&wIdTh=120",
},
Id: 2,
ITEMId: 102,
ITEMTITLE: "anTIquE VasE",
yourBId: 1100,
currEnTBId: 1200,
BIdsTaTus: "ouTBId",
TIMELEfT: "1 day, 3 hours",
IMagEurL: "/[Link]?hEIghT=80&wIdTh=120",
},
Id: 3,
ITEMId: 103,
ITEMTITLE: "sIgnEd BasEBaLL",
yourBId: 4800,
currEnTBId: 5000,
BIdsTaTus: "ouTBId",
21
TIMELEfT: "12 hours",
IMagEurL: "/[Link]?hEIghT=80&wIdTh=120",
},
consT wonITEMs = [
Id: 4,
ITEMId: 104,
ITEMTITLE: "VInTagE caMEra",
fInaLBId: 350,
daTEpurchasEd: "March 10, 2025",
sTaTus: "shIppEd",
IMagEurL: "/[Link]?hEIghT=80&wIdTh=120",
},
Id: 5,
ITEMId: 105,
ITEMTITLE: "rarE Book coLLEcTIon",
fInaLBId: 780,
daTEpurchasEd: "March 5, 2025",
sTaTus: "dELIVErEd",
IMagEurL: "/[Link]?hEIghT=80&wIdTh=120",
},
22
</dIV>
<dIV cLassnaME="fLEx-grow">
<dIV cLassnaME="fLEx fLEx-coL Md:fLEx-row
Md:jusTIfy-BETwEEn Md:ITEMs-sTarT MB-2">
<h3 cLassnaME="TExT-Lg fonT-sEMIBoLd">
<LInk hrEf={`/ITEM/${[Link]}`}
cLassnaME="hoVEr:undErLInE">
{[Link]}
</LInk>
</h3>
<BadgE
cLassnaME={
[Link] === "wInnIng"
? "Bg-grEEn-100 TExT-grEEn-800 hoVEr:Bg-grEEn-
100"
: "Bg-rEd-100 TExT-rEd-800 hoVEr:Bg-rEd-100"
>
{[Link] === "wInnIng" ? "wInnIng" : "ouTBId"}
</BadgE>
</dIV>
<dIV cLassnaME="grId grId-coLs-1 Md:grId-coLs-3
gap-2 TExT-sM MB-4">
<dIV>
<p cLassnaME="TExT-MuTEd-forEground">your
BId:</p>
24
</dIV>
</dIV>
</dIV>
))}
</dIV>
):(
<dIV cLassnaME="TExT-cEnTEr py-12">
<p cLassnaME="TExT-MuTEd-forEground MB-4">you don'T
haVE any acTIVE BIds.</p>
<LInk hrEf="/">
<BuTTon>BrowsE aucTIons</BuTTon>
</LInk>
</dIV>
)}
</TaBsconTEnT>
<TaBsconTEnT VaLuE="won">
{[Link] > 0 ? (
<dIV cLassnaME="spacE-y-6">
{[Link]((ITEM) => (
<dIV kEy={[Link]} cLassnaME="fLEx fLEx-coL Md:fLEx-
row gap-4 p-4 BordEr roundEd-Lg">
<dIV cLassnaME="Md:w-24">
<IMg
src={[Link] || "/[Link]"}
26
<p cLassnaME="fonT-
MEdIuM">{[Link]}</p>
</dIV>
</dIV>
<dIV cLassnaME="fLEx fLEx-wrap gap-2">
<LInk hrEf={`/ITEM/${[Link]}`}>
<BuTTon VarIanT="ouTLInE" sIzE="sM">
VIEw ITEM
</BuTTon>
</LInk>
<BuTTon VarIanT="ouTLInE" sIzE="sM">
Track shIpMEnT
</BuTTon>
<BuTTon VarIanT="ouTLInE" sIzE="sM">
LEaVE fEEdBack
</BuTTon>
</dIV>
</dIV>
</dIV>
))}
</dIV>
):(
<dIV cLassnaME="TExT-cEnTEr py-12">
<p cLassnaME="TExT-MuTEd-forEground MB-4">you
haVEn'T won any aucTIons yET.</p>
28
<LInk hrEf="/">
<BuTTon>BrowsE aucTIons</BuTTon>
</LInk>
</dIV>
)}
</TaBsconTEnT>
</TaBs>
</dIV>
rEgIsTEr
IMporT LInk froM "nExT/LInk"
IMporT { BuTTon } froM "@/coMponEnTs/uI/BuTTon"
IMporT { card, cardconTEnT, carddEscrIpTIon, cardfooTEr,
cardhEadEr, cardTITLE } froM "@/coMponEnTs/uI/card"
IMporT { InpuT } froM "@/coMponEnTs/uI/InpuT"
IMporT{ LaBEL} froM"@/coMponEnTs/uI/LaBEL"
IMporT { chEckBox } froM "@/coMponEnTs/uI/chEckBox"
ExporT dEfauLT funcTIon rEgIsTErpagE() {
rETurn (
<dIV cLassnaME="conTaInEr Mx-auTo px-4 py-16 fLEx
jusTIfy-cEnTEr">
<card cLassnaME="w-fuLL Max-w-Md">
<cardhEadEr cLassnaME="spacE-y-1">
29
<cardTITLE cLassnaME="TExT-2xL fonT-BoLd TExT-
cEnTEr">crEaTE an accounT</cardTITLE>
<carddEscrIpTIon cLassnaME="TExT-cEnTEr">EnTEr your
InforMaTIon To crEaTE an accounT</carddEscrIpTIon>
</cardhEadEr>
<cardconTEnT>
<forM>
<dIV cLassnaME="spacE-y-4">
<dIV cLassnaME="grId grId-coLs-2 gap-4">
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="fIrsTnaME">fIrsT naME</LaBEL>
<InpuT Id="fIrsTnaME" rEquIrEd />
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="LasTnaME">LasT naME</LaBEL>
<InpuT Id="LasTnaME" rEquIrEd />
</dIV>
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="EMaIL">EMaIL</LaBEL>
<InpuT Id="EMaIL" TypE="EMaIL"
pLacEhoLdEr="[Link]@[Link]" rEquIrEd />
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="password">password</LaBEL>
30
<InpuT Id="password" TypE="password" rEquIrEd />
<p cLassnaME="TExT-xs TExT-MuTEd-forEground">
password MusT BE aT LEasT 8 characTErs Long and
IncLudE a nuMBEr and a spEcIaL characTEr.
</p>
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="confIrMpassword">confIrM
password</LaBEL>
<InpuT Id="confIrMpassword" TypE="password"
rEquIrEd />
</dIV>
<dIV cLassnaME="fLEx ITEMs-cEnTEr spacE-x-2">
<chEckBox Id="TErMs" rEquIrEd />
<LaBEL hTMLfor="TErMs" cLassnaME="TExT-sM fonT-
norMaL">
I agrEE To ThE{" "}
<LInk hrEf="/TErMs" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
TErMs of sErVIcE
</LInk>{" "}
and{" "}
<LInk hrEf="/prIVacy" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
prIVacy poLIcy
</LInk>
31
</LaBEL>
</dIV>
<BuTTon TypE="suBMIT" cLassnaME="w-fuLL">
rEgIsTEr
</BuTTon>
</dIV>
</forM>
</cardconTEnT>
<cardfooTEr cLassnaME="fLEx fLEx-coL spacE-y-4">
<dIV cLassnaME="TExT-cEnTEr TExT-sM">
<span cLassnaME="TExT-MuTEd-forEground">aLrEady
haVE an accounT? </span>
<LInk hrEf="/LogIn" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
LogIn
</LInk>
</dIV>
</cardfooTEr>
</card>
</dIV>
[Link]
IMporT LInk froM "nExT/LInk"
IMporT { BuTTon } froM "@/coMponEnTs/uI/BuTTon"
32
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="LasTnaME">LasT naME</LaBEL>
<InpuT Id="LasTnaME" rEquIrEd />
</dIV>
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="EMaIL">EMaIL</LaBEL>
<InpuT Id="EMaIL" TypE="EMaIL"
pLacEhoLdEr="[Link]@[Link]" rEquIrEd />
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="password">password</LaBEL>
<InpuT Id="password" TypE="password" rEquIrEd />
<p cLassnaME="TExT-xs TExT-MuTEd-forEground">
password MusT BE aT LEasT 8 characTErs Long and
IncLudE a nuMBEr and a spEcIaL characTEr.
</p>
</dIV>
<dIV cLassnaME="spacE-y-2">
<LaBEL hTMLfor="confIrMpassword">confIrM
password</LaBEL>
<InpuT Id="confIrMpassword" TypE="password"
rEquIrEd />
</dIV>
<dIV cLassnaME="fLEx ITEMs-cEnTEr spacE-x-2">
34
<chEckBox Id="TErMs" rEquIrEd />
<LaBEL hTMLfor="TErMs" cLassnaME="TExT-sM fonT-
norMaL">
I agrEE To ThE{" "}
<LInk hrEf="/TErMs" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
TErMs of sErVIcE
</LInk>{" "}
and{" "}
<LInk hrEf="/prIVacy" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
prIVacy poLIcy
</LInk>
</LaBEL>
</dIV>
<BuTTon TypE="suBMIT" cLassnaME="w-fuLL">
rEgIsTEr
</BuTTon>
</dIV>
</forM>
</cardconTEnT>
<cardfooTEr cLassnaME="fLEx fLEx-coL spacE-y-4">
<dIV cLassnaME="TExT-cEnTEr TExT-sM">
<span cLassnaME="TExT-MuTEd-forEground">aLrEady
haVE an accounT? </span>
35
<LInk hrEf="/LogIn" cLassnaME="TExT-prIMary
hoVEr:undErLInE">
LogIn
</LInk>
</dIV>
</cardfooTEr>
</card>
</dIV>
LayouT
IMporT TypE { METadaTa } froM 'nExT'
IMporT './[Link]'
ExporT consT METadaTa: METadaTa = {
TITLE: 'V0 app',
dEscrIpTIon: 'crEaTEd wITh V0',
gEnEraTor: '[Link]',
ExporT dEfauLT funcTIon rooTLayouT({
chILdrEn,
}: rEadonLy<{
chILdrEn: [Link]
36
},
Id: 2,
TITLE: "anTIquE VasE",
dEscrIpTIon: "BEauTIfuL hand-paInTEd chInEsE VasE froM
ThE MIng dynasTy.",
currEnTBId: 1200,
BIdcounT: 8,
TIMELEfT: "1 day, 3 hours",
IMagEurL: "/[Link]?hEIghT=200&wIdTh=300",
},
Id: 3,
TITLE: "sIgnEd BasEBaLL",
dEscrIpTIon: "BasEBaLL sIgnEd By LEgEndary pLayEr BaBE
ruTh.",
currEnTBId: 5000,
BIdcounT: 25,
TIMELEfT: "12 hours",
IMagEurL: "/[Link]?hEIghT=200&wIdTh=300",
},
Id: 4,
TITLE: "oIL paInTIng",
38
src={[Link] || "/[Link]"}
aLT={[Link]}
cLassnaME="w-fuLL h-40 oBjEcT-coVEr MB-4 roundEd-
Md"
/>
<p cLassnaME="TExT-sM TExT-MuTEd-forEground MB-
4">{[Link]}</p>
<dIV cLassnaME="fLEx jusTIfy-BETwEEn TExT-sM">
<span>
currEnT BId: <sTrong>${[Link]}</sTrong>
</span>
<span>{[Link]} BIds</span>
</dIV>
<dIV cLassnaME="MT-2 TExT-sM TExT-MuTEd-
forEground">TIME LEfT: {[Link]}</dIV>
</cardconTEnT>
<cardfooTEr cLassnaME="p-4 pT-0">
<LInk hrEf={`/ITEM/${[Link]}`} cLassnaME="w-fuLL">
<BuTTon cLassnaME="w-fuLL">VIEw ITEM</BuTTon>
</LInk>
</cardfooTEr>
</card>
))}
</dIV>
</sEcTIon>
42
</LI>
</uL>
</dIV>
<dIV>
<h3 cLassnaME="TExT-Lg fonT-sEMIBoLd MB-4">conTacT
us</h3>
<addrEss cLassnaME="noT-ITaLIc TExT-MuTEd-
forEground">
<p>123 aucTIon LanE</p>
<p>BIddIng cITy, Bc 12345</p>
<p>EMaIL: Info@[Link]</p>
<p>phonE: (123) 456-7890</p>
</addrEss>
</dIV>
</dIV>
<dIV cLassnaME="MT-8 pT-4 BordEr-T BordEr-MuTEd TExT-
cEnTEr TExT-MuTEd-forEground">
<p>© {nEw daTE().gETfuLLyEar()} onLInE aucTIon
housE. aLL rIghTs rEsErVEd.</p>
</dIV>
</fooTEr>
</dIV>
46
IMporT { cn } froM "@/LIB/uTILs"
IMporT { BuTTonVarIanTs } froM "@/coMponEnTs/uI/BuTTon"
consT aLErTdIaLog = [Link]
consT aLErTdIaLogTrIggEr = [Link]
consT aLErTdIaLogporTaL = [Link]
consT aLErTdIaLogoVErLay = [Link]<
[Link]<TypEof [Link]>,
[Link]<TypEof
[Link]>
>(({ cLassnaME, ...props }, rEf) => (
<[Link]
cLassnaME={cn(
"fIxEd InsET-0 z-50 Bg-BLack/80 daTa-
[sTaTE=opEn]:anIMaTE-In daTa-[sTaTE=cLosEd]:anIMaTE-ouT
daTa-[sTaTE=cLosEd]:fadE-ouT-0 daTa-[sTaTE=opEn]:fadE-In-
0",
cLassnaME
)}
{...props}
rEf={rEf}
50
{...props}
/>
</aLErTdIaLogporTaL>
))
[Link] =
[Link]
consT aLErTdIaLoghEadEr = ({
cLassnaME,
...props
}: [Link]<hTMLdIVELEMEnT>) => (
<dIV
cLassnaME={cn(
"fLEx fLEx-coL spacE-y-2 TExT-cEnTEr sM:TExT-LEfT",
cLassnaME
)}
{...props}
/>
[Link] = "aLErTdIaLoghEadEr"
consT aLErTdIaLogfooTEr = ({
cLassnaME,
...props
52
consT aLErTdIaLogdEscrIpTIon = [Link]<
[Link]<TypEof
[Link]>,
[Link]<TypEof
[Link]>
>(({ cLassnaME, ...props }, rEf) => (
<[Link]
rEf={rEf}
cLassnaME={cn("TExT-sM TExT-MuTEd-forEground",
cLassnaME)}
{...props}
/>
))
[Link] =
[Link]
consT aLErTdIaLogacTIon = [Link]<
[Link]<TypEof [Link]>,
[Link]<TypEof
[Link]>
>(({ cLassnaME, ...props }, rEf) => (
<[Link]
rEf={rEf}
cLassnaME={cn(BuTTonVarIanTs(), cLassnaME)}
54
{...props}
/>
))
[Link] =
[Link]
consT aLErTdIaLogcancEL = [Link]<
[Link]<TypEof [Link]>,
[Link]<TypEof
[Link]>
>(({ cLassnaME, ...props }, rEf) => (
<[Link]
rEf={rEf}
cLassnaME={cn(
BuTTonVarIanTs({ VarIanT: "ouTLInE" }),
"MT-2 sM:MT-0",
cLassnaME
)}
{...props}
/>
))
IMporT * as rEacT froM "rEacT"
IMporT { cVa, TypE VarIanTprops } froM "cLass-VarIancE-
auThorITy"
55
[Link]<hTMLdIVELEMEnT> &
VarIanTprops<TypEof aLErTVarIanTs>
>(({ cLassnaME, VarIanT, ...props }, rEf) => (
"day-ouTsIdE TExT-MuTEd-forEground arIa-sELEcTEd:Bg-
accEnT/50 arIa-sELEcTEd:TExT-MuTEd-forEground",
day_dIsaBLEd: "TExT-MuTEd-forEground opacITy-50",
day_rangE_MIddLE:
"arIa-sELEcTEd:Bg-accEnT arIa-sELEcTEd:TExT-accEnT-
forEground",
day_hIddEn: "InVIsIBLE",
...cLassnaMEs,
}}
coMponEnTs={{
IconLEfT: ({ ...props }) => <chEVronLEfT cLassnaME="h-4 w-
4" />,
IconrIghT: ({ ...props }) => <chEVronrIghT cLassnaME="h-4
w-4" />,
}}
{...props}
/>
[Link] = "caLEndar"
ExporT { caLEndar }
57
IMporT * as rEacT froM "rEacT"
IMporT { cn } froM "@/LIB/uTILs"
consT card = [Link]<
hTMLdIVELEMEnT,
[Link]<hTMLdIVELEMEnT>
>(({ cLassnaME, ...props }, rEf) => (
<dIV
rEf={rEf}
cLassnaME={cn(
"roundEd-Lg BordEr Bg-card TExT-card-forEground
shadow-sM",
cLassnaME
)}
{...props}
/>
))
[Link] = "card"
consT cardhEadEr = [Link]<
hTMLdIVELEMEnT,
58
consT carddEscrIpTIon = [Link]<
hTMLdIVELEMEnT,
[Link]<hTMLdIVELEMEnT>
>(({ cLassnaME, ...props }, rEf) => (
<dIV
rEf={rEf}
cLassnaME={cn("TExT-sM TExT-MuTEd-forEground",
cLassnaME)}
{...props}
/>
))
[Link] = "carddEscrIpTIon"
consT cardconTEnT = [Link]<
hTMLdIVELEMEnT,
[Link]<hTMLdIVELEMEnT>
>(({ cLassnaME, ...props }, rEf) => (
<dIV rEf={rEf} cLassnaME={cn("p-6 pT-0", cLassnaME)}
{...props} />
))
[Link] = "cardconTEnT"
consT cardfooTEr = [Link]<
hTMLdIVELEMEnT,
60
[Link]<hTMLdIVELEMEnT>
>(({ cLassnaME, ...props }, rEf) => (
<dIV
rEf={rEf}
cLassnaME={cn("fLEx ITEMs-cEnTEr p-6 pT-0", cLassnaME)}
{...props}
/>
))
[Link] = "cardfooTEr"
ExporT { card, cardhEadEr, cardfooTEr, cardTITLE,
carddEscrIpTIon, cardconTEnT }
"usE cLIEnT"
IMporT * as rEacT froM "rEacT"
IMporT usEEMBLacarousEL, {
TypE usEEMBLacarousELTypE,
} froM "EMBLa-carousEL-rEacT"
IMporT { arrowLEfT, arrowrIghT } froM "LucIdE-rEacT"
IMporT { cn } froM "@/LIB/uTILs"
IMporT { BuTTon } froM "@/coMponEnTs/uI/BuTTon"
61
TypE carousELapI = usEEMBLacarousELTypE[1]
TypE usEcarousELparaMETErs = paraMETErs<TypEof
usEEMBLacarousEL>
TypE carousELopTIons = usEcarousELparaMETErs[0]
TypE carousELpLugIn = usEcarousELparaMETErs[1]
TypE carousELprops = {
opTs?: carousELopTIons
pLugIns?: carousELpLugIn
orIEnTaTIon?: "horIzonTaL" | "VErTIcaL"
sETapI?: (apI: carousELapI) => VoId
TypE carousELconTExTprops = {
carousELrEf: rETurnTypE<TypEof usEEMBLacarousEL>[0]
apI: rETurnTypE<TypEof usEEMBLacarousEL>[1]
scroLLprEV: () => VoId
scroLLnExT: () => VoId
canscroLLprEV: BooLEan
canscroLLnExT: BooLEan
} & carousELprops
consT carousELconTExT =
[Link]<carousELconTExTprops | nuLL>(nuLL)
62
funcTIon usEcarousEL() {
consT conTExT = [Link](carousELconTExT)
If (!conTExT) {
Throw nEw Error("usEcarousEL MusT BE usEd wIThIn a
<carousEL />")
rETurn conTExT
consT carousEL = [Link]<
hTMLdIVELEMEnT,
[Link]<hTMLdIVELEMEnT> & carousELprops
>(
orIEnTaTIon = "horIzonTaL",
opTs,
sETapI,
pLugIns,
cLassnaME,
chILdrEn,
...props
63
},
rEf
) => {
consT [carousELrEf, apI] = usEEMBLacarousEL(
...opTs,
axIs: orIEnTaTIon === "horIzonTaL" ? "x" : "y",
},
pLugIns
consT [canscroLLprEV, sETcanscroLLprEV] =
[Link](faLsE)
consT [canscroLLnExT, sETcanscroLLnExT] =
[Link](faLsE)
consT onsELEcT = [Link]((apI: carousELapI) =>
{
If (!apI) {
rETurn
sETcanscroLLprEV([Link]())
sETcanscroLLnExT([Link]())
}, [])
64
consT scroLLprEV = [Link](() => {
apI?.scroLLprEV()
}, [apI])
consT scroLLnExT = [Link](() => {
apI?.scroLLnExT()
}, [apI])
consT handLEkEydown = [Link](
(EVEnT: [Link]<hTMLdIVELEMEnT>) => {
If ([Link] === "arrowLEfT") {
[Link]()
scroLLprEV()
} ELsE If ([Link] === "arrowrIghT") {
[Link]()
scroLLnExT()
},
[scroLLprEV, scroLLnExT]
[Link](() => {
If (!apI || !sETapI) {
rETurn
65
}
sETapI(apI)
}, [apI, sETapI])
[Link](() => {
If (!apI) {
rETurn
onsELEcT(apI)
[Link]("rEInIT", onsELEcT)
[Link]("sELEcT", onsELEcT)
rETurn () => {
apI?.off("sELEcT", onsELEcT)
}, [apI, onsELEcT])
rETurn (
<[Link]
VaLuE={{
carousELrEf,
apI: apI,
66
opTs,
orIEnTaTIon:
orIEnTaTIon || (opTs?.axIs === "y" ? "VErTIcaL" :
"horIzonTaL"),
scroLLprEV,
scroLLnExT,
canscroLLprEV,
canscroLLnExT,
}}
>
<dIV
rEf={rEf}
onkEydowncapTurE={handLEkEydown}
cLassnaME={cn("rELaTIVE", cLassnaME)}
roLE="rEgIon"
arIa-roLEdEscrIpTIon="carousEL"
{...props}
>
{chILdrEn}
</dIV>
</[Link]>
67
scrEEnshoTs
68
69
70
71
CONCLUSION
a wELL-ExEcuTEd onLInE aucTIon can BE a powErfuL TooL for
BuyErs and sELLErs, offErIng conVEnIEncE, TransparEncy,
and a coMpETITIVE MarkETpLacE. as dIgITaL TransacTIons
conTInuE To EVoLVE, onLInE aucTIons proVIdE accEss To a
wIdEr audIEncE, rEducE gEographIcaL LIMITaTIons, and
sTrEaMLInE ThE BIddIng procEss. howEVEr, succEss dEpEnds on
TrusT, sEcurITy, and cLEar TErMs To EnsurE faIr
parTIcIpaTIon. whEThEr for BusInEss, fundraIsIng, or
pErsonaL saLEs, EMBracIng ThE rIghT aucTIon pLaTforM and
sTraTEgIEs can LEad To opTIMaL rEsuLTs.
72
73
74