SkiNet — Full Documentation

A proof of concept online store created with Angular for the frontend, .NET Core for the backend, and Stripe as the payment gateway.

---

Table of contents

1. Introduction
2. Project structure & architecture
3. Prerequisites
4. Local setup — quick start (Docker)
5. Local setup — dev mode (API + Angular separately)
6. Configuration (appsettings, environment variables, Stripe)
7. Database: migrations, seeding, and common tasks
8. Running & debugging
9. CI / Docker compose & production notes
10. Stripe webhooks & payments
11. Troubleshooting — common problems
12. Contributing
13. Useful commands

---

1. Introduction

SkiNet is a proof-of-concept e-commerce application built with .NET 9 (API) and Angular 20 (client). It demonstrates a real-world stack using Entity Framework, Redis caching, Stripe payments, JWT authentication, and Docker for local services.

Use this document as a single-stop guide for getting the app running locally, understanding the architecture, and troubleshooting common issues.

---

2. Project structure & architecture

At a glance (top-level folders):

• API — .NET Web API project (controllers, authentication, payments, data access wiring).
• Core — domain models, interfaces, specifications (business layer abstractions).
• Infrastructure — EF Core DbContext, repositories, data access implementation, migrations.
• client — Angular 20 application (UI).
• docker-compose.yml — local services (SQL Server, Redis).
• skinet.sln — solution file.

Key architectural points:

• Clean-ish architecture: Core (domain) → Infrastructure (persistence) → API (presentation).
• Specification pattern implemented for flexible querying.
• Uses Redis for caching products/listings.
• Stripe integration for payments and webhook handling.

---

3. Prerequisites

• Docker & Docker Compose
• .NET SDK 9
• Node.js (recommended versions noted in repo: ^20.19.0, ^22.12.0, or ^24.0.0)
• Git
• (Optional) mkcert if you want HTTPS for local Angular dev server
• (Optional for payments) Stripe account + Stripe CLI

---

4. Local setup — quick start (Docker)

1. Clone the repo:

git clone https://github.com/TryCatchLearn/skinet.git
cd skinet

2. Restore .NET packages:

dotnet restore

3. Start required services (SQL Server + Redis) via Docker Compose:

docker compose up -d

Ensure you do not have another SQL Server on port 1433 or Redis on 6379.

4. Create API/appsettings.json (see Section 6) and populate the Stripe keys if you want payments to work.

5. Run the API from the API folder:

cd API
dotnet run

6. Browse to https://localhost:5001 (or the port displayed by dotnet run).

---

5. Local setup — dev mode (API + Angular separately)

If you prefer running the Angular app separately (useful for hot reload):

1. In the repo root, install client dependencies:

cd client
npm install

2. Generate or install a local certificate (the repo uses mkcert):

cd client/ssl
mkcert localhost

3. Run API:

cd ../API
dotnet run

4. Run client (in a separate terminal):

cd client
ng serve

Open the client on the default Angular dev server (usually http://localhost:4200) or the HTTPS port if configured.

---

6. Configuration

Create API/appsettings.json with the following structure (replace placeholders):

{
  "Logging": { "LogLevel": { "Default": "Information", "Microsoft.AspNetCore": "Warning" } },
  "StripeSettings": {
    "PublishableKey": "pk_test_REPLACEME",
    "SecretKey": "sk_test_REPLACEME",
    "WhSecret": "whsec_REPLACEME"
  },
  "AllowedHosts": "*"
}

• PublishableKey and SecretKey are from your Stripe account.
• WhSecret is the webhook signing secret from the Stripe CLI when using local forwarding.

Other secrets (DB connection string, JWT keys) are typically defined in the API project configuration (appsettings or secrets manager) — inspect API/Program.cs and the startup wiring.

---

7. Database: migrations, seeding, and common tasks

• Migrations are located in the Infrastructure/API projects depending on how the repo is arranged. Typical commands:

# from the API (or project with DbContext)
dotnet ef migrations add <Name> -s API -p Infrastructure
dotnet ef database update -s API -p Infrastructure

• If you use the included Docker SQL Server, ensure it is running (docker compose up -d) before running database update.

• The project includes seed data and product import scripts (check Infrastructure for seed classes). Running the app may seed on startup.

---

8. Running & debugging

• Use dotnet run for the API (inspect console for URLs).
• Use ng serve for the client.
• For Visual Studio/VS Code, open skinet.sln and run with debugger attached.

---

9. CI / Docker compose & production notes

• docker-compose.yml brings up SQL Server and Redis for local dev.
• For production deployments, move secrets to environment variables or a key vault and configure appropriate production connection strings (Azure SQL, managed Redis).

---

10. Stripe webhooks & payments

• To test webhooks locally, install Stripe CLI and run:

stripe login
stripe listen --forward-to https://localhost:5001/api/payments/webhook -e payment_intent.succeeded

• Copy the whsec_... value printed in the terminal into appsettings.json as WhSecret.

---

11. Troubleshooting — common problems & fixes

• Docker port conflicts: ensure no other service uses ports 1433 (SQL Server) or 6379 (Redis).

• Azure SQL transient error (SqlException 40613): This occurs when Azure SQL is paused/unavailable or the connection is throttled. If you see SqlException 40613:

  • Confirm the database is online in Azure Portal.
  • If using Serverless with auto-pause, resume the DB and restart the App Service.
  • Add retry logic for transient errors or use built-in EF Core resiliency (EnableRetryOnFailure).

• Stripe webhooks not hitting locally: ensure Stripe CLI is forwarding and WhSecret matches the CLI output. Use --forward-to to correct URL.

• Angular HTTPS issues: use mkcert or configure the dev server to accept self-signed certs.

---

12. Contributing

• Fork the repo, create a feature branch, commit, and open a pull request.
• Follow repository code style and add tests for new features.

---

13. Useful commands

git clone https://github.com/TryCatchLearn/skinet.git
dotnet restore
docker compose up -d
cd API
dotnet run
cd client
npm install
ng serve

---

Visuals

HomePage

Register

Login

Shop

Item Details

Cart

Checkout Address Section

Checkout Shipping Option Section

Checkout Payment Section

Checkout Confirmation Section

Order Receipt

Stripe Dashboard Payment Confirmation

Order History

Order History Summary

Search Item

Filter Item Dropdown

Filter Item Result

Sort Item

Shop Admin View

Order List

Filter Order List By Status

View Individual Order

View Individual Order

Refund Payment Order

Stripe Dashboard Refund Confirmation

Contributions

Thanks to Neil Cummings for his .NET Core and Angular course. It gave me the foundation for this project, and I’ve expanded it with my own additions.

• Neil's website
• Neil's courses on Udemy