DEV Community: Avinash Krishnan

Introduction to Socket.IO in MERN Stack

Avinash Krishnan — Sat, 07 Sep 2024 09:06:09 +0000

If you’ve ever wondered how chat apps, live notifications, or multiplayer games update instantly without refreshing the page, the magic behind these features is often powered by real-time communication. One popular tool that makes this possible is Socket.IO. In this guide, we'll introduce you to the basics of Socket.IO and show you how to set it up in a MERN stack (MongoDB, Express, React, Node.js) application.

What is Socket.IO?

Socket.IO is a JavaScript library that lets your application talk to clients in real time. This means that the server can send updates to the client (like a new chat message) the moment something happens, without the client having to ask for it repeatedly. It’s a bit like a two-way street where information can travel back and forth instantly between your server and the users.

Prerequisites

Before we dive into the integration, ensure you have Node.js installed on your machine and a basic MERN stack setup ready. We'll be using:

Node.js and Express for the backend server
React for the frontend
Socket IO for real-time communication

Setting up the backend first

Install required dependencies

npm install socket.io nodemon express cors

2.Create a server with Socket.io
Now, let's create a simple server in server.js (or app.js) and integrate Socket.IO with Express:

import express from "express";

import { Server } from "socket.io";
import { createServer } from "http";

import cors from "cors";

const port = 3030;
const app = express();
app.use(
  cors({
    origin: "http://localhost:5173",
    methods: ["GET", "POST"],
    credentials: true,
  })
);

const server = createServer(app);
const io = new Server(server);

app.get("/", (req, res) => {
  res.send("Hello World!");
});

io.on("connection", (socket) => {
  console.log("User Connected::::", socket.id);
  socket.emit("welcome", "Welcome to my server huihuihui");
});

server.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

3.You can add more features and list them down under connection
Such as:

socket.emit("welcome", "Welcome to my server huihuihui");
  socket.broadcast.emit("welcome", `${socket.id} has joined the server`);
  socket.on("message", (data) => {
    console.log("DATA::::", data);
    io.to(data.room).emit("receive-message", data);
  });
  socket.on("disconnect", () => {
    console.log(`User with id: ${socket.id} has been DISCONNECTED`);
  });
  socket.on("join-room", (room) => {
    socket.join(room);
  });

This should be pretty much about the backend initially

Setting up the frontend

Install Socket.io client

npm install socket.io-client

2.Connect React to Socket.io server
Firstly import io from socket.io-client

import { io } from "socket.io-client";

Next up connect it to your backend api

  const socket = useMemo(() => io("http://localhost:3030"), []);

3.Once this setup is done we can start working upon using the api built we built earlier
Doing it under a useEffect would be helpful.
This is the code for the same

useEffect(() => {
    socket.on("connect", () => {
      setSocketId(socket.id);
      console.log("connected with ID::", socket.id);
    });

    socket.on("welcome", (s) => {
      console.log(`User with ID:: ${socket.id}`, "\n", s);
    });

    socket.on("receive-message", (data) => {
      console.log("RECEIVE-MESSAGE EMIT::::", data);
      setMessages((messages) => [...messages, data.message]);
    });
  }, []);

This would pretty much complete the setup and give user a chance to build upon as per requirement.

This is just the beginning—Socket.IO can power various real-time features, such as notifications, live updates, and collaborative tools. By adding real-time functionality to your apps, you can create more interactive and engaging user experiences.

The complete code has been pushed in my github don't forget to check it out.

GitHub: https://github.com/Krishnan-Avinash/socket

Add to Cart Feature in React with Redux Toolkit

Avinash Krishnan — Wed, 10 Apr 2024 16:14:24 +0000

Redux, a key part of managing state in React apps, can seem daunting at first. But there's a simpler way to approach it. In this blog, I'll share my journey of understanding Redux and using it in a straightforward manner. I'll show you how to easily add features like a shopping cart to your React app with Redux. Let's explore Redux together and make state management in React simpler.

Setting Up Your Environment

Before diving into the code, make sure you have Node.js and npm (or yarn) installed on your machine. Create a new React application using Vite:

npm create vite@latest

Next, install Redux Toolkit:

npm install @reduxjs/toolkit react-redux

Creating the Redux Store

First, let's create a Redux store to manage our application state. Inside the src directory, create a new folder called "store" and inside it, create a file named "store.js":

import { configureStore } from "@reduxjs/toolkit";
import cartReducer from "./cartSlice";

export const store = configureStore({
  reducer: {
    reducer: cartReducer,
  },
});

export default store;

Defining the Cart Slice

Now, let's define our cart slice, which includes the reducer and action creators. Create a new file named "cartSlice.js" in the "redux" folder:

import { createSlice } from "@reduxjs/toolkit";

