Architecting an ASP.NET Core Angular Application for fetching stockquote information of a given vendor
Implementation details:
- All vendors (Netflix and Apple) are fetched from VendorRepository and displayed in Angular MatTable
- There are 2 filters on the screen, one for filtering by vendor name and the other one is filtering by vendor symbol
- Each line contains an extra column to fetch the stock quote information by symbol. When clicked, Angular dialog box is opened and stockquote information is fetched.
- Depending on the file extension the import strategy is decided. Thus stock quote information by vendor symbol is either fetched from a csv file or json file
The project structure is described below: AspNetAngularApp
- AspNetAngularApp.Api (Contains controllers, mappers, ViewModels, StartUp)
- AspNetAngularApp.Core (Contains Models and Interfaces for Strategy,factory and reposity patterns)
- AspNetAngularApp.Data (Contains repository and strategy pattern implementations, csv and json files)
- AspNetAngularApp.Extensions (Contains import strategy picker implementation and vendor factory to fetch stock quote of vendor)
- AspNetAngularApp.UI (Contains Angular files. ClientApp > src > app contains required code to implement Material design) AspNetAngularApp.Tests
- ControllerTests (XUnit tests with FluentAssertions and Moq library)
- IntegrationTests (Xunit tests with TestServer)
Technology stack:
- .netcore 3.1
- Angular Material Design (Angular version 13.1.4)
- Angular Mattable
- Xunit with FluentAssertions and Moq for testing
- TestServer for integration testing
- Strategy design pattern for deciding whether import from a csv or json
- Repository pattern to create and fetch vendor information
- factory pattern to get the right stock quote service by vendor
- SwaggerUI to display and test endpoints
- Automapper to map from model to viewmodel