A REST API (Representational State Transfer Application Programming Interface) is an architectural style for designing networked applications. It's a way for different software systems to communicate with each other over a network (typically the internet) in a standardized and stateless manner. &nbsp;Think of it like ordering food at a restaurant:<ul><li>You (the Client): Send a request to the waiter (the API). &nbsp;</li><li>The Waiter (the API): Takes your order and communicates it to the kitchen (the Server). &nbsp;</li><li>The Kitchen (the Server): Processes your request. &nbsp;</li><li>The Waiter (the API): Brings you back your food (the Response). &nbsp;</li></ul>Key Principles of REST:REST is based on a few core principles that define how the communication should work: &nbsp;<ol><li>Client-Server: There's a clear separation between the client (the application making the request) and the server (the application providing the resources). This allows them to evolve independently. &nbsp;</li><li>Stateless: Each request from the client to the server must contain all the information needed to understand the request. The server does not store any client context between requests. This makes the system more reliable and scalable. Imagine the waiter doesn't remember your previous orders; you have to tell them everything each time. &nbsp;</li><li>Cacheable: Responses from the server should indicate whether they can be cached by the client or intermediary servers. This improves performance by reducing the need to repeatedly fetch the same data. &nbsp;</li><li>Layered System: The client doesn't need to know if it's directly connected to the end server or to an intermediary. This allows for the introduction of load balancers, proxies, and other layers without affecting the client. &nbsp;</li><li>Code on Demand (Optional): Servers can optionally provide executable code to the client. This is less common but allows for extending client functionality. &nbsp;</li><li>Uniform Interface: This is the most crucial principle and encompasses several aspects:<ul><li>Identification of Resources: Each piece of data or functionality exposed by the server is treated as a "resource" and is uniquely identified by a URL (Uniform Resource Identifier). For example, <code>/users</code>, <code>/products/123</code>. &nbsp;</li><li>Manipulation of Resources Through Representations: Clients don't interact directly with the server's internal data. Instead, they exchange representations of these resources. Common formats include JSON (JavaScript Object Notation) and XML. &nbsp;</li><li>Self-Descriptive Messages: Each message (request and response) should contain enough information to be understood. For example, using standard HTTP methods like <code>GET</code>, <code>POST</code>, <code>PUT</code>, and <code>DELETE</code> to indicate the desired action. &nbsp;</li><li>Hypermedia as the Engine of Application State (HATEOAS): The API should provide links within its responses that allow clients to discover available actions and related resources. This makes the API more self-discoverable and less reliant on hardcoded URLs.</li></ul></li></ol>Common Characteristics of REST APIs:<ul><li>Uses Standard HTTP Methods: REST APIs leverage standard HTTP methods to perform actions on resources:<ul><li><code>GET</code>: Retrieve a resource.</li><li><code>POST</code>: Create a new resource.</li><li><code>PUT</code>: Update an existing resource.</li><li><code>DELETE</code>: Remove a resource. &nbsp;</li><li>Other less common methods like <code>PATCH</code>, <code>OPTIONS</code>, etc.</li></ul> &nbsp;</li><li>Resource-Based URLs: URLs are designed to represent the resources being accessed. They are typically nouns rather than verbs (e.g., <code>/users</code> instead of <code>/getUser</code>). &nbsp;</li><li>Data Formats: REST APIs commonly use lightweight data formats like JSON for request and response bodies, although XML is also sometimes used. &nbsp;</li><li>Stateless Communication: As mentioned earlier, each request is independent and doesn't rely on any previous interactions. &nbsp;</li></ul>Benefits of Using REST APIs:<ul><li>Simplicity: REST is relatively easy to understand and implement compared to some other API styles. &nbsp;</li><li>Scalability: The stateless nature of REST makes it highly scalable. &nbsp;</li><li>Flexibility: REST APIs can handle various data formats and can be used with different types of clients (web browsers, mobile apps, other servers). &nbsp;</li><li>Interoperability: They are widely adopted and can be easily consumed by different programming languages and platforms. &nbsp;</li><li>Cacheability: The ability to cache responses improves performance and reduces server load. &nbsp;</li></ul>In summary, a REST API is a way for applications to communicate over a network using standard web protocols (primarily HTTP) by exchanging representations of resources in a stateless manner. It's a widely used architectural style for building web services due to its simplicity, scalability, and interoperability.

