There are various options available today to create a web app, and usually at work, you can't pick up every new framework or technology that pops up. However, we can always experiment with one (or more) and build a hobby project. I've tried creating one such app with Blazor WebAssembly and also write my first article along with it.
Coming back to Blazor, it has two hosting models for the app to run either on a browser or on the server with ASP.NET Core. I want to try build a web app, in the traditional sense that has all client code downloaded in the browser and talks to some REST endpoints, and see how it compares to building such an app using say React.
Of course it is too early to say, but given the browser support and growing tooling, it could get widespread adoption.
Coming to the actual web application, it is a simple mutual funds portfolio tracker. You pick the funds you want to track, enter some details and save it. The app displays basic info like % returns, value trend, top gainers, top losers, ability to add\delete mutual funds and has few graphs. The funds are randomly picked, I'm not an investment expert and this is not investment advice :)
Some details about how the app is structured -
- The data is sourced from https://www.mfapi.in/
- I've picked a few prominent funds from the above website and stored the historical data into a MySQL database. JSON result from the above API source is parsed and the historical data is stored for these funds.
- The app itself is hosted in IIS on Windows 10
- I also have an ASP.NET Core Web API for my REST endpoints, which interfaces between the app and the database. This repo has the scripts for creating tables and inserting some of these funds data into it. Here are couple of screenshots from the app -
- The menu items are specified in the NavMenu.razor file which is included inside the sidebar div of the MainLayout.razor. This menu is responsive, if you resize the browser you can notice that it transforms to a hamburger menu.
- All references for your services and third party components are specified in the _Imports.razor file.
- Pages are the individual pages that are loaded, to which users are routed to based on the menu item that is clicked. Each page has the @page directive and that is the same value mapped in the NavMenu.
- I've made some changes to the app.css in the wwwroot folder to handle styling
- The services should preferably have an interface and the corresponding implementation for each, which I don't have as of now.
Also, the official documentation has some more details on the project structure.
In the second part of this article, I go over some thoughts on development experience and conclude.