I built a CRUD web app with .NET Core and Nuxt.js.
RESTful APIs and a dynamic frontend framework make this a solid choice.
I recently had the opportunity to create a full-stack CRUD application around the idea of apartment rentals. This application allows for users to view (and manage) a list of apartments. Basic feature list is as follows:
- Users can sign up for a new account and log in.
- Users have three different roles: client, realtor, and admin.
- Clients can browse available apartments in a list and on a map.
- Realtors can additionally browse occupied apartments as well as CRUD all apartment data.
- Admins can CRUD all user data.
- Appropriate authentication/authorization on both the frontend and the APIs.
Pretty simple, right? Actually making it took longer than I thought it would, but having done it once I could spin up a new CRUD app in just a couple hours.
Why build this?
Astute readers will note that I have already used Nuxt.js in creating the site you are currently reading. However, I had not yet used it in a true full-stack application, and so I wanted some more practice with it.
A Review of the Tech Stack
Technically, this project is divided into three parts:
Frontend in Nuxt.js
The frontend is a Nuxt.js-based Single Page Application (SPA). Nuxt.js is a Vue.js framework which allows for a convention-based approach to Vue.js development. Additionally, Nuxt.js provides an easy upgrade path from SPA to Server-Side Rendering or Static Site Generation.
I am a fan of Nuxt and how it both adds additional features on the rendering side while making the development experience faster via its conventions. Occasionally there will be an issue due to a lack of documentation, but this should continue to get better with time.
.NET Core REST APIs
The APIs were RESTfully written in C# using .NET Core 3.1 and were developed in Visual Studio 2019. With regards to security and identity, Authentication is handled using a JSON Web Token (JWT) bearer scheme. Authorization is role-based (based on Jason Watmore's solution).
- .NET Core is open source
- Microsoft owns and supports GitHub
- Visual Studio Code is one of the best code editors out there
All this is evidence (albeit anecdotal) which shows that Microsoft is a significant contributor to the overall development community and should not be ignored.
A small negative is that there is not as much flexibility in terms of IDE. While the .NET Core CLI is definitely functional and makes it possible to develop using your IDE/OS of choice, it still feels like a second class citizen. Visual Studio is still the preferred IDE and the examples in the documentation reflect this.
The database is a SQL Server database. Schema and setup is contained in a Visual Studio database project. There are two basic types of objects:
Overall, SQL Server is still a SQL database. If you are familiar with MySQL or PostgreSQL, you will feel comfortable here. For the purposes of this application, we are not going beyond basic CRUD operations, so the basics should be the same.
- Role-based Authorization in Nuxt.js Auth with custom middleware
- Setting up the Vuex store in Nuxt.js for basic CRUD operations
- Using nuxt-gmaps to easily plug into the Google Maps API
- Mobile-friendly responsive design using Vuetify
- Using C# AutoMapper to hide passwords in the API
- Setting up unit testing for .NET Core with xUnit and Moq
- Salting and hashing passwords in the API before storage in the database.
I hope to write more tutorials covering these topics soon!
Ready to Start Your Own?
You can get the source code here. In terms of learning, though, nothing beats writing your own from scratch!