Auction Website Save

🛒 A full-stack real-time auction website built using a microservices architecture

Project README

A Full Stack Auction Website

Tech logos

📝 Table of contents

✨ 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

desktop-listings-page desktop-listing-page desktop-dashboard-page desktop-settings-page

💻 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

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

Open Source Agenda is not affiliated with "Auction Website" Project. README Source: JarrodMalkovic/auction-website

Open Source Agenda Badge

Open Source Agenda Rating