1. Introduction
2. Technologies
3. Development
4. Basic -> Dark-Mode | Google-Auth | Chat
5. Games -> TicTacToe

This repository contains the website https://suadin.de/ which based on Blazor WebAssembly with aim to use it as sandbox to practise full-stack-developer topics outside of restricted environments.

• Blazor WebAssembly: project template, run .NET C# code on client, less server communication
• SignalR: bidirectional communication between client and server
• Bootstrap: responsive design
• Open Iconic: icon set

• choco install visualstudio2019community, ensure .NET 5 is installed, ensure ASP.NET and .NET core features are enabled
• choco install docker-for-windows, ensure virtualization (in bios) is enabled, ensure docker run -d -p 80:80 docker/getting-started works, run docker
• choco install gitkraken (optional), good tree-overview and diff-tool
• run website: clone project, open visual studio, add credentials
  • dotnet user-secrets set "Authentication:Google:ClientSecret" "client_secret"
• run as docker, start of container is already configured [source]
• expect browser opens https://localhost:8443/
• build & deploy: push changes on main branch and expect https://suadin.de/ gets changes [details]

1. create css variables for dark/light mode [source]
2. you can select theme on operating system, for example in windows 10 [source]
3. use @media(prefers-color-scheme): dark|light|no-preference to use theme from operating systems settings in website [source]

1. Setup Server Project [source]
   • add website url https://suadin.de for prod, https://localhost:8443 for development
   • add callback url https://suadin.de/authentication/login-callback for prod, https://localhost:8443/authentication/login-callback for development
   • set Client-ID into appsettings.json
   • set Client-Secret into user secrets for development [source], into docker environment varibales for prod [details]
2. Setup Client Project [source]
3. Use auth feature by example [source]
   • HTML keywords: <AuthorizeView> (parent), <Authorized> (only authenticated), <NotAuthorized> (only anonymous)
   • HTML user name: @context.User.Identity.Name
   • C# user name: [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; } -> (await AuthState).User.Identity.Name;

TODO: needs refactoring! [source]

TODO