const initialState = { itemList: [], totalQuantity: 0, showCart: false };

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart(state, action) {
      const newItem = action.payload;
      const existingItem = state.itemList.find(
        (item) => item.id === newItem.id
      );
      if (existingItem) {
        existingItem.quantity++;
        existingItem.totalPrice = existingItem.price * existingItem.quantity;
      } else {
        state.itemList.push({
          name: action.payload.name,
          price: action.payload.price,
          totalPrice: action.payload.totalPrice,
          id: action.payload.id,
          quantity: 1,
        });
      }
    },
    removeFromCart(state, action) {
      const findItem = state.itemList.find(
        (item) => item.id === action.payload.id
      );
      if (findItem.quantity === 1) {
        state.itemList = state.itemList.filter(
          (item) => item.id != action.payload.id
        );
      } else {
        findItem.quantity--;
        findItem.totalPrice -= findItem.price;
      }
    },
    setShowCart(state) {
      state.showCart = !state.showCart;
    },
  },
});

export const { addToCart, removeFromCart, setShowCart } = cartSlice.actions;
export default cartSlice.reducer;

This completes the redux setup now data insertion and fetch can be done using useDispatch and useSelector respectively.
Complete implementation of this is available in my Github:
https://github.com/Krishnan-Avinash/add-to-cart

Template Exchange & Instant Support: EmailJS Integration

Avinash Krishnan — Fri, 29 Mar 2024 05:01:06 +0000

Free Website Templates: Your Launchpad to Creativity

Central to our platform is our extensive library of free website templates. Whether you're creating a personal blog, a portfolio site, or an e-commerce store, we have a template to suit your needs. Our templates are meticulously crafted by expert designers and developers, ensuring both aesthetic appeal and functionality.

But we don't stop there. We believe in the power of community and collaboration. That's why we offer you the opportunity to contribute your own website templates to our collection. Share your creativity with the world and help fellow developers kickstart their projects. Together, we can build a diverse and vibrant ecosystem of web templates for everyone to enjoy.

Chatbox Support: Your Personal Guide in the World of Web Development

Navigating the intricacies of web development can be daunting, especially for beginners. That's where our Chatbox support comes in. Embedded directly into our platform, the Chatbox is your direct line to our support team. Whether you have questions about template selection, need assistance with customization, or want to contribute your own template, we're here to help.

Our Chatbox is more than just a messaging tool. It's a gateway to personalized assistance, real-time guidance, and a supportive community of developers. No question is too big or too small. We're dedicated to empowering you on your journey to becoming a proficient web developer.

How It Works:

Getting started is easy. Simply browse our collection of free website templates, choose the one that suits your project, and start customizing. If you have questions along the way, click on the Chatbox icon to connect with our support team instantly. We're here to provide guidance, answer your queries, and ensure your experience on our platform is nothing short of exceptional.

Chatbox Implementation:

Email would look like this:

Code To Implement EmailJS:

Step 1: Run npm i emailjs in your vscode terminal.
Step 2: Paste this one line above the end of body tag.
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
Step 3: Create an account in emailJS
Step 4: Click on Add New Service option
Step 5: Click on Gmail.
Step 6: Connect your gmail account and then click on Create Service.
Step 7: Now click on Email Templates on the left hand side
Step 8: Click on Create New Template.
Step 9: For my project I entered my email Id in right hand side in To Email option and my name in From Name option. You can edit the contents as per your requirement.
Stuff written as {{from_name}} are variables
Step 10: Paste this code in a new javascript file and link that file to your HTML.

(function () {
    emailjs.init(""); //Paste your public key available in account details
  })();
  var params = {
    sendername: "", //Fetch the value from user and pass it in these variables
    to: "",
    message: "",
  };

  var serviceId = ""; //Paste your service ID available in Email Services 
  var templateId = ""; //Paste your template ID available in Email Templates->Settings
  emailjs
    .send(serviceId, templateId, params)
    .then((res) => {
      alert("email sent successfully");
    })
    .catch();

Website Templates:

Upload Template:

Key Features:

User-Friendly Interface: The Chatbox is designed to be intuitive and easy to use, even for those new to web development.
Instant Communication: No more waiting around for email responses. With the Chatbox, you'll get real-time support whenever you need it.
Query Logging: We keep track of all Chatbox interactions, so you can easily refer back to previous conversations if needed.
Email Notifications: Receive email notifications for every Chatbox interaction, ensuring you never miss a response from our team. Implemented using emailjs.

Technology Stack Used:

Frontend:
HTML, CSS, JavaScript: The building blocks of our website, ensuring a smooth and interactive user experience.
Backend:
Node.js, Express: Powering the backend of our platform, providing the foundation for our Chatbox feature.
Database:
MongoDB: Storing and managing user data and Chatbox interactions, keeping everything running smoothly behind the scenes.

Why It Matters:

Our platform's provision of free website templates and user-contributed templates, alongside Chatbox support, is pivotal for beginner developers. These resources offer accessible, high-quality starting points, democratizing web development. By fostering community collaboration and providing real-time assistance, we empower developers to overcome obstacles efficiently, accelerating their learning curve and facilitating the realization of their creative visions.

Live: https://designusability.netlify.app/
Github:https://github.com/Krishnan-Avinash/design-website