StoreX - .NET 6 FullStack Web Application

StoreX is a FullStack Web Application (WebAPI + Blazor WebAssembly) written in .NET 6 and built with FullStackHero's Boilerplate and MudBlazor Components Library.

It follows Clean Architecture Principles and is composed of two main repositories:

• StoreX .NET 6 WebAPI (Back-end) : A RESTful API that meets Swagger/OpenAPI Specs for CRUD, with non-read API calls secured with JWT. This API also includes MultiTenancy support and Users Authentication.
• StoreX Blazor WebAssembly (Front-end) : A client side WASM application that consumes StoreX API thanks to NSwag Client Service Generator. It uses MudBlazor Components and implements Localization for multilanguage support.

The main purpose of the application is to support the management of a store (or warehouse) as simply as possible.

It allows the user to manage suppliers, orders, stock, customers, projects and deliveries.

The app functions includes alerts for product shortage, and teamwork is also possible because the administrator can control the roles and permissions of each user.

Personal Milestones

The aim of both repositories is to familiarise myself with the creation of a .NET 6 API, and to have a first approach to advanced concepts and implementations such as Clean Coding Standards, JWT, Databases and Multitenancy.

• Integrate my work into a project previously developed and ready for production.
  • Use GitHub Forks and develop on a feature branch.
• Follow Clean Architecture Principles.
• Code First DataBase Creation.
  • AutoSeed Database.
  • Create [1:1], [1:n] and [n:n] relationships.
• Approach to Domain Driven Design.
  • Collaborate with a domain expert to interact with the fundamental concepts of the problem.
  • Create Models, Requests, Specs, Responses (Dtos) and Controllers.
• Master the use of MudBlazor for the creation of components.
• Integrate API and Client togheter with the creation of an autogenerated OpenAPI Client Service.
• Use Azure DevOps for (CI/CD).
• Use Docker for self-host app.
• Tests.
• Record the complete development progress of the application in a CHANGELOG.
• Pushing myself to work in an English-only enviroment.

Getting Started

You can visit the LIVE Demo : StoreX - Store Management made simple

Also, if you are interested in checking the OpenAPI you can do so at the following link: StoreX - OpenAPI

or run the app in local by following next steps:

1. Make sure you have the API running. For that you have to clone StoreX Backend and run it.

   git clone https://github.com/rafitajaen/StoreX-WebAPI.git

   dotnet run --project src/Host

2. Open a new window in your IDE. Then clone StoreX Frontend and run it.

   git clone https://github.com/rafitajaen/StoreX-Blazor-Wasm.git

   dotnet run --project src/Host

3. You can find instructions on your terminal to open the application.

   By default the app is running in https://localhost:5002

4. If you want to access to Swagger

   By default it is in https://localhost:5001/swagger

5. The database is created and seeded automatically during first backend running.

   A superadmin user is also created automatically.

6. You can login directly withour register.

   Click in "FILL ADMINISTRATOR CREDENTIALS" (It is below "SIGN IN" button in Login Page)

7. If you cannot find it, you can fill it by yourself.

   [email protected] - 123Pa$$word! - root

StoreX WebAPI Documentation

The path that an Entity follows to become an Endpoint

Entity <-> Request (DTO) <- Handler (using Specs) -> Response (DTO) <-> EndPoint (Controller)

You can find the implementatios of:

• Entities in src/Core/Domain/Store/
• Requests, Handlers, Specs and DTOs in src/Core/Application/Store/
• Controllers in src/Host/Controllers/Store/

StoreX Database Diagram

As you have read before, the main purpose of the application is to manage a store (or warehouse) in the easiest possible way.

This statement implies that the product is the centerpiece of the project, in this case we will name it StoreProduct.

Annotation: In this project there are two different entities, Product and StoreProduct. The Product entity is a legacy of the original project and is not integrated in StoreX App, so you can ignore it.

We can separate the database design into three different parts:

• Left side: Related to the receipt of StoreProducts from a Supplier, through Orders.
• Central: Related to having the control of the Stock.
• Right side: Related to the Delivery of StoreProducts to a certain Project. Each Project belongs to a certain Customer.

Context, Seeders, and Permissions

In case you need to consult the implementation of the other parts of the API:

• Context in src/Infrastructure/Persistence/Context
• Seeder in src/Infrastructure/Persistence/Initialization/Store
• Permissions in src/Core/Shared/Authorization

StoreX WebAssembly Documentation

User Authentication

StoreX is a multitenant application. This means that all users of the application share a single database between them.

This database is divided into fractions, which we can commonly call Tenants.

Each Tenant will have an administrator. This administrator will be in charge of granting read, write, update and delete permissions to the users.

A user can only access the data belonging to his tenant, through Authentication and Permissions.

In case you need to consult the implementation about Users Authentication:

• /login and /users/self-register in src/Client/Pages/Authentication

In order to provide a demo of the application, you can find a button called "FILL ADMINISTRATOR CREDENTIALS" in /login page, which automatically fills the login form with the credentials of the application's super administrator.

Homepage and Sections

Once the user is authenticated, the sections of the application will be displayed in the drawer (on the left side) depending on the permissions that each specific user has been assigned.

The app has four main sections:

• Start
  • Home
  • Dashboard
• Alerts
  • Stock Alerts
• Store Management
  • Suppliers
  • Warehouse
  • Customers
• Administration
  • Logs
  • Users
  • Roles
  • Tenants

The Start section is related to the user's landing in the application. In Home page you can find a quick guide to start using the app, and other useful links about the project and the authors. You will also find the /dashboard page, where you can check the status of your database and the number of available entities at a glance.

The Alerts section is about products in a state of shortage. With a simple table, the user can quickly see which products in the warehouse need to be re-stocked, depending on the alerts that have been programmed. Alerts can be programmed here and on the warehouse page.

The Store Management section is where the magic happens. On the /suppliers page, the user can manage the Orders of each supplier. On the /warehouse page, the user can control the stock of each Product and set Alarms individually for each product. And finally, on the /customers page. The user can have control over the Deliveries made to each customer's Project.

Finally, in the Administration section, which is only available to users with an Admin Role. Here, you can access the logs, as well as manage users, roles and tenats of the application.

License

This project is licensed with the MIT license.

Credits and Resource Links

I would not have managed to complete this project without the extensive knowledge of experienced colleagues sharing their knowledge out there. The following are items that were especially helpful during the creation of the application.

C#10 and .NET 6 - Modern Cross-Platform Development by Mark J. Price

Complete Blazor and ASP.NET API Development by Trevoir Williams

NET 6 JWT Authentication with example API by Jason Watmore

.NET Blazor Authentication and Role-Based Authentication by Patrick God

ASP.NET Core WebAPI .NET 6 - One to Many Relationships by Teddy Smith

Working with Forks