ChatClient
Instant-Messenger Chat Client built with ASP.NET 6 and Angular 13
Install / Use
/learn @andriwandres/ChatClientREADME
⚡ ChatClient 💬
<!-- Badges -->
Instant-Messenger Chat Client that is built ontop of ASP.NET Core 6 and Angular 13. It leverages design patterns such as CQRS and Domain-Driven-Design.
<!-- Table of contents -->📜 Table of Contents
<br/> <!-- How to setup application -->🎯 Getting started
Here's how you get this application running on your system.
✅ Prerequisites
Before launching the application, make sure that the below listed criterias are met.
Angular
For running the Angular application, you need a Node.js version of at least 16.14.x or higher. Also, make sure you have the latest version of the Angular CLI installed (13.2.6 or higher).
npm install -g @angular/cli
After installing the Angular CLI, you can also install the remaining dependencies required for this project.
# Navigate to the angular app's root directory
cd ChatClient/Presentation/Client/Presentation.Client
# Install dependencies
npm install
.NET Core
For running the ASP.NET Core application that serves the back-end, a .NET Core SDK of Version 6.0.0 or higher is required. Alternatively, you can install Visual Studio 2019, which already ships with the required SDKs and lets you run the application seemlessly.
🔨 Running the application
You can open the solution file in Visual Studio 2022 and Run the startup project Presentation.Api in order to start the back-end application.
If you prefer using the dotnet CLI for running the application. Use the following commands in your command-line:
# Navigate to the startup project
cd ChatClient/Presentation/Api/Presentation.Api
# Start up the application
dotnet run
This should result in a new browser window displaying the Swagger documentation for the REST API. Also it should create a new SQL Server database on your personal LOCALDB server instance with all the necessary tables. If you cannot work with SQL Server, switch to another database provider like PostgreSQL or MySQL and run the application again.
After the back-end is up and running, you can open your command line and execute following commands to bootstrap the Angular front-end:
# Navigate to the Angular app's root folder
cd ChatClient/Presentation/Client/Presentation.Client
# Run the application
ng serve --open
This will open a new browser window on localhost:4200 with the served Angular application.
🧪 Testing
Content will follow soon...
<br/> <!-- Technology listing -->⚙ Technologies
The following section lists the major technologies, frameworks and libraries used inside of this repository.
💥 Back-End
<code><img height="50" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/csharp/csharp.png"></code> <code><img height="50" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/dotnet/dotnet.png"></code> <code><img height="50" src="https://raw.githubusercontent.com/github/explore/96943574ba0c0340ba6ea1e6f768e9abe43e34e1/topics/sql-server/sql-server.png"></code>
The back-end is built ontop of the .NET Core ecosystem and serves as a web API with a purely RESTful design. It utilizes design patterns such as CQRS and Domain-Driven-Design. For realizing chat-like functionality, it also uses web sockets for Server-To-Client communication. The database provider of choice is SQL Server. For querying and mutating database records, the Object-relational mapper Entity Framework Core is used.
- ASP.NET Core (RESTful Web API)
- EF Core (ORM)
- SignalR (Web Socket)
- MediatR (CQRS)
- Swagger (Open API)
- SQL Server (Database)
- xUnit (Testing)
💥 Front-End
<code><img height="50" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/angular/angular.png"></code> <code><img height="50" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png"></code> <code><img height="50" src="https://raw.githubusercontent.com/github/explore/96943574ba0c0340ba6ea1e6f768e9abe43e34e1/topics/javascript/javascript.png"></code> <code><img height="50" src="https://raw.githubusercontent.com/github/explore/96943574ba0c0340ba6ea1e6f768e9abe43e34e1/topics/sass/sass.png"></code>
The front-end is built as a Single-Page-Application using the Angular Framework from Google. It uses a state management solution similar to Redux for persisting local state. The design pattern follows mostly Google's material design, with a few exceptions here and there.
- Angular (SPA Framework)
- JavaScript/TypeScript (Interpreter/Transpiler)
- NGRX (State Management)
- Jasmine (Testing)
