A Full Stack Auction Website

📝 Table of contents

• Features
• Architecture
• Screenshots
• Technologies
• About this Project
• Local Development
• License

✨ Features

• Real-time bidding on auction listings between users using Socket.IO
• Server-Side Rendering using React and Next.js
• Styled frontend using Tailwind CSS with Emotion Styled Components
• Automated testing suites for each microservice
• Handles payments using the Stripe API
• Shares common code among services using a custom npm package

🏛️ Architecture

Diagram

Overview of services

Service	Technologies	Description
Auth	TypeScript, MySQL	Handles user regristration, logging in, signing out and resetting users passwords
Bids	TypeScript, MySQL	Handles users placing bids on auction listings and allows for real-time bidding using Socket.io
Email	TypeScript	Allows other services to send emails to users by publishing EmailCreated events
Expiration	TypeScript, Redis	Expires auction listings once they have ran out of time remaining on the listing
Frontend	TypeScript, React, Next.js	Handles serving the website to the user utilizing Server Side Rendering using React with Next.js
Listings	TypeScript, MySQL	Allows users to create and delete auction listings
Payments	TypeScript, MySQL	Allows users to pay for auction listings they have won
Profile	TypeScript, MySQL	Allows users to get a users profile or update their own

📸 Screenshots

💻 Technologies

Back-end

• Node.js - Runtime environment for JS
• Express.js - Node.js framework, makes process of building APIs easier & faster
• MySQL - An open-source relational database management system
• Sequelize - A promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server
• Cloudinary - For image uploading and manipulation
• Docker - A platform for developing, shippinh and running applications
• Kubernetes - An open-source system for automating deployment, scaling, and management of containerized applications
• Ingress NGINX - NGINX Ingress Controller for Kubernetes
• Skaffold - Handles the workflow for building, pushing and deploying applications
• Stripe - Online payment processing for internet businesses
• Jest - A JavaScript testing framework

Front-end

• ReactJS - Frontend framework
• Next.js - React framework that enables server-side rendering
• Tailwind CSS - A utility-first CSS framework
• Emotion - CSS-in-JS library designed for high performance style composition
• Formik - React framework for building forms
• Yup - A form validation library

📙 About this Project

This project is a rewrite of a previous monolithic auction website I wrote. The repository for my monolithic auction website can be found here. The purpose of this rewrite was to gain experience utilizing a microservices architecture after completing Stephen Griders course on Microservices.

🚀 Local Development

Clone the respository locally

git clone https://github.com/jarrodmalkovic/auction-website.git

Edit your hosts file

• Add the following line to your hosts file (https://phoenixnap.com/kb/how-to-edit-hosts-file-in-windows-mac-or-linux)

127.0.0.1 auctionweb.site

Install ingress-nginx

kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v0.44.0/deploy/static/provider/cloud/deploy.yaml

Create the required kubernetes secrets

• Create the JWT_KEY secret

kubectl create secret generic jwt-secret --from-literal=JWT_KEY=<Your Secret Here>

• Create the MYSQL_ROOT_PASSWORD secret

kubectl create secret generic mysql-root-password-secret --from-literal=MYSQL_ROOT_PASSWORD=<Your Secret Here>

• Create the EMAIL secret

kubectl create secret generic email-secret --from-literal=EMAIL=<Your Secret Here>

• Create the EMAIL_PASSWORD secret

kubectl create secret generic email-password-secret --from-literal=EMAIL_PASSWORD=<Your Secret Here>

• Create the STRIPE_KEY secret

kubectl create secret generic stripe-secret --from-literal=STRIPE_KEY=<Your Secret Here>

• Create the CLOUDINARY_API_KEY secret

kubectl create secret generic cloudinary-api-key-secret --from-literal=CLOUDINARY_API_KEY=<Your Secret Here>

• Create the CLOUDINARY_CLOUD_NAME secret

kubectl create secret generic cloudinary-cloud-name-secret --from-literal=CLOUDINARY_CLOUD_NAME=<Your Secret Here>

• Create the CLOUDINARY_API_SECRET secret

kubectl create secret generic cloudinary-api-secret-secret --from-literal=CLOUDINARY_API_SECRET=<Your Secret Here>

Start skaffold

skaffold dev

Open the project in your browser

• The project will now be available locally on the domain auctionweb.site in your browser. If you are using Google Chrome you may have to type "thisisunsafe" while on the page to bypass a security warning

⚖️ License

This project is licensed under the Unlicense License