SoccerPong

SoccerPONG

A Pong clone to explore the development process of a real-time interactive Web App using ASP.NET Blazor WebAssembly.

Play Online

https://mdeclerk.github.io/SoccerPong

To automatically deploy to GitHub Pages using GitHub Actions I followed this awesome tutorial.

Play Locally

1. Install Microsoft .NET SDK 6.0

2. Clone Project from GitHub

3. Start Host from CLI (in Project Root Folder)

   $ dotnet run

4. Play in Browser: http://localhost:5000

Play from Docker Container w/ NGINX as web server

1. Install Docker Desktop

2. Clone Project from GitHub

3. Run as Docker Service (in Project Root Folder):

   $ docker-compose up -d

4. Play in Browser: http://localhost:5000

Helpful information about containerizing BlazorWASM apps can be found here.

Code Layout

• Views/ contains front-end UI using Blazor components

  • Views/Components/ contains reusable UI components
  • Views/Pages/ contains routable pages

• Services/ contains back-end game related objects implemented as ASP.NET services managed by dependency injection system

• wwwroot/ contains static web files e.g. css, images, and bootstrap5 front-end toolkit

Dependencies

• Blazored.LocalStorage Used to load/save game options to browsers local storage.