An article explaining the definition of REST Architecture with examples explaining the working & key components.

What is the concept of REST API

Working demo - Watch videoclone this repository to work in localbug report? feel free to create an issueRequirements to run this on local machine<ul><li>Python - for backend</li><li>Ollama - to use LLM on Local</li><li>Docker - to run Qdrant storage</li><li>Nodejs - for frontend &amp; backend</li><li>Qdrant Docker Image</li></ul>Run this command to run docker image<pre><code>docker run -p 6333:6333 -p 6334:6334 \
 -v $(pwd)/qdrant_storage:/qdrant/storage:z \
 qdrant/qdrant
</code></pre>Backend Setuppull llm from ollama<pre><code>ollama pull gemma:2b
ollama pull nomic-embed-text
</code></pre>run ollama<pre><code>ollama serve
</code></pre>PYTHON BACKEND<blockquote>Note:- website module is in development</blockquote>Install dependencies<pre><code>pip install pypdf qdrant_client sentence_transformers langchain_community langchain
</code></pre>run backend<pre><code>python cool_api
</code></pre>NODEJS BACKENDInstall dependencies<pre><code>pnpm install
</code></pre>run backend<pre><code>pnpm dev
</code></pre>backend should be running on http://localhost:3009. open http://localhost:3009 in browser &amp; you should get this result<pre><code>{
 "data": "server says : get request on time : 11:39:49"
}
</code></pre>now your backend is ready!Package version used in python<ol><li>PyPDF2 - v3.0.1</li><li>qdrant-client - v1.7.3</li><li>sentence_transformers - v2.2.2</li><li>langchain_community - v0.0.21</li><li>langchain - v0.1.8<blockquote>If there is braking changes in newer version make sure to match the version</blockquote></li></ol>Frontend Setupinstall dependencies &amp; run the app<blockquote>website module not ready for frontend</blockquote><pre><code>cd frontend
pnpm install
pnpm dev
</code></pre>Give it star ⭐️Thank you

This documentation describe how you can create a RAG app to intereract with a PDF document

PDF Rag App - Ollama, Qdrant & Langchain documentation

In this article we will implement Biometric Authentication using SimpleWebAuthn on React App & Express with typescript. You will be guided to implement it in localhost.

Implementation of Web Biometric Authentication (SimpleWebAuthn).

<h1>knowledgebase</h1><h2>Features</h2>It is basically a RAG App. In this app you can upload your Website &amp; Documents and have conversation.Checkout this demo:- https://knowledgebase-8u9.pages.dev/chat<h2>For Developers</h2>Directories <code>/api</code> - Express js app backend to handle documents parsing &amp; website parsing. <code>/ewc</code> - Botpress v12 chat embedding example for websites integration. (embedded web chat) <code>/ui</code> - Web ui to upload documents &amp; website + Chat<h2>Technical process</h2>Data Preparation<ol><li>Extracting text out of documents. Get html of the website &gt; cleaning html document &gt; extracting text &gt; cleaning text.</li><li>Embedding text to vectors with Gemini text embedding api.</li><li>Storing embedded vectors to Qdrant Vector store.</li></ol>Conversation<ol><li>Creating a function to get relevant information from vector store. Write function definition of the function &amp; feed to the LLM.</li><li>Prompt engineering the LLM to behave in a particular way &amp; handle basic queries like greeting without searching database.</li><li>From here LLM will handle the conversation.</li></ol>Handling complex queries / Fine tuningworking on it....

Explore the enhanced capabilities of a V2 full-stack Retrieval-Augmented Generation (RAG) application integrated with a knowledgebase for improved AI-powered interactions.

V2 Full stack RAG app with knowledgebase

