Tech Seeker

The main objectives of this article are: Create an API endpoint to fetch all records Create ReactJS component to display all records Create 'SuperVillain' Controller In API Project: A Controller is an entity or class that contains logical methods or function that gets executed for an HTTP request from the clients. Let's create a controller 'SuperVillianController.cs'. API_Project/Controllers/SuperVillianController.cs: using Microsoft.AspNetCore.Mvc; using ReactDemo.API.Data; namespace ReactDemo.API.Controllers; [ApiController] [Route("[controller]")] public class SuperVillainController : ControllerBase { private readonly ReactJSDemoContext _reactJSDemoContext; public SuperVillainController(ReactJSDemoContext reactJSDemoContext) { _reactJSDemoContext = reactJSDemoContext; } } (Line: 6) The 'ApiController' attribute applies all API rules to the controller. (Line: 7) The 'Route("[controller]")' attribute

The main objectives of this article are: .Net6 Web API Install .NET6 SDK Create .Net6 Web API Application Entity Framework Core  Install Entity Framework Core NuGet SQL Connectionstring Setup Entity Framework Core Database Context .NET6 Web API: Web API is a framework for building an HTTP service that can be accessed by any client like a browser  mobile devices, and desktop apps. In simple terminology API(Application Programming Interface) means an interface module that contains a programming function that can be requested via HTTP calls to save or fetch the data for their respective clients. Some of the key characteristics of API are: Supports HTTP verbs like 'GET', 'POST', 'PUT', 'DELETE', etc. Supports default responses like 'XML', and 'JSON'. Also can define custom responses. Supports self-hosting or individual hosting, so that all different kinds of apps can consume it. Authentication and Authorization are easy to implement. The ide

The main objectives of this article are: Creating React JS(v18) Application. Install React JS Bootstrap Add Bootstrap Menu Create React JS Application: To create a React JS application our local machine should contain NodeJS. So go to "https://nodejs.org/en/download/". Command to create the ReactJS application. npx create-react-app my-app Command to run and start the ReactJS server. npm start Let's go through the project and explore important files. index.html:  Inside the public folder we can see the index.html. Only the HTML file of the entire ReactJS application. It contained a 'div' element whose 'id' value is 'root', inside of this element all ReactJS components get rendered. index.js: Entry javascript file for ReactJS. It helps paint 'App' component content in 'index.html'. App.js: The 'App.js' react component. It returns the 'JSX'(Javascript XML) content(JSX means writing HTML code inside of javascript dir

The main objective of the article are: .Net 6 Web API And React (V18) Application Communication Install SQL Server And SQL Management Studio Create A SQL Database Create A SQL Database Table .Net6 Web API And React(V18) Application Communication: User requests the React JS application(single page application) then js files are downloaded and then runs the app on the browser. Since React JS is a single-page application, it depends on API for data to display. API runs at the server that gives JSON response. API communicates with the database for fetching the data. Install The SQL Server And SQL Management Studio: First, install the SQL server on our local machine. So go to "https://www.microsoft.com/en-in/sql-server/sql-server-downloads" and then install the developer version which is accessible and fully functional. Next, install the SSMS(SQL Server Management Studio) IDE at "https://docs.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-

In this article, we will implement authentication routing guards and also implement interceptors to invoke the refresh token API. Click here for part-1 angular jwt token authentication & refresh token . Route Guards: In our current sample, we have an issue with the navigation that is like after login user can access the login page which is not correct, and without login can access the 'fav-movies' page. So we can correct this issue by integrating the routing guards. Let's create a routing guard service like 'AuthGuard'. ng generate class shared/auth/auth-guard --skip-tests src/app/shared/auth/auth-guard.ts: import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree, } from '@angular/router'; import { Observable } from 'rxjs'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate { constructor(priv

In this article, we are going to implement JWT(JSON Web Token) authentication in the Angular(v14) application. We also understand how to use the Refresh Token when the JWT Access Token expires. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 informative parts: Header Payload Signature Create An Angular(v14) Application: Let's create an Angular(v14) application to accomplish our demo. Command To Create Angular App ng new name_of_your_project Let's install the bootstrap package npm install bootstrap@5.2.0 Configure the bootstrap CSS and JS file reference in 'angular.json'. Now let's add the bootstrap menu in 'app.component.html'. src/app/app.component.html: <nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <a class="navbar-brand" routerLink="/">Jwt Auth Demo</a> </div> </nav