DEV Community: HassanHabibTahir

Build a Full Stack Chat App with Next.js, Node.js, Socket.io, PostgreSQL & Tailwind CSS

HassanHabibTahir — Sat, 26 Oct 2024 03:18:17 +0000

🚀 Want to learn how to build a fully functional real-time chat app?

Join me in this comprehensive tutorial where we'll create a full-stack chat application using cutting-edge technologies that are in high demand!

What to Expect
In this video, you’ll discover how to build a scalable, production-ready chat app with Next.js, Node.js, Socket.io, PostgreSQL, and Tailwind CSS. We’ll cover every step of the development process:

Frontend Development: Set up Next.js with Tailwind CSS for a responsive and modern interface.
State Management: Utilize Redux Toolkit and Redux Query for efficient state management.
Backend Development: Build a robust Node.js backend with Prisma ORM and PostgreSQL database.
Real-Time Messaging: Implement real-time communication using Socket.io.
Form Handling: Manage forms and inputs seamlessly with React Hook Form.
Project Structure: Learn how to structure and organize your TypeScript project for scalability.
What You'll Gain
Whether you're a beginner or an experienced developer, this tutorial is packed with valuable insights to enhance your full-stack development skills. You'll learn:

How to implement user authentication.
Best practices for optimizing app performance.
Techniques for building high-performance applications.
🔗CLICK HERE to get the full content!
Join the Code Stream Channel, your go-to destination for programming tutorials and live coding sessions that will elevate your skills. Don't miss out—code along with us and take your development skills to the next level!

Hashtags

ChatAppTutorial #Nextjs #Nodejs #Prisma #PostgreSQL #Socketio #TailwindCSS #ReduxToolkit #ReactHookForm #TypeScript #FullStackDevelopment #RealTimeChatApp #WebDevelopment #JavaScript #FrontendDevelopment #BackendDevelopment

Revalidate in nextjs

HassanHabibTahir — Sat, 22 Apr 2023 15:28:36 +0000

In the context of Next.js, revalidation refers to the process of updating the cache for a specific page or set of pages when new data becomes available.

When a user visits a page on a Next.js site, the page is typically served from a cache instead of being generated on the server each time. This makes the site faster and more responsive. However, if the data that the page relies on changes frequently, it's important to update the cache so that users see the most up-to-date information.

Next.js provides a few different options for configuring revalidation. One common approach is to use the getStaticProps function, which fetches data at build time and generates static pages. By default, Next.js will revalidate the cache every 10 seconds, but this can be adjusted with the revalidate option.

Another approach is to use the getServerSideProps function, which fetches data at runtime instead of build time. In this case, the cache is updated on each request, so there's no need to specify a revalidation interval.

Overall, revalidation in Next.js ensures that users are always seeing the most up-to-date information, while still taking advantage of the performance benefits of caching.

Example to illustrate how revalidation works in Next.js

Let's say you're building a blog using Next.js, and you have a page that shows a list of the latest posts. You want to make sure that the list is always up-to-date, so you decide to use revalidation.

First, you create a getStaticProps function for the page. This function fetches the latest blog posts from a database and returns them as props:

import Head from 'next/head';
import axios from 'axios';


