Skip to content

A full-stack e-commerce web application for pet owners who want to purchase pet goods.

Notifications You must be signed in to change notification settings

sarah-you/myPets

Repository files navigation

myPets

A full-stack e-commerce web application for pet owners who want to purchase pet goods.

As a cat owner and pet enthusiast, I understand the panic that arises when your pets’ favorite products run out. That’s why I’ve created a one-stop online store with monthly subscriptions, ensuring you never have to worry about running out of essentials again. Browse through the curated selection of high-quality pet products and enjoy a seamless shopping journey.

Link to myPets

https://mypets.azurewebsites.net/

📚 Tech Stack

HTML5 CSS3 Bootstrap JavaScript React NodeJS Express.js Postgres

Tools

Azure NPM Git React Router Nodemon JWT Webpack Babel Figma Behance Visual Studio Code Chrome DevTools

Project Management

GitHub Slack Notion

Other Resources: React Icons, Favicon, Pexels, Pinterest

Features

  • User can browse product pages based on pet types or all products
  • User can click on each product listing and see detailed information
  • User can subscribe by registering via pop-up modal or Account tab on navigation bar
  • User can sign in or sign out after registering
  • User can add items to wishlist/cart after signing in
  • User can click through the images in product details page to see each image for the products
  • User can use the footer to quickly navigate to pages without scrolling back up
  • User can interact with the app on mobile, tablet, or desktop devices

Wireframe (Figma)

myPets Figma

Landing Page -- Carousel, Pop-Up CTA

myPets-overview gif 1

Signed In Account > WishList > Product Details > Add to Cart > Remove Item from Cart

myPets-overview gif 2

Stretch Features

  • Search bar to search products
  • Stripe Payment for full transaction

System requirements for local development

Start postgreSQL database (make sure to stop after completing updates)

sudo service postgresql start

Start server Node.js (ctrl C to quit)

npm run dev

push/merge everything!

Go to Azure tab > Azure subscription 1 > App Services > myPets (right click) > deploy web app