In order to quickly style your HTML or React components without creating unique CSS, Tailwind CSS is a utility-first CSS framework that offers a number of pre-defined utility classes.There are no additional libraries required to use Tailwind CSS with React components. Take these actions:Using Create React App or your preferred configuration, start a new React project.Install the dependencies for Tailwind CSS. Npm or yarn can be used for this: Using npm:<pre><code class="language-bash">npm install tailwindcss</code></pre>Using yarn:<pre><code class="language-bash">yarn add tailwindcss</code></pre>Create a Tailwind CSS configuration file. This can be done by using the following command, which creates a tailwind.config.js file in the root directory of your project:<pre><code class="language-bash">npx tailwindcss init</code></pre>Add or change the utility classes you want to utilize in tailwind.config.js as necessary.<pre><code class="language-javascript">module.exports = {
 theme: {
 screens: {
 sm: "480px",
 md: "768px",
 lg: "976px",
 xl: "1440px",
 },
 colors: {
 "blue": "#1fb6ff",
 "pink": "#ff49db",
 "orange": "#ff7849",
 "green": "#13ce66",
 "gray-dark": "#273444",
 "gray": "#8492a6",
 "gray-light": "#d3dce6",
 },
 fontFamily: {
 sans: ["Graphik", "sans-serif"],
 serif: ["Merriweather", "serif"],
 },
 extend: {
 spacing: {
 "128": "32rem",
 "144": "36rem",
 },
 borderRadius: {
 "4xl": "2rem",
 }
 }
 }
}</code></pre>You may import Tailwind CSS right into your React components or your main CSS file:<pre><code class="language-javascript">@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";</code></pre>use Tailwind CSS utility and create stunning componentsNow Create a Button componentCreate a new file called <code>Button.js</code> in the <code>src/components</code> directory and define your own custom button component:<pre><code class="language-javascript">import React from "react";

const Button = ({ children, onClick, className }) =&gt; {
 return (
 &lt;button
 onClick={onClick}
 className={`bg-blue-700 hover:bg-blue-500 text-white font-bold py-5 px-5 rounded ${className}`}
 &gt;
 {children}
 &lt;/button&gt;
 );
};

export default Button;</code></pre>The text-white, font-bold, py-5, px-5, rounded, hover:bg-blue-500, bg-blue-700 and rounded Tailwind CSS classes are used to decorate the button in this component. In order to enable the insertion of additional custom classes as needed, we additionally use the className prop. In your App utilize the button component.<pre><code class="language-javascript">import React from "react";
import Button from "./components/Button";

