Git Product home page Git Product logo

auction-website's Introduction

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 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/smartman1234/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

auction-website's People

Contributors

awfuldarkness0110 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.