function Home({ news }) {
  return (
    <div>
      <Head>
        <title>Latest News</title>
      </Head>
      <h1>Latest News Headlines</h1>
      <ul>
        {news.map((headline) => (
          <li key={headline.id}>{headline.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
const {data} = await axios.get('https://localhost:3000/api/news');
  return {
    props: {
      news:data,
    },
    // - When a request comes in
    // - At most once every 60 seconds
    revalidate: 60, // revalidate every 60 seconds
  };
}

export default Home;

Next.js fundamentals

HassanHabibTahir — Fri, 21 Apr 2023 09:56:49 +0000

Server-side rendering (SSR)

Next.js allows you to perform server-side rendering of your React components,which means that your pages are pre-rendered on the server and delivered as static HTML to the client.The HTML page is generated on the server for each request.
React 18 and Next 12 introduce React server Components, Server completely rendered on the server and do not require client-side rendering.it can degrade performance if it is heavy.

export async function getServerSideProps(context) {
  const { id } = context.params
  const res = await fetch(`https://api.example.com/posts/${id}`)
  const post = await res.json()

  return {
    props: {
      post
    }
  }
}

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  )
}

export default Post

Static site generation (SSG)

Static Generation describes the process of compiling and rendering a website at build time.The output is a bunch of static files, including the HTML file itself and assets like JavaScript and CSS.
With Static Generation, tools like Next.js try to render that page mostly like it would in the browser but at compile time. This gives us the ability to serve the entire content on first load.
If you only use *getStaticProps * to fetch data, Next.js will fetch that data at build time, leaving you with a completely static page.
*How to build a Next.js app
*
Now that we have our application available, let’s try to build it.
npm run build

import path from "path";
import fs from "fs/promises";
import { Fragment } from "react";
import { useRouter } from "next/router";
function ProductDetailPage(props: any) {
  const router = useRouter();
  const { loadedProduct } = props;
  if (router?.isFallback) {
    return <h2> page Not Found!</h2>;
  }
  return (
    <Fragment>
      <h1>this is page</h1>
      <h1>{loadedProduct?.title}</h1>
      <h1>{loadedProduct?.description}</h1>
    </Fragment>
  );
}

async function getData() {
  const filePath = path.join(process.cwd(), "data", "dummy-data.json");
  const jsonData = await fs.readFile(filePath, "utf-8");
  const data = JSON.parse(jsonData);
  return data;
}

export async function getStaticProps(context: any) {
  const { params } = context;
  const productId = params.pid;
  const data = await getData();
  const product = data.products.find(
    (product: any) => product.id === productId
  );
  if (product) {
    return {
      props: {
        loadedProduct: product || null,
      },
    };
  }
}

export async function getStaticPaths() {
  const data = await getData();
  const ids = data.products.map((product: any) => product.id);
  const params = ids.map((id: string) => ({ params: { pid: id } }));
  return {
    paths: params,
    fallback: false,
  };
}

export default ProductDetailPage;

Automatic code splitting

Next.js splits your JavaScript into separate chunks for each route. When users load your application, Next.js only sends the code needed for the initial route.
Next.js automatically performs code splitting by analyzing the application code and determining which parts of it are needed for each page. It then generates separate chunks of JavaScript for each page, so that each page only loads the code it needs.

Overall, automatic code splitting is a powerful tool for optimizing the performance of a Next.js application, by reducing the initial load time and memory footprint of each page.

// pages/index.js

export default function Home() {
  return (
    <div>
      <h1>Welcome to my Next.js app!</h1>
      <p>This is a simple example of a Next.js application.</p>
    </div>
  )
}

Next.js provides a file-based routing system, which means that each file in the pages directory corresponds to a URL route in the application. For example, the index.js file corresponds to the root URL of the application (i.e. /).
Here's an example of using an API route in Next.js:

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from the API!' })
}

Dynamic routing

Next.js supports dynamic routing, which allows you to create routes with parameters that can be accessed by pages and components.

// pages/posts/[id].js

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is the post with ID {id}</p>
    </div>
  )
}

we have a dynamic route for blog posts. The route is defined in a file called [id].js inside the pages/posts directory. The brackets around id indicate that this part of the URL is dynamic, and can be replaced with any value.
When a user navigates to a URL that matches this route, Next.js will automatically route the request to this page and pass the value of id as a query parameter. We use the useRouter hook from Next.js to get access to the router object, and then we extract the id query parameter from the query object.
Dynamic routing is a powerful feature of Next.js that allows you to build flexible and dynamic web applications.

Layouts

Next.js provides a way to define reusable layouts that can be used across multiple pages. This can help you avoid duplicating code and improve maintainability.

// components/Layout.js

import Head from 'next/head'

const Layout = ({ children }) => {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <header>
        <nav>
          {/* navigation links */}
        </nav>
      </header>
      <main>
        {children}
      </main>
      <footer>
        {/* footer content */}
      </footer>
    </div>
  )
}

export default Layout

we define a Layout component that wraps around the content of each page. The component includes a header, navigation links, main content, and a footer. We also include a Head component from Next.js that sets the page title and favicon.

// pages/index.js

import Layout from '../components/Layout'

export default function Home() {
  return (
    <Layout>
      <h1>Welcome to my Next.js app!</h1>
      <p>This is a simple example of a Next.js application.</p>
    </Layout>
  )
}