function App() {
 return (
 &lt;div className="container mx-auto pt-8 text-center"&gt;
 &lt;h1 className=”font-bold”&gt; Welcome to My First Talwind Integrated App&lt;/h1&gt;
 &lt;Button onClick={() =&gt; alert("Button clicked!")}&gt;Click Me&lt;/Button&gt;
 Click Me Too
 &lt;/Button&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre>Adding or changing the Tailwind CSS classes in the Button component will allow you to further alter the button styles. You can alter padding, apply hover effects, add box shadows, modify the colors, and many other things. To meet your design needs, Tailwind CSS offers a large selection of utility classes.

In order to quickly style your HTML or React components without creating unique CSS, Tailwind CSS is a utility-first CSS framework that offers a number of pre-defined utility classes.

How to use Tailwind with React and create stunning components


In the world of blockchain technology, Solana is one of the fast-growing ecosystems. It's a high-performance blockchain that can handle thousands of transactions per second with low transaction fees. With the increasing adoption of Solana, developers are building decentralized applications and tools on top of it. One of the essential features of these tools is the ability to fetch transaction data for a given Solana address. In this article, we'll explain how the FlipsideCrypto SDK can be used to fetch transaction data for a Solana address in a NodeJs application.After creating your project install sdk to your project:<pre><code class="language-javascript">yarn add @flipsidecrypto/sdk </code></pre>Or if you are using npm<pre><code class="language-javascript">npm install @flipsidecrypto/sdk </code></pre>Let’s get started:Import the required dependencies:&nbsp;<pre><code class="language-javascript">import { Flipside, Query, QueryResultSet } from "@flipsidecrypto/sdk" </code></pre>Note: you may need to change path from<pre><code class="language-javascript">"@flipsidecrypto/sdk" </code></pre>to<pre><code class="language-javascript">"@flipsidecrypto/sdk/dist/src" </code></pre>as there is some issue with imports in version 1.1.1.Initialize <code>Flipside</code> with your API key<pre><code class="language-javascript"> const flipside = new Flipside(
 &nbsp; "&lt;YOUR_API_KEY&gt;",
 &nbsp; "https://node-api.flipsidecrypto.com"
 ); &nbsp; </code></pre>Getting API key:To get the api key go to https://sdk.flipsidecrypto.xyz/shroomdk then sign up or login to your account then you can connect your wallet to get the api keys.Your crypto address on which you want to fetch transaction:<pre><code class="language-javascript">const myAddress = "0x...." </code></pre>Create a query object for the <code>query.run</code> function to execute<pre><code class="language-javascript"> const query: Query = {
 &nbsp; sql: `SELECT * FROM SOLANA.core.fact_transfers WHERE (tx_from = '${address}' OR tx_to = '${address}')`,
 ttlMinutes: 10,
 };
 </code></pre>Send the <code>Query</code> to Flipside's query engine and await the results<pre><code class="language-javascript">const result: QueryResultSet = await flipside.query.run(query); </code></pre>The&nbsp;Query&nbsp;object contains both the sql and configuration you can send to the query engine for execution. You can find other parameters which you can modify according to your desired output.<pre><code class="language-javascript"> type Query = {
 // SQL query to execute
 sql: string;
 // The number of minutes to cache the query results
 ttlMinutes?: number;
 // An override on the query result cache.
 // A value of false will re-execute the query.
 cached?: boolean;
 
 // The number of minutes until your query run times out
 timeoutMinutes?: number;
 
 // The number of rows to return from the query result set.
 // If not specified this defaults to 100k. A max of 1m rows/records 
 // will be cached and can be paged thru using the pageNumber parameter.
 pageSize?: number;
 
 // The page to retrieve cached query results from.
 // The default (if not specified) is 1.
 pageNumber?: number;
 };
 </code></pre>In the end this is the hello.ts file that worked for me:<pre><code class="language-javascript"> import express, { Request, Response } from "express";
 import Cors from "cors";
 import { Flipside, Query, QueryResultSet } from "@flipsidecrypto/sdk/dist/src";
 
 const app = express();
 const port = 3009;
 app.use(
 Cors({
 origin: "*",
 methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
 })
 );
 // add json middleware
 app.use(express.json());
 
 app.get("/test", async (req: Request, res: Response) =&gt; {
 const flipside = new Flipside(
 "",
 "https://node-api.flipsidecrypto.com"
 );
 const address = 
 
 //blockchain address : you can use one from https://solscan.io/txs
 
 let queryStr = `SELECT * FROM SOLANA.core.fact_transfers WHERE (tx_from = '${address}' OR tx_to = '${address}')`;
 const query: Query = {
 sql: queryStr,
 ttlMinutes: 10,
 pageSize: 10,
 pageNumber: 1,
 };
 
 const result: QueryResultSet = await flipside.query.run(query);
 
 res.status(200).send({
 data: result,
 });
 });
 
 app.listen(port);</code></pre>

How to use Tailwind with React and create stunning components

Fetch solana transaction

