SquidShop Ecommerce Monorepo

Ocean-themed ecommerce web app connected to microservice architecture backend.

🎥 Demo Video + Project Walk-through

🎯 Project Overview

• Designed modern and responsive frontend with React, Material UI and TypeScript
• Wrote unit, integration, and end-to-end tests with Jest and Cypress
• Developed decoupled microservice architecture backend with RESTful API services and gateway API, running Docker containers
• Secured client and server authentication with JSON Web Tokens (JWT), storing tokens securely in browser HttpOnly cookies
• Managed the MySQL relational and Cassandra NoSQL databases to optimize scaling for each use case
• Automated continuous integration with GitHub Actions, enforcing ESLint code styling, testing, and building Docker images
• Automated scanning for static code and Docker images, tied with Dependabot to prevent known security vulnerabilities

🌐 Links

• Demo website: https://squidshop.netlify.app/
• Demo video: Youtube video
• Video slideshow: Google Slides
• Source code: github.com/spencerlepine/squidshop-ecommerce
• Blog post: https://www.spencerlepine.com/portfolio/squidshop-ecommerce

🏗️ Architecture

⚙️ Setup

Simply clone the repository and run the containers, as long as you have Docker installed.

$ git clone https://github.com/spencerlepine/squidshop-ecommerce.git
$ cd squidshop-ecommerce
$ docker-compose up
# visit localhost:3000 in the browser

📦 Technologies:

• React
• TypeScript
• Cypress
• Jest
• Node.js / Express
• Docker
• GitHub Actions
• MySQL
• Cassandra

🌟 Features

Browse Product Catalog

View the catalog on the landing page. Find on-sale items, search by department, and search all products with sorting options to filter by price, name, or rating.

Create an Account

Sign in or create an account with email/password, authenticating with JWT Tokens and HTTPOnly cookies.

Add to Cart and Place Orders

Store items in cart (persisted on the backend) and track order history for your profile.