These are some of my personal projects.
Angular 8 application with .NET Core 3 backend
Site Visits, an Angular 8 application with .NET Core 3 backend that displays tabular data in an Angular Material table. It's built with:
- Angular 8
- ngrx (state, store, effects, actions, reducers)
- Angular Material Table
- Angular Material Paginator with server-side pagination
- routed pagination, i. e. each page is accessible by a route <resource_collection>/<page_number>/size/<page_size>
The data this application displays is a log of website visits, collected by StatCounter, my favorite website statistics tracking application. For a long time I have been downloading visit statistics for my various websites from StatCounter as .csv files. I have imported those CSV files into a database (I wrote a separate program for that), and I wrote this application to read from the database and display that data in ways that are convenient and interesting to me.
The application is currently running at http://elzecode.com/visitsnc3ng/flat-visits . It is pretty barebones at this point, but I'm adding more features to it.
I wrote a couple of blog articles about the problems I overcome while building and deploying it:
Deployment issues that arise if your application runs in a subdirectory, and how to fix them.
Angular 11 application with Angular Material Tree
SkillClusters with Angular 11, Angular Material Tree and @ngrx/data. The data this application displays doesn't make much sense at the moment. It's a work in progress. For now, its purpose is to demonstrate how to get Angular Material Tree to work with @ngrx/data. It uses Angular 11 and @ngrx/data 10.
One of the first challenges you encounter in working with @ngrx/data is that it assumes what your backend API URLs are. It makes an assumption that your URLs use the singular version of the entity name for single entity routes, and plural version of entity names for collection routes. So, it will call GET /user/1 if you want to get a single user, and GET /users/ if you want to get all the users. It also appends a trailing slash. But your backend API routes could be named differently and that might be out of your control as a frontend developer. So as soon as you start working with @ngrx/data you are likely to run into this problem.
There are a couple of similar ways to solve it, and this application shows one of them.
It is deployed here on StackBlitz.
Applications I wrote for the Women Who Code Austin, TX React.js meetup to demonstrate some React.js concepts
Application that demonstrates React.js routes. It is deployed on Vercel here. Its backend runs Express.js. The source code is here.
An application with React.js hooks and redux-thunk that demonstrates how to perform side effects, such as call the backend API, from within the Redux pattern. It is deployed on Vercel here. Its backend runs Express.js. The source code is here.