Technologies used in this course#

Let’s talk about the technologies we’re going to use in this course. In the front end, we will be using React JS which is the most popular JavaScript framework. React is a good choice because it has a faster learning curve if you compare it to other libraries such as Angular. React is backed by Facebook which ensures that it’s not going anywhere.

We will be using React with TypeScript which gives us type safety in compile time. It’s amazing because it simplifies the JavaScript code and makes it easier to read and debug. It supports static typing which means a variable has a defined data type and if you try to change it, it gives you an error. It’s essential because as a developer, we want our code to be organized. It also supports all the latest JavaScript features, so there are no obstructions if you want to take advantage of all the new JavaScript features.

Now let’s talk about Sass. It stands for Syntactically Awesome Style Sheets. If you haven’t heard of it, it is the more advanced version of CSS. It is a preprocessor scripting language that is interpreted or compiled into CSS. In short, it provides us more features than CSS and it’s better for development. You can use variables, operators, placeholders and so much more.

Now for the state management, we will be using Redux toolkit. It gives us all the features of Redux without the boilerplate code redux has. In Redux-toolkit, we have slices, so one component will have one slice which will be responsible for everything; actions, reducers and thunk. They used to exist in different files before, but now all the related code will be centralized.

So, this was what we’re going to use in the client-side. Now let’s talk about our backend. ASP.NET is going to be our protagonist. It has gained so much popularity that it became the most popular backend framework in 2020. It is way faster than any other backend service. Also, it’s considered perfect technology for the enterprise software. Now you can imagine how highly rated this framework is. This is an era of microservices, and if you want to build one of those, ASP.NET is a great option.

We will be using SQLite as our development database. It’s very easy to install and it doesn’t require running any servers which makes the development process very convenient.

I know we can’t use this as a production database, so we will be using Postgres as our production database. Postgres again is a very popular relational database service and most importantly, heroku gives us an option to run postgres database server for free, which means we can host our entire application on the internet without spending a single penny. How cool is that?

Since we're talking about deployment, let’s see where we're hosting our project. Heroku provides some amazing deployment solutions, so we will be deploying our application on Heroku with our database deployed on Postgres. I chose Heroku because it takes only a few commands to take your application to the internet. It also gives us an option to create a free database. There’s a lot more covered in this course, so let’s move on.

Boiler plate code#

Frontend#

In frontend, we will be using React. We will use create-react-app which creates boiler plate code for React application.

Backend#

In backend, we will be using ASP .NET. We will use dotnet webapi which creates boiler plate code for .Net application.

What we will do in each module#

Below is the information related to each module.

Module 1: Preparing our server#

We begin working on building the Learnify application by first creating our backend server and reviewing the project files. We will create our first running API endpoint as well. How is this divided?

• Creating WebAPI project using Dotnet CLI.

• Reviewing all the project files and discuss their functionality.

• Creating our first Course Modal.

• Discuss Entity Framework and implement it in our project.

• Setting up our database and seeding data.

• Adding our first controller.

Module 2: Setting up our client#

After setting up our backend environment, we are ready to start working on our frontend. We will be initializing our React project and reviewing the project files. We will also create navigation panel and create course component.

• Setting up and reviewing React project.

• Refreshing React concepts.

• Installing SASS and React Router.

• Installing Axios and making API call.

• Creating Navbar and Course component.

Module 3: Using Repository pattern#

In this module, we are going to introduce repository pattern which is a widely used design pattern. You will learn how to add interfaces and repositories, how to work with eager loading, and how to shape data.

• Adding Interfaces and repositories.

• Implementing Repository interfaces.

• Adding configuration to the migration.

• Adding Eager loading.

• Shaping data using Automapper.