Auction House

Table of Contents

• Introduction
• Live Demo
• Technologies
• Getting Started
• Architectures
• Design
• Functions
• Features
• Preview
• Epilogue

Introduction

Auction House is a real-time mock bidding website, which provides fast and real-time bidding functions by GraphQL API and Socket.IO. It does not involve any real currencies, trading, bidding, or buying and selling since this project is aimed to demo the web development technologies and practice.

Live Demo

https://auctionhouse-web.netlify.app/
_{Note: the backend server will turn to sleep mode after a period of inactive, please refresh if you encounter a request timeout.}

Technologies

FrontEnd

• NextJS
• TailwindCSS

Backend

• GraphQL
• NestJS
• MongoDB

Other Highlighted Libraries

• Socket.IO
• Apollo-GraphQL
• Cloudinary
• Loadash

Getting Started

npm install
npm run dev

cd backend
npm install
npm start

Open http://localhost:3000 and you will see the page appear.

Architectures

Overview

Design

• Fully Responsive
• Server Side Rendering
• GraphQL API
• Real-time System (WebSocket)

Functions

• Avatar/Icon Upload
• Bidding Item
• Create Item

Features

• Dark/Light Mode
• Scheduled Tasks
• Recent Activity
• Image Upload
• Sorting / Categories

Preview

Desktop View

Real-Time Demo

Phone View

Epilogue

This project is mainly focused on the Real-Time mechanism carried by WebSocket and GraphQL API. It is my first try and a great learning experience. Please feel free to reach out if you have any suggestions!