Skinet - An Simple E-Commerce App (Udemy Course Project)

Demo: Xucong's Skinet Demo

• Test Account: bob@test.com
• Password: Pa$$w0rd

Showcase

More screenshots can be found in the showcase folder.

Features

• Built with ASP.NET 5 and Angular 12
• Product display
• Shopping cart
• Checkout with Strip
• Order summary

Run the demo project locally

Prerequisites:

• Docker & docker-compose
• .NET 5 SDK
• Node.js 14

Start backend server

• Generate self-signed certificate for the backend project:

  • This can vary from system to system.
  • On Windows:

    dotnet dev-certs https -ep $env:USERPROFILE\.aspnet\https\aspnetapp.pfx -p crypticpassword
    dotnet dev-certs https --trust
    

  • More info can be found here in .NET docs.

• docker-compose up -d

• dotnet watch --project API run

Start frontend project

• cd client
• npm i
• npm start

You should be able to visit https://localhost:4200/

Further enhancement ideas:

• Minify media assets; Use webp for images
• Redesign Home page with static template (instead of a carousel) and improve load time. (Lighthouse score > 90)
  • SSR/SSG the site or just the homepage Attempted. Have a few problems:
    • Not all routes can be pre-rendered cleanly
    • If only the homepage is pre-rendered, when reloading other pages the pre-rendered homepage will appear first and quickly get replaced.
  • Pre-load hero image.
• Add tests
• An inventory system with an admin panel
• A product review system
• The ability to favorite/bookmark products
• Rebuild the client with Vue/Svelte and compare different solutions