we import the Layout component and wrap our page content (a heading and a paragraph) inside it. This ensures that the header, navigation, main content, and footer are consistent across all pages of the application.

API routes

API routes in Next.js provide a simple and easy way to create serverless functions that can handle API requests. Here's an example of how you can create an API route in Next.js.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from the API!' })
}

we have created an API route that responds with a JSON object containing a message. The route is defined in a file called hello.js inside the pages/api.
When a user makes a GET request to /api/hello, Next.js will automatically route the request to this page and invoke the handler function. The handler function takes two arguments: req (the incoming HTTP request) and res (the server response).

Displaying NFTs on Ethereum

HassanHabibTahir — Sun, 09 Apr 2023 03:36:55 +0000

If you have automatic NFT detection enabled, MetaMask will automatically fetch any NFTs you have on Ethereum.

If you're on Ethereum mainnet and have NFT autodetect turned on, head to the 'NFTs' tab on your homepage. MetaMask will automatically display any detected NFTs.

If you don't have NFT detection turned on, you'll see a prompt under the NFTs tab that will take you to Settings > Experimental to turn it on. Head there to toggle it.

Adding NFTs manually

In some cases, you may want to add an NFT manually. This could be, for example, because you have NFTs on EVM-compatible chains that MetaMask supports like Polygon ,Ethereum.

BigNumbers

HassanHabibTahir — Sat, 01 Apr 2023 07:54:22 +0000

BigNumber is an object which safely allows mathematical operations on numbers of any magnitude
uint256 has a range from 0 to (2^256) - 1. Therefore, the maximum number that can be held by the uint256 datatype is astronomically large.
Specifically, the maximum value for uint256 is:
115792089237316195423570985008687907853269984665640564039457584007913129639935

In Javascript's number data type has a significantly smaller upper limit.
Specifically, the maximum value of a numeric type that Javascript can hold is just (9007199254740991);

If that number is greater than Javascript's maximum numeric value, which is quite definitely possible, then what happens?
Javascript can not support that. Therefore, we have to use a special type called a BigNumber.
ibraries used for interacting with Ethereum nodes - ethers.js and web3.js - both come with support for BigNumbers.

BigNumber is a custom class library, written in Javascript, that introduces it's own functions for mathematical functions - add, sub, mul, div, etc. BigNumber has a significantly larger capacity for numbers than what Javascript can natively support.

Ethereum Transaction Gas Fee

HassanHabibTahir — Fri, 31 Mar 2023 04:18:05 +0000

Gas

Gas is the fuel of the Ethereum blockchain network. Gas is always paid in ether, Gas is the transaction fee paid to miners for executing and adding your transaction into the Ethereum blockchain. For every transaction you have to specify the value of the gas price and the gas limit, you want to set. Based on these values, the network calculates how much of a fee you are willing to pay for the transaction.

Gas Limit

The gas limit is the maximum unit of gas your transaction may take, in order to be executed on the Ethereum blockchain.If your transaction takes less gas, then the extra gas that you have provided will be refunded back to your wallet. If your transaction consumes all the gas and requires more gas to be executed, your transaction will fail, and gas will be consumed as part of the transaction fees.

Gas price

_The gas price is the price per gas unit you are willing to pay for executing your transaction. The unit of gas price is always defined in gwei. According to your gas price, miners decide to process your transaction. If the transaction has a higher gas price, there is a chance that your transaction will be processed early. If your gas price is low, then your transaction might be processed after a delay or when the blockchain is free to process low-gas-price transactions.
_

Example

_ From | 0x2001152bd1cc1d37d7c0d25cd10315351b45b4a6
To | 0x0587db0883defe769b49b78c11bdcc2f1f38b484
gas limit| 424843
gas price| 0.0000000.1(10 gwei)
gas(used) = 21000;

TxFee (max) = gas limit * gas Price;
TxFee(paid) = gas(used)*GasPrice;
TxFee(Returned)= TxFee (max) -TxFee(paid);
TxFee (max) = 424843 * 0.00000001 =0.00424843;
TxFee = 21000*0.00000001=0.00021;
TxFee(Returned) = 0.00424843-0.00021=0.00403843 _