Skip to main content

Posts

Part-2 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: MongoDB MongoDB Atlas Cloud Service. MongoDB ConnectionString. MongoDB: MongoDB is a document-oriented database, which is classified as a NoSQL database. In MongoDB, tables are called collections, and records are called documents. It stores data in BSON format. The BSON is the binary serialization of JSON. The reading of data from MongoDB is faster when compared to the Relational Database. But MongoDB doesn't have relation between the collections. We can't declare NoSQL is better than SQL or vice-versa. So depending on the application requirement either select NoSQL or SQL  or Both databases. MongoDB Atlas Cloud Service: For our demo to use MongoDB let's use the MongoDB Atlas Cloud Service. (Step 1) Let's go to the MongoDB Atlas website and then signup for 'Free'(Pricing Package). (Step 2) After registration creates a free cluster and next land on the dashboard page as below. (Step 3) Now to create a MongoDB collection(t

Part-1 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are: NestJS And ReactJS Application Communication. NestJS. Create NestJS Application. Debug The NestJS Application From Visual Studio Code. ReactJS Create ReactJS Applicaiton Install React Bootstrap Add React Bootstrap Menu. NestJS And ReactJS Application Communication: The user request the ReactJS application(single page application) then js files are downloaded and then runs the application on the browser. Since ReactJS is a single-page application it depends on API for data to display. So ReactJS request the NestJS endpoint through HTTP requests. NestJS API that runs at the server gives the JSON response. NestJS API communicates with the database for fetching and storing the data. NestJS: NestJS is a framework used to develop the server-side application. NestJS is built on top of the Node.js framework just like Express. It is a combination of Progressive Javascript, Object-Oriented Programming, Functional Programming, and Functional Reactive P

ReactJS(v18) JWT Authentication Using HTTP Only Cookie

In this article, we will implement the ReactJS application authentication using the HTTP-only cookie. HTTP Only Cookie: In a SPA(Single Page Application) Authentication JWT token either can be stored in browser 'LocalStorage' or in 'Cookie'. Storing the JWT token inside of the cookie then the cookie should be HTTP Only. The HTTP-ONly cookie nature is that it will be only accessible by the server application. Client apps like javascript-based apps can't access the HTTP-Only cookie. So if we use the authentication with HTTP-only JWT cookie then we no need to implement the custom logic like adding authorization header or storing token data, etc at our client application. Because once the user authenticated cookie will be automatically sent to the server by the browser on every API call. Authentication API: To authenticate our client application with JWT HTTP-only cookie, I developed a NetJS(which is a node) Mock API. Check the GitHub link and read the document on G

ReactJS(v18) | Zustand State Management Library | CRUD Example

In this article, we will implement a ReactJs(v18) CRUD example by creating state management using the Zustand library. Zustand: The Zustand is a small, fast, and scalable state management library. It is straightforward to use and integrate. Some of its features are: It contains hooks API, so it is very easy to consume in react applications. Support for Async methods. Easily integrate additional middleware like 'immer', 'devtools', etc State can be accessed outside of the react components Easily integrate along with other state management libraries like 'Redux' & 'React Context API'. Create ReactJS Application: Let's create a ReactJS Application to accomplish the demo. npx create-react-app name-of-your-app Configure React Bootstrap Library: Let's install the React Bootstrap library. npm install react-bootstrap bootstrap Now add the bootstrap CSS file reference on 'index.js'. import 'bootstrap/dist/css/bootstrap.min.css';