In this article we will talk about state management in ReactJs. I will try to explain 2-3 best state management libraries that you can try out &amp; find the perfect one for you. For this article I have found state management libraries like Jotai, Recoil, and Redux . In this article, we will discuss the Jotai and Recoil libraries, and compare them with the widely used Redux library. We will also list the pros and cons of each library with different technologies.&nbsp;Let’s talk about Jotai:It is a relatively new state management library that is gaining popularity in the React community. Jotai uses a new approach to managing state in React that is based on atoms. An atom is a piece of state that can be shared between different components. Jotai makes it easy to create atoms, and these atoms can be composed to create more complex states.&nbsp;Pros:It has a small API surface area, which makes it easy to learn and use.It uses a new approach to state management that is based on atoms, which makes it easy to share state between different components.It provides a clean and concise way to manage state in React.It is lightweight and has a small footprint.It allows for better performance since it reduces the number of re-renders.&nbsp;Cons:It is a relatively new library and does not have as much community support as other state management libraries.It may not be suitable for larger applications that require more complex state management.It does not have built-in support for server-side rendering.It has a smaller ecosystem than other state management libraries.It may not be the best choice for applications that require time-travel debugging.&nbsp;Example:&nbsp;<pre><code class="language-javascript"> import { atom, useAtom } from 'jotai';
 
 // Create an atom for the count state
 const countAtom = atom(0);
 
 // Component that uses the countAtom
 function Counter() {
 const [count, setCount] = useAtom(countAtom);
 
 const increment = () =&gt; setCount((c) =&gt; c + 1);
 const decrement = () =&gt; setCount((c) =&gt; c - 1);
 
 return (
 &lt;div&gt;
 &lt;button onClick={decrement}&gt;-&lt;/button&gt;
 &lt;span&gt;{count}&lt;/span&gt;
 &lt;button onClick={increment}&gt;+&lt;/button&gt;
 &lt;/div&gt;
 );
 }&nbsp;</code></pre>Recoil:It is another state management library that was developed by Facebook. Recoil provides a simple and intuitive API for managing state in React applications. It uses a new approach to state management that is based on atoms and selectors.&nbsp;Pros:It provides a simple and intuitive API for managing state in React applications.It is lightweight and has a small footprint.It has built-in support for server-side rendering.It provides a way to manage asynchronous state.It has a growing ecosystem of third-party packages.&nbsp;Cons:It is a relatively new library and does not have as much community support as other state management libraries.It may not be suitable for larger applications that require more complex state management.It does not provide time-travel debugging.It may not be the best choice for applications that require performance optimization.It does not provide built-in support for middlewares.&nbsp;Example :&nbsp;<pre><code class="language-javascript"> import { atom, useRecoilState } from 'recoil';
 
 // Create an atom for the count state
 const countAtom = atom({
 key: 'countAtom',
 default: 0,
 });
 
 // Component that uses the countAtom
 function Counter() {
 const [count, setCount] = useRecoilState(countAtom);
 
 const increment = () =&gt; setCount((c) =&gt; c + 1);
 const decrement = () =&gt; setCount((c) =&gt; c - 1);
 
 return (
 &lt;div&gt;
 &lt;button onClick={decrement}&gt;-&lt;/button&gt;
 &lt;span&gt;{count}&lt;/span&gt;
 &lt;button onClick={increment}&gt;+&lt;/button&gt;
 &lt;/div&gt;
 );
 }</code></pre> Redux:It is one of the most widely used state management libraries for React. It is based on the Flux architecture, and it provides a way to manage application state in a predictable and consistent way. It is a mature library with a large ecosystem and many third-party packages.&nbsp;Pros:It is a mature library with a large ecosystem and many third-party packages.It provides time-travel debugging, which makes it easy to debug complex state management issues.It has built-in support for middlewares, which allows for better performance optimization.It is suitable for larger applications that require more complex state management.It provides a way to manage asynchronous state with Redux-Saga.&nbsp;Cons:It has a steep learning curve and can be difficult to learn for beginners.It has a larger API surface area than other state management libraries, which can make it more complex to use.It can be verbose, which can make it harder to read and understand&nbsp;Example :&nbsp;<pre><code class="language-javascript"> import { createStore } from 'redux';
 
 // Define the reducer for the count state
 function counterReducer(state = { count: 0 }, action) {
 switch (action.type) {
 case 'INCREMENT':
 return { ...state, count: state.count + 1 };
 case 'DECREMENT':
 return { ...state, count: state.count - 1 };
 default:
 return state;
 }
 }
 
 // Create the Redux store
 const store = createStore(counterReducer);
 
 // Component that uses the count state from the Redux store
 function Counter() {
 const count = useSelector((state) =&gt; state.count);
 const dispatch = useDispatch();
 
 const increment = () =&gt; dispatch({ type: 'INCREMENT' });
 const decrement = () =&gt; dispatch({ type: 'DECREMENT' });
 
 return (
 &lt;div&gt;
 &lt;button onClick={decrement}&gt;-&lt;/button&gt;
 &lt;span&gt;{count}&lt;/span&gt;
 &lt;button onClick={increment}&gt;+&lt;/button&gt;
 &lt;/div&gt;
 );
 }</code></pre>By analyzing these examples, you can see how both Recoil and Jotai offer a simpler and more intuitive approach to state management in React, with less boilerplate code required to implement even basic state updates. However, there are some key differences between the two libraries that may make one more suitable for your specific use case.

a small blog post written by guiding a few ways to manage state in reactjs.

About Page

Blog Page

How to use Tailwind with React and create stunning components

Implementation of Web Biometric Authentication on React + Node js

Fetch solana transaction

How to manage state in react

What is the concept of REST API

PDF Rag App - Ollama, Qdrant & Langchain documentation

Implementation of Web Biometric Authentication (SimpleWebAuthn).

V2 Full stack RAG app with knowledgebase

How to use Tailwind with React and create stunning components

Fetch solana transaction

How to manage state in react