DEV Community: Kunal Keshan

Learn How to use Context and Reducer Hooks in React.js by Creating a Global Snackbar.

Kunal Keshan — Sun, 22 Jan 2023 01:30:00 +0000

The Context (createContext and useContext) and the Reducer (useReducer) hooks in React.js might seem to be complicated and in the beginning, I felt that too. I had used them before, but never really understood fully how they worked, until I tried implementing them in a test project.

In this tutorial, I'll show you,

Why and how you can use the Context and Reducer Hooks,
Bootstrap your React.js App with Vite,
Create a Global state management system using them and
Create a snack bar that can be accessed anywhere from your application (without having to perform prop drilling)

Here's the GitHub Repository that I'll be following along for this tutorial. You can skip to it directly if you're interested.

kunalkeshan / global-snackbar-with-react-typescript-context

Discover the power of Context & Reducer Hooks in React.js by creating a global snack bar using TypeScript and bootstrapping with Vite.

Learn How to use Context and Reducer Hooks in React.js by Creating a Global Snackbar 🚀

Discover the power of Context & Reducer Hooks in React.js by creating a global snack bar using TypeScript and bootstrapping with Vite.

Click to Read!

Table of Contents:

Introduction

This repository is part of the Learn How to use Context and Reducer Hooks in React.js by Creating a Global Snackbar article and illustrates the following.

Setting up an React.js + TypeScript App using Vite.
Using the createContext and useContext hooks.
Using the useReducer hook.
Using the implementation to create a Global Snackbar.

The idea is understand how Context and Reducer Hooks can be used in a combination to create your own Global State management System to avoid issues like Prop Drilling.

This project creates a very raw implementation of a snackbar using only the…

View on GitHub

Prerequisites

Familiarity with JavaScript.
React Fundamentals (Components, Data Handling, Hooks (useState, and useEffect).

Let's begin...

Why use Context and Reducer Hooks?

One of the most common issues you'll run into react is that you'll end up passing down states and their set state functions as props from one component to another, and end up going 5 - 10 levels down. This is known as prop drilling.

This is bad because when one of your states faces an issue, tracking it back to its parent is going to be a nightmare 😱 and whenever you change the value of a state, all the components where the state was passed down will undergo rerendering, even the ones where you're not using the state at all.

Context Hooks to the Rescue! 🦸

The Context Hooks allows access to data from a higher level without having to pass it down from one component to other.

In the traditional approach, you would create a state at the top level and then pass it down from one level to the next. With Context however, you just need to create a Context Object, use the Context Provider to wrap your application with it and then either use the Context Consumer or the useContext Hook to access the data from the Context.

Creating a Context

React.createContext() is used to create a context object (the data that you want to keep global), it takes in its argument as the initial value of the context object.

export const AppContext = React.createContext({ theme: 'light'});

Providing the Context to Your Application

After you've created the context object, the next step is to use the AppContext.Provider to give access to the context object to the components under the provider.

Think of it this way, if there's some water, and you need to pass it down to 3-4 pipes at a time, but you have only one tap. How would you do it? You would create a pipe to provide to all the other pipes from the tap.

It's the same way the Provider is used to give access to the context object to all of your other components as well.

The tap here was the flow of the data and the water here is the data itself, so with the provider, you'll need to pass in some value as well. This value that you pass can be accessed by consuming the context. (Coming up on the next section)

import { AppContext } from './AppContext';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Main from './components/Main';

const App = () => {
    const [theme, setTheme] = useState('dark');
    return (
        <AppContext.Provider value={{theme, setTheme}}>
            <Navbar />
            <Main />
            <Footer />
        </AppContext.Provider>
    )
}

export default App;

Using the Context in another Component

Once the provider is set up, we can access the context data in two ways. By using the AppContext.Consumer or the useContext hook.

The Consumer component returns a function through which you can access the context data and then return the component you want to use the data in.

/* Navbar.js */

import React from 'react';
import AppContext from '../AppContext';

const Navbar = () => {
    return (
        <AppContext.Consumer>
            ({theme}) => (
                <nav className={`${theme}`}
                    ...
                </nav>
            )
        </AppContext.Consumer>  
    )
};

export default Navbar;

Or you can alternatively use the useContext hook as well to access the data from AppContext.

/* Navbar.js */

import React, {useContext} from 'react';
import AppContext from '../AppContext';

const Navbar = () => {
    const {theme} = useContext(AppContext);
    return (
            <nav className={`${theme}`}
                ...
            </nav>
    )
};

export default Navbar;

Upgrade with the Reducer Hook 📈

Now that we've successfully brought up our data to a global level, there's still an issue! We still end up using the useState hook to create states and state dispatchers. And we'll still end up importing various setState types of functions to the components where we'll need them and cloud the context object with the number of states.

An alternative approach could be a create a complex state, have only one state object and one set state, but then you'll end up writing complex logic for each use case of where you're implementing the state. This is not exactly the best practice.

We can instead switch to a more action-based method of updating your application state using the Reducer Hook. It's pretty simple to set up and use throughout your application.

The `useReducer` Hook

The useReducer hook takes in two arguments. The first is a reducer function and the second one is the initial value of the state. It returns the state and a dispatch function which is used to update the state, it's pretty similar to thesetState function that we use to update the state's value.

import {useReducer} from 'react';

const App = () => {
    const [state, dispatch] = useReducer(reducer, {theme: 'dark'});

    return (...);
}

export default App;

Dispatch Function

The Dispatch function is very similar to the setState. You can pass in an argument to update the state. When the dispatch function is called, it triggers the reducer function (mentioned below) which is used to return the updated state value.

The dispatch function doesn't return any value, rather it's only used to send a new state value that needs to be updated.

Reducer Function

The reducer function is called every time the dispatch function is called. It takes in two arguments, the previous state and an action object.

In general, you can set up your own logic to update the state, however, with the action approach, you can make state updates more action-oriented. But what does the action object contain? What you pass in the dispatch function can be accessed in the action object.

It contains the type of action you want to perform and the payload (state updates) that are associated with that action type. So, you'd see tons of applications having a switch case statement inside the reducer function to handle various action types and update the state based on the payload.

The reducer function returns the updated state which is then reflected wherever the state object from the useReducer hook is used.

const reducer = (state, action) => {
    switch (action.type) {
        case 'LOGIN': {
            state.user = action.payload;
            state.isLoggedIn = true;
            return {...state};
        }
        default {
            return {...state}
        }
    }
};

export default reducer;

Create React + TS App With Vite

Bootstrapping a React application with TypeScript using Vite is pretty simple and straightforward. You can follow the steps mentioned below or follow the Vite documentation for detailed instructions.

Using Yarn

yarn create vite global-snackbar-app --template react-ts
cd global-snackbar-app
yarn

Create the app, open it up and install all the dependencies.

The default Vite setup should be something like the one mentioned above. Next up just start the application using the following command

yarn run dev

Application Set Up 🤖

Most of our application set-up will be inside the src folder, the file structure is mentioned below and a quick overview for each as well.

@types/index.d.ts - The Type declarations that will be common throughout our app are declared here.
components - The various components of our app.
context - Keeping the context separate from the app. Separating the state from the application.
css - Application Styling CSS files
reducer - The reducer function is declared here with the logic for each action type declared in it.

Before we get started with setting up the system, visit the repository associated with this project so you can follow along with the implementation - https://github.com/kunalkeshan/global-snackbar-with-react-typescript-context.

Global State Management System 🌐

We're going the combine the Context and the Reducer Hooks to create a global state management system. Context is used to provide and consume the state throughout the app while reducer is used to update the state with the dispatch function and keep them action-oriented.

Creating a Context

We'll be creating two different contexts. One for the application state and the other for the dispatch function.

/* context/AppContext.tsx */

import { createContext } from 'react';

const AppContext = createContext<AppState>({} as AppState);

export default AppContext;

/* context/DispatchContext.tsx */

import { createContext } from 'react';

const DispatchContext = createContext<DispatchContextType>(
    {} as DispatchContextType
);

export default DispatchContext;

The AppState and the DispatchContextType are present in the @types/index.d.ts file. The code for the App and the Dispatch context is easy, we're using the createContext Hook from react to create the context we want and we're exporting it to access it from other components.

Reducer Function

The reducer function is where we'll keep the logic for the state updates which is mentioned below.

/** reducer/reducer.ts
 * Reducer Function
 */

// Dependencies
import React from 'react';

const reducer = (state: AppState, action: AppActions) => {
    switch (action.type) {
        // When snackbar is open, 
        // - spread the previous value
        // - spread the payload (override prev values)     
        // - set open to true
        case 'OPEN_SNACKBAR': {
            state.snackbar = {
                ...state.snackbar,
                ...action.payload,
                open: true,
            };
            return { ...state };
        }
        // When snackbar is close
        //  - set open to false
        case 'CLOSE_SNACKBAR': {
            state.snackbar.open = false;
            return { ...state };
        }
        default: {
            return { ...state };
        }
    }
};

export default reducer;

Based on the action type that is passed into the dispatch function, the snack bar can either be opened or close. When it's to be opened, the data is updated with the previous data and the updated data from the action payload.

While closed the open state of the snack bar is updated to false.

Putting it all Together

Now that the Context and the reducer are defined, we need to use those to provide our application as a whole. This is done in the App.tsx file.

/**
 * App.tsx
 */

// Dependencies
import React, { useReducer } from 'react';
import reducer from './reducer/reducer';
import AppContext from './context/AppContext';
import DispatchContext from './context/DispatchContext';
import Footer from './components/Footer';
import Main from './components/Main';
import Navbar from './components/Navbar';
import Snackbar from './components/Snackbar';
import './css/app.css';

function App() {
    // useReducer with the reducer func from './reducer/reducer.ts'
    // The second arg is an initial value for the application state
    const [state, dispatch] = useReducer(reducer, {
        snackbar: {
            message: '',
            type: 'error',
            open: false,
            position: 'bottom-right',
        },
    });

    // state is passed into the app context
    // dispatch function is passed into the dispatch context
    return (
        <AppContext.Provider value={state}>
            <DispatchContext.Provider value={dispatch}>
                <div className='App'>
                    <Navbar />
                    <Main />
                    <Footer />
                    <Snackbar />
                </div>
            </DispatchContext.Provider>
        </AppContext.Provider>
    );
}

export default App;

The reducer function is passed into the useReducer hook and the state and the dispatch from the hook are passed into their respective context providers.

Global Snackbar

A basic snack bar has some of the following properties, a message, a type (success, error, info, warning), its positioning and whether it to be open or closed. The mentioned ones are what we'll be implementing.

message - string
open - boolean
position - string (bottom-right, bottom-left, top-right, top-left)
type - string (success, error, info, warning)

We can add other properties as the time it should stay open, passing in custom classes and styling, or even custom onClose functions, and for this project, they're currently out of scope.

Foundation + Styling 🎨

The layout for the snack bar will consist of the message and the button to close it. We'll add the functionality soon, for now, we just have to set up the snack bar.

/**
 * Snackbar Component
 */

// Dependencies
import React from 'react';
import '../css/snackbar.css';

const Snackbar = () => {
    return (
        <div>
            <p>Snackbar Message over here</p>
            <button>
                ✖️
            </button>
        </div>
    );
};

export default Snackbar;

The styling for the snack bar is given below. Using CSS Variables we can set the 4 states of the snack bar and change its colour as and when it's dispatched. By default, the snack bar is hidden and is set to open when the show snack bar action is dispatched.

/* Snackbar Colors */
:root {
    --success-bg: #5cb85c;
    --error-bg: #d9534f;
    --info-bg: #5bc0de;
    --warning-bg: #f0ad4e;
}

/* Snackbar Container */

.snackbar {
    position: absolute;
    display: none;
    padding: 1em 2em;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 320px);
    height: min-content;
    border-radius: 4px;
}

.snackbar button {
    all: unset;
    cursor: pointer;
}

/* Snackbar Position classes */

.top-right {
    top: 2rem;
    right: 2rem;
}

.top-left {
    top: 2rem;
    left: 2rem;
}

.bottom-left {
    bottom: 2rem;
    left: 2rem;
}

.bottom-right {
    bottom: 2rem;
    right: 2rem;
}

Functionality ⚙️

To add the functionality we'll need both the AppContext and the DispatchContext in our snack bar. We destructure the snackbar state from the AppContext and the dispatch function from the DispatchContext.

The position is set as a className and these are already determined in the snackbar.css and the background colour is set into the style object of the div enclosing the snack bar.

We've used the dispatch function to close the snack bar when it is clicked or when the timeout runs out after 6 seconds when it is open. (The timeout can be set as a property in the snack bar state too!)

/**
 * Snackbar Component
 */

// Dependencies
import React, { useContext } from 'react';
import AppContext from '../context/AppContext';
import DispatchContext from '../context/DispatchContext';
import '../css/snackbar.css';

// Can be added as a state to snackbar too!
const AUTO_CLOSE_SNACKBAR_TIME = 6000;

const Snackbar = () => {
    // Get the snackbar state and the dispatch function
    // using the useContext Hook
    const { snackbar } = useContext<AppState>(AppContext);
    const dispatch = useContext<DispatchContextType>(DispatchContext);

    // When snackbar is open, close it after the auto close time
    /**
     *! This is a very raw approach!
     *? A better implementation would've been
     *? to batch each snackbar dispatched
     * */
    if (snackbar.open) {
        setTimeout(() => {
            dispatch({ type: 'CLOSE_SNACKBAR' });
        }, AUTO_CLOSE_SNACKBAR_TIME);
    }

    return (
        <div
            // Setting the position and the
            // type from the state
            className={`snackbar ${snackbar.position}`}
            style={{
                display: snackbar.open ? 'flex' : 'none',
                backgroundColor: `var(--${snackbar.type}-bg)`,
            }}
        >
            <p>{snackbar.message}</p>
            {/* Dispatch close snackbar when the close button is clicked */}
            <button onClick={() => dispatch({ type: 'CLOSE_SNACKBAR' })}>
                ✖️
            </button>
        </div>
    );
};

export default Snackbar;

Usage with Context + Reducer 🦾

In both cases, you'll need to get the dispatch function from the DispatchContext and call it when you need to use it.

Opening a Snackbar

dispatch({ type: 'OPEN_SNACKBAR', payload: {message: 'Hello, there!', type: 'success', position: 'bottom-right'});

Closing a Snackbar

dispatch({ type: 'CLOSE_SNACKBAR' });

Summing It Up

With the combination of the Context and the Reducer Hooks from React, we can create a global state management system that's very similar to Redux. We implemented this system in a snack bar that can be accessed throughout our application.

The Life Cycle of Developing a Website 🚴‍♀️

Kunal Keshan — Fri, 13 Jan 2023 02:32:00 +0000

As Developers we love jumping to code and working on our ideas immediately. This spontaneity is what helps us learn and explore new things and get better at what we do.

Sometimes this very spontaneity can lead to frustration when you are working on large projects. When you've used the wrong framework, the incorrect database, or have implemented a feature way too early, or tying to add too many things before actually testing them out.

Here's a framework that can save you tons of time in your development process.

For understanding purposes let's take an example of a simple social media application that allows you to put up text posts (something like Twitter).

💡 Idea

The Ideation stage is where you get the idea to build a web app. This is where you're the most excited and motivated to make it and get the rush to start on it immediately. But wait! What features will the web app actually have?

🔦 Planning the MVP

Considering it's a Twitter-like application, the Minimum Viable Product (MVP) of the app should consist of the following features,

- A Login and a Signup, with a, forgot password feature

- User is able to update their profile details

- Able to make text posts

- Edit and delete their posts

- View a feed of posts

- View posts of other users

- Follow other users

This should be enough to get started. The MVP is should consist of just enough features to get your idea up and running. You can always add more later. Your MVP should focus on being good enough, it doesn't have to be perfect.

📚 Requirements

In the Requirements phase, you'll plan out what you'll need to implement your MVP. From the tech stack, to how much time you'll need to work on it, will be using a CDN, where you will host the application is all covered here.

For the social media example, for the front end, we'll use something like Next.js or any other SSR/SSGs-supported framework to facilitate SEO for the user's profile and their posts made. Along with that, we'll use Tailwind CSS for styling.

A database, preferably a relational one to relate the users and their posts made. The following feature would also be easily implemented with the help of a relational database.

A backend to build custom endpoints for our application can be built using Node.js / Express.js. We can also implement web sockets using Socket.io for real-time feed updates.

🎨 Design

The look and feel of the website. Your website's typography, colour scheme, and base styling preferences all come under the Design phase of the application. You can use tools of your preference. Figma and Web Flow are great tools that help in designing and prototyping your website.

You can always use other platforms like Dribble and Behance for inspiration. 😜

💻 Development

This is where the fun begins. With the help of the last four stages, you'll have a clear idea of how to approach your code and even if you get stuck, you can always go back to your plans and get them sorted out quickly.

You may or may not work in a team, however, it's always best to use a VCS like Git to keep track of your changes and use GitHub if you're working on a team. Keep separate branches for your work and merge them as and when you're done with them.

🧪 Testing

Not so fun part for many, but it's one of the most important ones. There are a lot of different types of tests out there, and you should try and cover the ones that are important for your needs.

If I'm working on the signup feature, I'd preferably create a branch called feat/signup using Git, run tests in that branch, then merge it to the main branch and test it out there one more time with the already existing features.

🌐 Deployment

After you're done with the MVP, it's time to make it public and open to access. And to do that, you'll have to deploy your app to the web. For the social media app (I've used Next.js) I'll deploy it using Vercel as of now because I'm not expecting high traffic immediately. I've using PostgreSQL to host my data.

You've already covered the cost requirements in the Requirements phase here, so it should be pretty much smooth out here.

⚙ Maintenance

Deploying your website is not the end, once you've put it out there, you will have bugs to face, new features to implement and maybe the project really hits off, so you'll need to consider scaling as well.

At the maintenance phase, you can consider increasing your costs for keeping the app up and running, maybe getting a team to resolve the bugs, or making your application open source and putting those out as issues.

🏗 Retirement

Your project has a good run, or maybe it hasn't. The retirement phase, often least or not thought of at all is how you'll take down or stop the project altogether.

This being a web project, there are usually no costs associated with it. (But it does come in handy for construction projects where you're building a new property and have to take it down later. It can consist of manpower costs, utility costs, etc)

What flow do you usually follow when you approach building a website? Is there anything that can improve the life cycle mentioned above?

Learning to Code is a Marathon, not a Race.

Kunal Keshan — Wed, 28 Dec 2022 05:30:00 +0000

You may be a student, a working professional or someone who's looking for a career switch, and might be interested in taking up coding to look for better opportunities. Whatever it might be and whatever situation you might be in, there's always an approach that you can take to help you learn better and grow faster.

I'm currently majoring in Electronics, and I've grown an interest in computer science so much so that I give more time to coding and learning things in computer science than building circuits and learning about electronics.

I was lucky enough to have mentors and seniors to guide me from the start of my journey in coding, and it helped me immensely to learn a lot in a very short span of time. And, I know that there are many out there who have the interest and the drive to learn, but very less to no guidance at all.

I'm writing this post to those who I think can find it useful in their coding journey and as a reminder to myself, something to my past self who would've wanted guidance along the way.

Understand that there is no hurry in learning things. 🪁

When you're just starting out, there will be so many interesting things that you might come across and sometimes you'll even lose track of time when you get engaged in what you're doing.

Sometimes some things interest us so much that we dive into them without knowing what we need to have covered beforehand. For example, working in React is a lot better when you have a proper understanding of working with JavaScript.

You might dive into something advanced just to say that you know how to work with that particular framework or just fill up your resume with those fancy keywords.

Even if you're a fast learner, you cannot make a fully cooked meal without knowing how to turn on the stove.

Learning to code in a language comes after learning the fundamental concepts of coding. Once you learn the fundamentals, then you can pick up the syntax of any language.

Here's a list of fundamentals that you want to go through before getting into a specific field.

What is coding?
Creating algorithms and flowcharts.
Variables
Data Types
Operators
Conditional Statements
Iteration (Looping)
Functions
Scopes

Don't just blindly follow the hype. 🏎️

Every few seasons, there's always a talk and hype about a new technology that people say will revolutionize the tech industry. And yes, some of them have actually changed the way we work. From Steve Jobs introducing the iPod, Bluetooth and wireless devices, to the way Jio made it possible to connect all of India to the Internet and right now, the way ChatGPT, an AI giving you the answers to your questions and Lensa creating completely fictional pictures of you.

There are also things that did start with hype but haven't been the talk of the town for many. Some new technologies like blockchain and web3, while promising still rely on the fundamentals of its predecessor web2 for lots of things.

If you are taking up coding just because of the hype around it, then you're getting into it for the wrong reasons.

It might be fun to go along with, but wait for a moment and ask yourself, is it something you really want to work on?

You might already be doing some coding in AI/ML stuff, but switching it in the middle for some hype out there just because everyone's on it might be more harmful than rewarding.

Do your research,
See what new things you have to learn,
Look for opportunities,
Talk with people who've already done something in that field,
Would it be something that you'll enjoy doing?

Before you take the jump into something new, see if it's at a height you're comfortable taking the leap in and always have a fallback plan in case it doesn't work out.

Tutorials are useful, but only if you're approaching them actively. 🦾

Tutorials are amazing and show you what you need to get started with a specific topic. And YouTube has no short supply of tutorials, you'll find almost everything that you'll need along with your journey.

Tutorials are highly specific to a particular topic, meaning it will most of the time cover only what is needed for the scope of that tutorial alone. They don't go much deep into the topic and you'll only have a surface-level understanding of what's happening.

Other than watching tutorials, you'll want to read the documentation for the technology you'll be learning and work on the technology by yourself in some projects too!

You can watch someone cook but you cannot get an idea of what they're adding without reading the recipe yourself. At the same time, reading the recipe will give you the theory, but not the practice in the kitchen. You'll need to make the dish numerous times before mastering it.

Similarly, you'll want to practice and practice and keep asking yourself why some things work the way they do. How you can use it? How you can improve it? And how you can combine it with other concepts that you learnt before.

Build, Build, Build! ⚡

Making things by hand is the only way you'll learn how to use them at a later point in time. If you have some idea, regardless of how ridiculous or stupid you might think it is try implementing it by yourself and see where it goes.

If you have some personal problem and you have an idea for a solution that you can approach using tech, then implement that too. Even if you fail, you'll have learnt a lot of new things in the process, you'll be actively engaging with topics you've never heard of and at the same time, you'll be getting the hands-on experience of working with them.

At the same time, whatever you've worked on, put it up in GitHub or GitLab as proof of work, even if many might not see it, it's a visual proof of the work you've put in and it's something that will keep you motivated to keep moving forward.

Join a Community and create a network. 🫂

Joining a community is probably the greatest thing you can ever do. Be it an online community or one from your own college or locality, you'll have the chance the connect with others programmers too.

Trying to do everything by yourself will be really tough and put a lot of strain on you, however, having people who are on the same journey as you can boost your morale and help build connections between you and those in the same boat.

Some benefits of joining a community are

Access to all groups of people from experts to beginners.
Access to resources that are approved by a large community.
Making friends across the globe.
Creating a network that will definitely help you get projects, clients, and even job opportunities.
Share your work and get immediate feedback from the people on how you've performed and how you can further improve.

Here are some of the communities that have helped me grow exponentially.

Get a mentor for yourself. ✨

Being a part of a community is really great and you can make it even better if you find yourself a mentor. A mentor is someone who is ready to help you reach your goals, guiding you and providing you with the right resources and opportunities as you progress.

It does not necessarily have to be someone who knows you or someone you know. You can follow the teachings and content of various experts out there, study what they did and try and see if anything works for you as well.

For me every book I read, the author is a mentor to me. In every video I watch, the speaker becomes a mentor. Anyone from whom you can learn and stick to what they say will also be quite beneficial for you.

How can you find a mentor for yourself?

Finding a mentor can take a long time and prove to be a bit difficult. If you want to find yourself a mentor, someone with whom you can speak directly, then try doing the following things

Search for people in the same field as you on social media platforms like LinkedIn, Twitter and Instagram.
Take a look at their profile, it will be mentioned that they're ready to guide as a mentor, most of the time and/or they'll even have a history of helping out others.
Reach out to them either in-app or through email, requesting that you would really appreciate their time if they can help mentor you too. Share your journey with them!
Keep trying and you'll definitely get a response.

Learn to Unlearn. 📦

Once you learn a concept, it does not end there. You might think of it from one perspective, but when you hear the same thing from someone else, it might sound completely different from what you interpreted and still be right.

Be open to others' interpretations as well, both of you may be right, and learning from someone else will always benefit you to understand things in a deeper flow than what you did before.

Even if you're familiar with a concept, you can always come back and learn it from a different perspective. I've seen that when I go back to the fundamentals, I learn some new properties that I didn't even know existed, or some things click again, why they are used at the fundamental level and that helps understand why some advanced concepts work the way they do.

Learning to unlearn, is something most of us don't want to or will not be willing to do. Why? For most, it can be their ego. "I already know this, so why should I do it again?". Others can be some constraints. "I don't have enough time for this!"

Whatever dialogue you might be telling yourself, it's not always true. You can always learn something by going back to what you've already learnt. Even if you do not, it will most certainly help enforce your understanding of a particular concept. It's like revising a topic over and over again.

Pair Coding. 🧑‍🤝‍🧑

Find someone who you know, your friend, or someone else from a community with whom you've interacted frequently and ask them to pair code with you.

In pair coding, you and another person will meet up together, either virtually or in person and will work together on the same project or work on your own projects separately. This is really useful in the following ways.

You'll have someone to be accountable to be with other than yourself (your pride gets in the way of not embarrassing yourself in front of someone else)
The feedback you get is almost immediate.
A pair of minds are better than a single one. You'll have someone to test your ideas and theories and you can test for someone else too.
Working on projects becomes fun, you get to work together and work in a flow building it quickly.

When I started out coding, I had Surendar PD as my coding buddy. I knew him back from school, and we bonded the most when we started meeting each other to code and create projects and that was after school ended.

You're not an imposter. 🙅‍♂️

When you're learning something new, you're stepping out of your comfort zone. This can churn up a lot of feelings, especially those of fear because for the most part, you'll not understand some things and that's completely alright.

You might also feel like what you're doing and what you're learning might be a waste of time. Or even that you're not the right person to do it. These thoughts and feelings might seem so real and valid, but trust me they aren't!

When you're stepping out of your comfort zone, you also get something known as imposter syndrome. It's usually the negative voice that tells you all the bad stuff that might happen if you keep going. It keeps telling your that you're an imposter, that you're a fake for doing things you've never done.

It's tough not giving in to it. I still face it every time I learn something or when I try to teach something that I'm familiar with. Here are some tips that I found useful for not giving in to my imposter voices,

Look back at your journey and see how far you've come. Often the voice tells you to give up and that you've reached your limit. Stop and take a moment to see how much progress you've made and appreciate yourself for it.
Write down these thoughts and challenge them. Just because it's a thought or because you feel like it, it doesn't mean it's real. When you write down these thoughts, they will seem ridiculous the moment you read them and if not, you can always question them for their validity.
Ask for help. Never hesitate to ask for help from your friends, your mentors and guides. They've most certainly gone through it themselves and can help you understand where your worries and disbeliefs stem from.

Resources that helped me level up. 🚀

Websites

YouTube Channels

Share what you learn, so others can learn from you. 📚

Just because you're a beginner or someone learning something new, that doesn't mean you can't talk about it. When you're learning something new, write or record videos about what you learnt and publish it in public.

Sure you might not have much interaction with what you share. And you might also get some critical comments. However, sharing what you learn can be more beneficial than you think.

It helps enforce what you just learnt.
What you share is proof of work. It shows that you're doing things and putting in the effort.
It might help someone who's just starting out learn other things from you.
You become a guide and mentor for others the more you share what you learn.

My Journey in Web Development - Dev Retro 2022.

Kunal Keshan — Sun, 18 Dec 2022 23:59:08 +0000

It's been close to 2 years since I started my journey in Web Development. Just like everyone I started off with learning the basics and slowly out of curiosity learnt some of the advanced stuff.

Last year, I spent most of my time mastering the fundamentals down to the core. And I was lucky enough to be part of Think-Digital, a community for students to upskill themselves with the support of mentors.

Without Muazam, Harshit, Avichal and Arindam bhaiyas help, I wouldn't have been able to reach where I am today, they helped me to master the basics by guiding me and the team to learn consistently, build projects and always be open to asking doubts without any hesitation. We had fun times building projects together, playing small development games like https://cssbattle.dev, mini hackathons and stuff that kept learning web development fun. Thank you bhaiyas for taking teaching us with all your effort. 🥺

✅ Learnt the fundamentals of Web Development.

✅ Understood how to work from front end to back end.

✅ Built a full-stack project, similar to Instagram, just instead of photos, you post with text.

🔗 Practice Projects I worked on: https://github.com/kunalkeshan/ThinkDigitalPracticeProjects

🔗 Full-Stack Project: https://github.com/kunalkeshan/thinkdigital

In the same year (2021) I was given the vice lead position at Think-Digital and the opportunity to lead the team. I too focused on sharing what I knew with the new recruits.

✅ This gave me the chance to get out of my fear of public speaking,

✅ understand the importance of preparation before taking up a talk,

✅ get more confident and

✅ explore things about web development even further.

🔗 Internal Sessions Timeline: https://kunal-keshan.notion.site/TD-Web-Development-Roadmap-September-Recruits-2021-14ca7919fa6a4d4abd137ce7bc695f80

🔗 Internal Sessions Playlist: https://youtube.com/playlist?list=PLolW4AaQgQKHMPHw3Xo3KxVQUterEaEwr

🔗 Think-Digital's First WPS: https://youtube.com/playlist?list=PLolW4AaQgQKGr9FWGy1Ko-AWijmNBxJ1N

I made sure we had the weekly sessions of learning and development projects, and in all the flow, I did miss out on one thing, to be honest, I shared my knowledge and did learn a lot of new things, but didn't focus much on building much of a team.

This did cause the team to become stale. There are only less than 4-5 active members towards the end of the sessions. I still do think what I could have done differently here that would have helped me keep the team active. Would appreciate any advice I can get here.

Being a part of Think-Digital also gave me the opportunity to work on external projects that involved using advanced tech stacks like React, and MongoDB and also work with no-code tools like WordPress under the guidance of Thina, Gaurav and Muazam bhaiya.

✅ Helped build Atom

✅ Learnt a bit about integrating ML Algorithms to a backend application written in Node.js

✅ Worked on external projects that involved WordPress.

🔗 Atom Portal: https://atom.think-digital.in/

I was then promoted to the lead of the Web Domain at Think-Digital. This time I tried to do activities that would help the team collaborate and become more active. So I thought of projects that we could work on as a team and also conducted an event in which the full team took part.

"Web Dev Week" was a week-long event of knowledge exchange on both technical and non-technical topics. All the members of the Web Team were involved here.

Fast forward to this year (2022), it was a joy ride in itself in terms of my development journey. I joined the IEEE team at SRM and met some of the most amazing seniors Shaurya, Mawia, Kaushik and Snehil bhaiya from college.

All of them are awesome and polished developers who were literally on another level and learning from them, even in a single conversation with them, you'll end up hearing about something you've never worked on before.

At the beginning of 2022, I focused my time on learning more about frontend frameworks, specifically with React and Snehil bhaiya was a huge support here. Learnt the fundamentals, and build a lot of projects with it just to get the hang of working with React. ⚛️

Further started exploring Backend development with Node.js and Express, built fun APIs and learnt a bit about Web Scraping here. Joining teams in colleges like SRMPedia did give me a bit of exposure to new development tools.

As I progressed, I figured out that I was more into Backend Development and continued exploring that field event more. I even did a #100DaysOfCoding challenge to push myself to learn something about development for 3 months straight.

Got my first internship at Blackwins Tech Solution as a frontend developer with Muazam bhaiyas referral. Working here was something entirely different, as we were working as a team, with tight deadlines and some of the features required were really advanced to me. With the help of Lavanya and Rajmohan, who came to impromptu meetups I was able to get the work done most of the time. 😅 Thanks for your patience with me Blackwins Team.

✅ Learnt advanced React concepts, working with hooks and global state management using Redux.

✅ Introduced to Docker for the first time.

✅ Introduced to the concept of microservices.

✅ Understanding the flow of a really large backend application and its integration with multiple front-end clients.

Go the opportunity to take up the "Webture" Bootcamp on full-stack development, by IEEE SRM. I spoke more specifically on back-end development, about Node.js, Express.js, and MongoDB and built a Rest API that allows CRUD operation on an article-type database. The audience was over 200+ and the rush I had was really high.

In the beginning, I did struggle and stammer a bit, and with the flow of time, I was able to speak more comfortably with a large audience. This event helped me get more comfortable with a live audience, compared to the online sessions I used to do this was totally different.

Moving forward, I wanted to use the skills I've gained as a web developer to give back to the student community. And something I learnt along the way was to create projects that solve a problem that you've faced rather than creating projects just for the sake of your resume. Thanks to Avichal and Arindam bhaiyas insight above I created two projects that I believe do help the student community.

📚 ECE Notes Initiative: https://notes.kunalkeshan.dev/

🖇️ Shiryoku (Resources): https://resources.kunalkeshan.dev/

This in turn fueled my curiosity in Open-Source development and I've been or at least tried to be a paragon of Open-Source in my college. Creating awareness and getting people involved have been one of my goals ever since.

Toward the end of this year, with Kaushik bhaiyas help and support, I was able to start exploring TypeScript and create simple frontend projects to the backend as well. I've even written the code for Shiryoku in TypeScript as well. And at the moment, I've become a fan of working with TypeScript. 😍 I've said it before and said it again, once you start using TypeScript there is no going back to JavaScript.

Currently, I'm exploring Next.js and also building projects with it as a part of Rentyaar and IEEE SRM.

The people I've been with have always been supportive of my work, I see myself as one of the lucky few who got the chance to get the right mentors and the right companions to learn from and learn along.

My friends Surendar, Jayanth, Jaswin, Kumar, Vedant, Himanshu, Rohan, Raman, Sangam, Likhit, Aman, Yakub, Ritveek, Vivek, Surya, Krishna, Disha, Priyanshi, Kevin, Arnav, Aditya, and Kartik who have been great motivators and amazing at the feedback that they give has helped me a lot in the journey here. There are many names that I couldn't add here, but thanks to everyone who's helped me reach where I'm today. 🤗

Looking forward to learning and growing more this coming year. Cheers. 🍻

20 Lessons in 20 Years.

Kunal Keshan — Sun, 11 Dec 2022 14:20:27 +0000

Yesterday, I turned 20 years old. And it feels just like any other day out there. Although I wouldn't be here if it were for the people around me and how much they've helped me grow, especially in the past 2 years of my life.

Recently I have changed my perspective on birthdays, after reading an article shared by GS Thina, on how your birthdays are not only to celebrate another year of your life but also for the sacrifices, pain and struggle your parents have made for you. It is because of them that I am here today, getting to experience things I've never thought of, and meeting people who inspire me every day and a lot more.

Here are some lessons I've learnt in the past 20 years, most of which I've only picked up in the past two years of joining college. And I'm not a perfect example of following all of these, there are times when I do feel lost and unsure what to do, and coming back these lessons act as a compass in the times when the sky is dark.

0️⃣1️⃣ Find the right mentors early on. Getting a mentor for yourself in life or any specific field that you're looking forward to improving on can change the game altogether. It can accelerate your growth exponentially and help you become well-versed and equipped for what's to come. I was lucky enough to get the opportunity to have mentors accessible to me at an early stage in my college life through Think-Digital.

0️⃣2️⃣ Motivation alone is not enough. You need consistency and hard work to achieve the goals that you want. You need to be willing to put in the effort day in and day out too, even showing up for 5 mins daily makes a whole lot of difference in the long run.

0️⃣3️⃣ What got you here, will not get you there. You might have made a lot of effort in changing yourself and how you work for the good, and that's really great. However, if you get stuck in the old ways, you'll not move forward and achieve what you're meant to. Being willing to change your beliefs and thoughts is not a bad thing, it's a superpower that will help you break your limits.

0️⃣4️⃣ You create your own opportunities. Be impatient with your actions and patient with your results and you'll find that you'll get opportunities much more frequently and also those that give good returns also.

0️⃣5️⃣ Keep your expectations low. Even after the hard work you might've put in, things might not always play out the way you think they should. There will be failures and lessons along with them, learn to accept and learn and move on.

0️⃣6️⃣ Nobody is obliged to return you the favour. Just because you helped someone, it doesn't mean that they're also obliged to do the same to you. It doesn't always work that way. Focus on how you can add value and give to others without thinking much about what you'll get in return. Do things out of the good of your heart, not for the exchange that you might get.

0️⃣7️⃣ Appreciate the little things. Despite coming from a privileged family, I've just recently started to appreciate the little things that I have. Having a roof over your head, getting full three meals a day, getting to go to college, having a place to stay with all the comfort that you need, these might sound common, but these little things are what keep me going.

0️⃣8️⃣ Take small and calculated risks. Sometimes it's important to take that chance that you might feel scared of, you never know what's on the other side once you're done with it.

0️⃣9️⃣ Early in your days of exploring, say YES as much as possible. When you're learning something new, and you get an opportunity to work, learn or attended some event related to what you're exploring say yes to it. Even if it inconveniences you in the beginning, this is a great way to learn and grow as fast as possible. It will also help you understand what's out there in the field that you still need to get a touch of.

1️⃣0️⃣ Learn to say NO. Contrary to the first one 😅. Sometimes, you just have to say NO, to those external events that you know will have no value to you. You know what's best for you, even if it's a tough one, it will also be the right one.

1️⃣1️⃣ Explore as much as you can before you find what's right for you. I remember in the first year of my college, I was learning how to write a blog, learning about the stock market and trading (lost of bit of money here 😭), graphic designing and video editing (these come in handy right now when I'm making content), making music, then coding specifically web development. It's in web dev where it all clicked with me, something that I'm really interested in and is really enjoyable, whenever I work on web dev projects I feel fun and I'm unable to stop. You gotta explore whatever you can out there to find what makes you happy.

1️⃣2️⃣ Hard choices, Easy Life. Easy choices. Hard Life. Being disciplined about your plans to achieve your goals makes the difference between the achiever and the perfectionist. Doing the hard work now will definitely make a difference at a later point in life. Having a long-term mindset will definitely help you take actions now which are more oriented towards your goals.

1️⃣3️⃣ Surround yourself with people with similar goals. Be it your friends, your seniors or even people who've already achieved what you're looking for. They will give you insights on how you can reach their level and in every conversation you have with them you'll always learn something new.

1️⃣4️⃣ Have different circles for different purposes. Extending on the previous point. Sure, working hard is really important, but all work and no play makes life monotonous and you'll eventually get burnt out. It's better to have different circles, one for learning and growing, others for having fun, some with whom you do business, but don't get stuck up on boundaries, you're always free to share what you want with whom. For me, this helps me switch up my mood, and not get distracted by things that are not meant to enter the circle.

1️⃣5️⃣ Even if you find something you're passionate about, don't stop exploring. After exploring web development, I kinda stopped exploring other fields, and to be honest, this was one of the reasons why I kept burning out, exploring some new things helped me get out of a rut, learn new things and get a clearer perspective.

1️⃣6️⃣ It's okay to feel bored and tired of things you may be passionate about. We're all human and at the end of the day, you can only do so much. You might be putting in all the effort, day in and day out, and that's really great. At the same time, it's also important to take breaks and focus on yourself, get the proper rest that you need before you feel reinvigorated to go back to the things that you're passionate about.

1️⃣7️⃣ Pen + Paper >>>> Any other productivity tool. I've tried so many productivity tools out there, and have realized that nothing beats the feel and flow that pen and paper give you. Using pen and paper gives you the freedom to express your ideas without any restraint, gives you a good flow and overall, there's no distraction when working with those.

1️⃣8️⃣ Learn finance and budget early on. Knowing the basic financial terms and flows will help you make better financial decisions. In college, you might think that they're not much required, but if you start early on, you'll be surprised at how much finance plays a role even while you're a student. Learn to invest early on, do your research and make budget plans for how you want to spend your pocket money or stipend from some internship.

1️⃣9️⃣ Have someone to speak to. Be it your friend, your siblings, or your parents, have someone with whom you can express your problems and troubles to. Someone who you trust and who will listen to you without any judgement. Bottling up your emotions might help in the short term, but you'll not benefit from it in the long run, having someone to talk to helps your clear your mind, and express your needs and what you're feeling.

2️⃣0️⃣ Be proactive about your habits. In the book Atomic habits, James Clear said, "Habits are a double-edged sword, they will either make you or break you". Some bad habits may limit you, but they can definitely be changed or diminished, and you can definitely build good habits with the right system and mindset.

These are some lessons I've learnt over the past few years, most recent and still serve as a good guide to keeping me in check. Cheers and thanks for reading. Here's to another year of exploring, learning and interacting with new people who might come along on the journey. 🍻

How and Where to contribute to the ECE Notes Project?

Kunal Keshan — Sun, 28 Aug 2022 04:13:00 +0000

The project is live and open for anyone to contribute to. Ever since the project went live, I’ve made various pieces of information on how anyone can contribute to the project efficiently, but I’ve missed out on where to contribute to!

A contribution request or an issue is as simple as noticing that there are some pieces of the project that are missing or are not in sync with each other.

All that’s needed to be done, is to open an issue in the GitHub project about what’s missing, with the appropriate title and description and someone will have a look at it. This is given that you don’t have the notes currently with you and are in need of it.

For a more detailed approach check out this video.

If you have some notes, but don’t know how to contribute using GitHub, you can check out this playlist where I guide you on how to create a fork, upload your notes and open a pull request.

Collection of all notes of SRMIST B. Tech Electronics and Communications Dept. for the academic year: 2020-24. Visit the Repository or Drive to access all no...

youtube.com

If you’re not up to using GitHub, then you can fill out the form below, with the drive links to your notes, and I’ll help you add them to the project from my end.

Contribute to the ECE Notes Project

docs.google.com

Here are some other articles I've written that you will interested in:

The best collection of ECE Notes you'll ever find!

Kunal Keshan ・ Aug 1 '22

#ece #btech #srmist #notes

Should I learn WordPress or Full-Stack Development?

Kunal Keshan ・ Jun 13 '22

#webdev #wordpress #discuss #beginners

Who am I?

I’m Kunal Keshan, currently, a student at SRMIST, KTR, pursuing Electronics and Communication Engineering. I have a passion for Computer Science and Development and have been exploring it for a while now. I’m far from an expert and I’m always eager to learn something new.

Here are my profile links if you’re interested in connecting!

Instagram: https://www.instagram.com/kunalkeshan/
LinkedIn: https://www.linkedin.com/in/kunalkeshan/
Twitter: https://twitter.com/_kunalkeshan_
GitHub: https://github.com/kunalkeshan

The best collection of ECE Notes you'll ever find!

Kunal Keshan — Mon, 01 Aug 2022 01:52:59 +0000

Are you a student pursuing your Undergraduate Bachelors in Electronics and Communications Engineering?
Have you been facing difficulty with accessing notes and study material to prepare for your exam?
I've faced the same problem as well. And to solve it, I made the ECE Notes Project and it's something you don't want to miss out!

What is this Project about?

The SRMIST B.Tech ECE Notes Project is an Open Source collection of all ECE Notes for the Academic Year 2020-24. It includes, notes, text books, lab notes, and study guides for all subjects taken for the ECE Curriculum.

You can access the GitHub Repository to the notes here:

kunalkeshan / SRMIST-B.Tech-ECE-Notes-2022-24

Collection of all B.Tech ECE Notes for the academic year 2020-24.

B.Tech ECE Notes

Collection of all B.Tech ECE Notes for the academic year 2022-24. Read below for further insight on subjects for Each Semester.

Large Documents are present in the above drive as GitHub only offers 25mb max per document.

Contains direct access links for each sememester and subject.

Table of Contents:

Refer Curriculum for detailed information.

Warning Semester 1 - 3 notes are based on online classes. Study material might be relevant but not the test notes. Take it with a grain of salt.

💫 Motivation

Before I switched to on-campus courses, I took all of my classes online and hardly interacted with any upperclassmen. Without assistance, it was difficult for me to locate relevant readings and…

View on GitHub

There's also a website, for easy access to all the links for each subject:

ECE College Notes [SRMIST | 2020-24]

Collection of all B.Tech ECE Notes for the academic year 2020-24. Contribute to the notes by visiting the GitHub Repo of this Project. Made with ♥ by Kunal Keshan.

notes.kunalkeshan.dev

Why do I call it the best?

The best part of this project is that it's Open Source, It's open, easily accessible and absolutely free for anyone in need of the resources present here.

A few other reasons why I call it the best is...

Direct Download links for each semester and each subject.
Guide on how to study for each subject and how difficulty it is. (Subjective)
Has a website with the links for easy and direct access to the notes.
Being open source, it is peer-reviewed and trustworthy!
And much more...

My personal motivation towards this Project.

When I joined college, I didn't have any access to notes until the professor was ready to share them or I had to ask a senior to share as well. In most cases, it took time and I received them only at last minute.
This was not limited to notes alone but also for Question papers and other relevant study material.

I started this project with one philosophy in mind,

Be the senior you need the most as a junior.

I wanted to help out others who could have access to the notes early and help achieve their academic goals quicker. So I took what I learnt from Web Development so far, and built out this project as way of expressing my philosophy.

Parts of this Project.

The project is split into two parts, a major notes, the core of the project and the minor website, the support of this project.

Notes.

As mentioned above, this is the core of the project that contains all notes and study material. You can access it through the GitHub Repository mentioned below.

The notes are in the main branch of the project.

kunalkeshan / SRMIST-B.Tech-ECE-Notes-2022-24

Collection of all B.Tech ECE Notes for the academic year 2020-24.

B.Tech ECE Notes

Collection of all B.Tech ECE Notes for the academic year 2022-24. Read below for further insight on subjects for Each Semester.

Large Documents are present in the above drive as GitHub only offers 25mb max per document.

Contains direct access links for each sememester and subject.

Table of Contents:

Refer Curriculum for detailed information.

Warning Semester 1 - 3 notes are based on online classes. Study material might be relevant but not the test notes. Take it with a grain of salt.

💫 Motivation

Before I switched to on-campus courses, I took all of my classes online and hardly interacted with any upperclassmen. Without assistance, it was difficult for me to locate relevant readings and…

View on GitHub

Website.

The website is a support to the whole project, it contains links for each semester, courses in each semester, they include the repo, download and drive links.

The website is present in the client branch of the project and is deployed via gh-pages.

ECE College Notes [SRMIST | 2020-24]

Collection of all B.Tech ECE Notes for the academic year 2020-24. Contribute to the notes by visiting the GitHub Repo of this Project. Made with ♥ by Kunal Keshan.

notes.kunalkeshan.dev

How can you Contribute?

If you have some material that will add value to the project or have some suggestions that can improve the quality of the website. You're welcomed to do that!

Check out the contributing guidelines on how to contribute for the following parts of the project mentioned.

Contribute to the Notes: https://github.com/kunalkeshan/SRMIST-B.Tech-ECE-Notes-2022-24/blob/main/CONTRIBUTING.md

Contribute to the Website: https://github.com/kunalkeshan/SRMIST-B.Tech-ECE-Notes-2022-24/blob/client/CONTRIBUTING.md

Share this with your friends who are pursuing ECE if you find this helpful!

Should I learn WordPress or Full-Stack Development?

Kunal Keshan — Mon, 13 Jun 2022 16:07:18 +0000

Overview

If you're a beginner in web development, you might've gotten a lot of suggestions from the net about choosing WordPress over full-stack development and vice-versa.

Comparing the amount of time taken to learn. How much important is it in the industry? How relevant it is to you and what you're trying to achieve? And how much will it help pay your bills?

Taking the above questions and much more into account, you might still be confused about which one to choose over the other.

Let's also take into account any No Code platforms in this discussion.

Quick Intro to WordPress

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes - Google

You can literally create websites within a matter of minutes and get them up and running immediately.
A multitude of websites ranging from simple portfolios, product display, and research websites to complex eCommerce websites, blogs, registration apps and much more! WordPress has it all, the great part is that you don't need to know how to code to create WordPress Websites.

Other Platforms like Wix, Ghost, and Squarespace also allow you to do the same.

Full-Stack Development

Full-Stack Development is a journey of creating websites from scratch. Building the frontend and the backend of the application using various Tech Stacks.

This involves putting in the hard work of learning programming languages, building out projects, facing lots of errors and making lots of mistakes.

Learning Full-Stack development takes time and hard work. And the work that you put in will definitely pay off in the long term.

Developing websites by yourself will give you a lot of space to customize things to your own requirements and not give in to the constraints of No Code platforms.

Discussing WordPress vs Full-Stack Development

Both are awesome and are extremely relevant. It's the use case that should be taken into account when you're trying to choose what to move forward with.

If you're simply looking to put some content out on the web, without the hassle or learning how to code. Or if you want to learn a way to do it for others (freelancing) by creating static websites, then No Code platforms should be your go to!

They're easy to pick up, build, maintain and deploy.

However you'll be limited with the plugins and themes that are provided by these platforms, it'll be tough building on top of them if you have no knowledge of development.

Developing products, services, and apps and customizing to the very minute details require you to learn development. And that's the great part about it, you learn and implement stuff that No Code platforms do not have the option for.

Learning Development also opens doors to opportunities that you might've not had with working with WordPress alone. You even get to create plugins for WordPress.

Different Perspectives

If it's something that is short term, or something that you're looking to get done quickly. WordPress is what you should choose.

When it comes to creating Web Apps specifically, you'll need to learn Development. In the long run of learning, it will pay much better than limiting yourself to WordPress alone.

The Best of Both Worlds

Something I've been noticing recently is that many SaaS founders use the combination of both No Code platforms and the knowledge of Full-Stack Development to their advantage.

They create their product page with No Code Platforms for the purpose of marketing and advertising their product/service. And when it comes to their actual service, it's fully built from scratch and customized to the service they're providing.

Move forward with the one that suits your needs, and also learn how to leverage the best of both worlds.

Thanks, Chandana for coming up with this amazing question! And Thina, Himanshu, Avichal, Arindam and Snehil for giving their insights as well.

The Developer Urge to Start New Projects (and how to stick to your current ones).

Kunal Keshan — Tue, 31 May 2022 08:16:26 +0000

It's a casual day of coding on a project that I've been working on for about a month. While learning how to implement a new feature, I got an idea of how to use what I exactly learnt into a new project.
I go over to my GitHub account, create a new repository, while the dozens of incomplete projects watch me do it. (Find it relatable?! 😅😂)

What is it about new projects that we drop the current ones we're working on? Why are they (generally speaking) more fun? and how do we stick to the current work before moving on to new projects?

I've been thinking about this and to solve them, I reached out to my mentors, seniors and peers in my college.
What I learnt was much more than what I thought the answer to this could be!

Personally, I feel that whenever I learn something new I must try and implement it somewhere to explore all sides of it. This goes on like a domino effect, one new learning, triggers another project and there's always something new to learn in every project.

Obviously, my opinion didn't leave me satisfied and to know more about this and how to stick to the current projects I was working on, I got words from my seniors on this.

As Developers we need to understand that not all side projects need to be completed. Every projects is an opportunity and a valuable experience to learn something new regardless of it's success or failure. Only when you're strongly committed to a project will you be able to complete, or until you're getting paid for it XD. - Snehil

🤯 Yep, that's how I felt too. It's okay to have numerous uncompleted projects, they're all part of you're developer journey and helped you get where you are today.
Some points to mention to stick to your current projects,

Write down your new ideas somewhere, someplace that you know you will refer to frequently.
This way your head is clear on only what you're working on.
When you're somewhat free, you can pick up stuff from the list and start to work on it.

It's easier to start new projects because they're simple to initiate and not as simple as completing already on going projects. - Avichal and Arindam

Human nature being that we choose the path of least resistance we can take up, and yes, new projects are much easier to set up, there's no bound to complete them, and it's much simpler than finishing ongoing projects.
Some ways to stick to your current projects,

The way to stick to your project is to work on ones that solve a personal problem, something that you're passionate to find a solution for, not something that will make your resume shine. This way, you'll be more dedicated to do whatever necessary to the end.
Work on projects that place you in the right challenging zone, you implement what you already know, and you also put in effort to add something extra, something you didn't know before and nothing too complicated.
Break your projects into small pieces and make a plan to complete them on a daily basis.
Work on projects that you're passionate about, or even if it's a simple clone project, add additional feature that you think will improve the app as a whole.

A new project gives us a clean canvas to work, a start of the project is the time when you can go creative, a new design, new APIs and a completely new outlook.
Current projects can get really boring, I think constant progress is the only thing which can keep you going once you stumble. - Hardik Garg

Constant progress is the process of doing something consistently. Without consistency a flow is broken and it's difficult to regain the momentum there once was.

It's a very common experience to go through. From my personal experience, I can say that we tend to loose interest in a project if we work on it for too long. - Gaurav Prasad

In order to deal with this,

Create milestones for your projects.
Track them and work on it consistently.
After achieving it, start doing the same with the second project as well.

Make sure that the time allocated is not to long to make it boring. Always try to understand the project as a whole before coding into it.

If you're working on a project with a vision and a goal, you'll avoid skipping on it. However, if you're working on a project just for the sake of doing it, you'll jump from one to another. - GS Thina

Yep, agree with this one. Until you know that it provides a long run benefit to you or to others, there will be no reason to stick to it in the short term.

It's better to not commit to new projects until you're done with the older ones. - Vivek

What are your own personal theories on this topic?

In Conclusion

New Projects are fun, they help stimulate our creative minds and as developers it's a part of the process to have many unfinished projects and it's nothing to feel guilty about.
It's human nature to get bored or to go to what seems more interesting than to stick to what you're currently doing right now.
I've gotten a lot of great insights from this and will be back to answer such questions with great insights! Stay tuned.

From a Biology Enthusiast to a Coding Freak. My Journey So Far. [ August 2021 Perspective]

Kunal Keshan — Mon, 28 Mar 2022 11:43:58 +0000

Specific Knowledge is found by pursuing your genuine curiosity and passion rather than whatever is hot right now.
Naval Ravikant.

I'd like to give you a little bit of background check on myself. My parents, their siblings and their parents all come from a medical background. Even my sister is pursuing medicine. When I entered 11th class just like everyone else, I was given the option to choose between, Biology, Computer and Commerce.

Having come from such a background, I had unknowingly developed a notion that I had to continue in the same business down the line, that I too had to pursue medicine and so I ended up choosing the Biology stream.

I wasn't exactly into pure science, at the moment when I was choosing my subjects, I felt something was off, so I gave it careful thought. We had an option to choose 6 subjects in total, Biology, Physics, Chemistry, English were the compulsory ones, now I had the option to choose subjects like PT, or even home science, but I ended up going with Math and Engineering Graphics as my last two subjects for 11th.

I was the only one in my class with that combination. This combination had its pros and cons, but the freedom it gave me to switch my future career choices was what allowed me to dedicate my time to each of those subjects.

Somewhere deep in me, I knew that biology wasn't my cup of coffee, as interesting as it may be, it took me 2 ½ years to realize that I like physics, maths and almost 3 years to understand that I like coding even more.

Towards the end of my board exams for the 12th class, I was going and registering for all the entrance exams that I could find, NEET, JEE, were the main focus but on the side, I had registered for the college conducted entrance exams as well, SRM, BITS, HITS, whatever I could find, I applied.

Then the pandemic came along, all the exams were postponed and colleges closed. I was given an ample amount of time to prepare for those exams, out of all the 8 or 9 applied, I only attended 3. And NEET was not one of them. As it turned out, I failed in all of them.

It was depressing at first, I ended up thinking about all the things I had done wrong and while thinking about my past, I remembered back in 9th class we had a computer science subject where we had to code websites using HTML alone.

I remembered how fun it used to be back then and that piqued an interest in me again. Since I already had the privilege of owning a laptop, I started surfing the internet about HTML, how to code in it and mainly what could be the job opportunities surrounding it. That's when I came to know terms like web developer, full-stack, databases and such.

This was all happening around August 2020, SRM and VIT had announced that they'll be doing admissions based on the 12th marks that we had obtained. This was the only opportunity that I had of getting into a college, so I applied for both.

I was hoping a lot for VIT, but couldn't get shortlisted there. However, I was able to get selected for SRM, and that's when the time came to choose which course to pursue. I had to think this through, What am I good at? What made me happy? Which course would have a good scope in the future? Which one has the best career opportunities in the future?

Back in school, I used to tinker around with a lot of electronic projects and I enjoyed doing them. This was one of the supporting reasons why I ended up choosing Electronic and Communications Engineering (ECE).

In September 2020, I had learnt about HTML, and a bit of CSS, but was feeling very nervous about JavaScript (JS), I never really had any knowledge of coding, whenever I used to look at JS code, it seemed so overwhelming and something very advanced.

I decided to take a break and focus on college for now. The first semester classes had begun around the end of September and as it turned out one of the subjects of the 1st sem was Programming for Problem-solving, it involved learning C Programming from the very basics. I'm really glad I had this one subject, after going through it, I was a bit more confident about coding and when I looked up JS code, some of it started making some sense.
Fast forward to January 2021, I came across a post of one of the clubs in SRM known as Think-Digital conducting a workshop on web development, I thought this was the perfect opportunity to pick it up again and the best part, it was for free.

On 23rd January, I attended their workshop and met some of my seniors within the college. All online of course. They had taught us how to make a login page with some added functionality, it was only toward the end of the session I came to know that the club was conducting this workshop to recruit members, to get in the club, the main requirement was to just be curious about the domain that you were interested in.

They gave us the task of recreating the same project with some added JS functionality, I did only a part of it. Later they conducted an interview, I have no idea how I got through it, if I recall correctly I was asked, "How much time are you willing to dedicate to the work given to you?", I replied, "Depends on how interesting the task is," and at that moment I felt I messed it all up, one of them said, "Okay, very honest answer, wasn't expecting that."

There was one question where I really struggled, "What three words would you use to describe yourself?", I was stuck there, I realized that I didn't know myself well enough yet to answer that. All of this was happening within almost two weeks and it was so damn exciting.

Somehow, I got into the club on the 2nd of February. They conducted a welcome meeting for the freshers getting into the club, we introduced ourselves and were given a background of the Club and what it does, how things are conducted and what role we play in the club.

The unique thing about this club was that there was a system of mentors and mentees which everyone had to go through, we started once every week, where the seniors would teach us a specific thing about the domain we were in and gave us tasks to work on.
It started with coding, sign up and login forms, to making clones, then to-do lists where we started going into detail about JS, APIs, and at the moment we are learning about, DBMS (Database Management Systems) specifically MySQL along with Node.js and express.

Many were challenging, but the fact that the seniors readily helped us whenever we were stuck was great. I couldn't be more privileged. Getting into the club was one of the best things that have ever happened to me.

Truth be told, somewhere towards the end of March, while we were still at the beginning of the training with the club, I felt things were going a bit too slow. At the same time, one of my friends, Surendar PD, from SRM Ramapuram was also picking up web development and was working on React Projects. (React is a front-end library, that uses the concepts of components for the simplification of creating complex user systems.)

That piqued my interest again, and I had something new to learn. He taught me about creating react apps and showed me some resources to learn from. A few months later, I made a simple YouTube clone using react. Haven't worked much on it since, but I do know that I will be using it in the near future to build full-stack apps using the MERN stack. Something that I'm personally looking forward to.

Retrospecting the last 8 months, it's been an amazing time spent learning a lot of things, and slowly transitioning from being afraid of coding to being unable to stop coding at all. For me, most of it didn't seem like work one bit, all I knew was that I was having fun and still am. I guess that is what makes the difference between what you have to do and what you want to do for yourself. Do you agree? What are your thoughts?

Create a Contact Form with Node, Express, Nodemailer, and TailwindCSS.

Kunal Keshan — Mon, 28 Mar 2022 09:32:17 +0000

Be it for your Portfolio, a company website, or any other website that you might be working on, a functional contact form leaves a good impression and also automates the process of sending the emails to your account.

In this tutorial, I'll show you how to make a contact form using Node, Express, Nodemailer and TailwindCSS. We'll set up a custom route to accept form responses, serve the HTML file to the browser, add functionality to the form and style it using TailwindCSS.

Prerequisites

NodeJs is installed in your system. If not, install it from here.
Basic understanding of HTML and CSS.
Basic understanding of Express.

Here's the GitHub Repo Link to this Project if you want to skip to the code directly.
https://github.com/kunalkeshan/node-express-nodemailer-tailwindcss-contact-form

Let's dive into it!

Getting Started

Create a new project (If you've not made one already). I'll call it node-express-nodemailer-tailwindcss-contact-form 😅 and open your terminal or VS Code within this project.
Run npm init -y to start a node project.
Install the following dependencies in the project.

npm i express nodemailer dotenv
npm i -D tailwindcss postcss autoprefixer nodemon concurrently

Express and Nodemailer are the core packages that will allow us to add the contact form functionalities and dotenv is to protect our email password.

TailwindCSS, PostCSS, and Autoprefixer are development dependencies that allow us to use tailwind classes in our project, generate a clean output CSS(postcss) file with cross-browser compatibility (autoprefixer).

Nodemon and Concurrently are development dependencies that allow the server to restart when there are new changes(nodemon) and run multiple scripts together(concurrently).

Add the following scripts to the package.json.

"start": "npm run build && node index.js",
"dev": "concurrently \"nodemon index.js\" \"npm run tailwind:watch\"",
"build": "npm run tailwind",
"tailwind": "npx tailwindcss -i tailwind.css -o public/style.css",
"tailwind:watch": "npx tailwindcss -i tailwind.css -o public/style.css --watch"

You'll need three parts for this project, a request handler, a function to send the email and the frontend with the functionality.

Contact Form Request Handler

Create a index.js in the root of your project and let's take a look at it part by part.

Import all the dependencies required. Note: See how dotenv is imported before all the custom functions as we'll need it to access the environment variables in the .env file.

/** index.js
* Contact Form Application
*/

// Dependencies
const express = require('express');
const path = require('path');
require('dotenv').config();
// const { sendContactEmail } = require('./mailer');

Set up Middlewares. Express JSON middleware is used to parse incoming requests as JSON. Express URLencoded middleware is used to parse URL encoded requests and attach them to the request body and finally Express static is used to serve the public files to the browser.

// Initializing Express App
const app = express();

// Setting up middleware
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.resolve(__dirname, 'public')));

Contact form Route. Nothing too complicated. A route that accepts POST requests at /api/contact. A basic contact form will collect the name, email and message of the person who wants to contact you, so at the start, we're destructuring those details from the request body. Next, we're passing on the details to a mailer function (which we'll get to in a few) and if all goes well we respond with success and a status 200 and if anything goes wrong, the catch block responds with an error and a status 400.

// Application routes
/**
* @description Accept contact form data and send it to the server
* @api POST /api/contact
* @data {string} name, {string} email, {string} message
* @access Public
*/
app.post('/api/contact', async (req, res) => {
// Collecting required information from the Request Body
const { name, email, message } = req.body;
try {
// Sending the email
// await sendContactEmail({ to: email, name, message });
res
.status(200)
.json({
message: 'Email sent successfully',
data: { name, email, message },
success: true
});
} catch (error) {
console.log(error);
return res
.status(400)
.json({
message: 'Unable to process request',
data: {},
success: false,
})
}
})

Start the Server. We're extracting the PORT from the environment and if one is not available, we assign it a value of 3000. Next, we start the server using the app listen method.

// Initialzing Server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});

Mailer Function

Create a mail.js file in the root and let's explore its content part by part.

Importing all Dependencies. Along with Nodemailer, we're getting our email and password from the .env file as well (We'll see more about it in a few).

/** mail.js
* Node Mailer Setup
*/

// Dependencies
const nodemailer = require('nodemailer');
const email = process.env.MAIL_EMAIL;
const password = process.env.MAIL_PASSWORD;

Creating a Mail Transport. We're using Gmail as the nodemailer service, you can use any SMTP that you wish, Gmail is easy and quick to set up.

// Mail Transporter
const transport = nodemailer.createTransport({
service: 'gmail',
auth: {
user: email,
pass: password,
},
from: 'Kunal Keshan <example@gmail.com>'
});

Function to send the contact form submission to your email. Using the transport sendMail method, and setting up the options, the function send's email to your account. You can send HTML or replace it with text as well if you want something simple. And finally, we're invoking the sendMail with the options and returning it.

/**
* @description Send email to the user
* @param {object} options
* @param {string} options.to
* @param {string} options.subject
* @param {string} options.message
*/
exports.sendContactEmail = ({ to, name, message }) => {
    const mailOptionsToOwner = {
        to: email,
        subject: `Contact Form Submission from ${name} <${to}>`,
        html: `
            <h1>Contact Form Submission</h1>
            <p>Name: ${name} <${to}></p>
            <p>${message}</p>
        `
    }

    const mailOptionsToUser = {
        to,
        subject: 'Thanks for contacting me!',
        text: 'I will get back to you soon!'
    }

    return Promise.all([transport.sendMail(mailOptionsToOwner), transport.sendMail(mailOptionsToUser)]);
}

Create a .env file and add your email and password to it. To add a Gmail account as a nodemailer service, you'll need to have 2FA enabled and you'll have to create an app password. Check this out on how to do it.

# .env
# NODEMAILER CONFIG
MAIL_EMAIL=<example@gmail.com>
MAIL_PASSWORD=<app password here>

In the index.js uncomment the import and invoke of the sendContactMail() function.

The Frontend

Setting it up. Create a public directory in your project and three files in it - index.html, style.css, and script.js.

At the Root of the project, create a tailwind.css file and add the following lines to it.

@tailwind base;
@tailwind components;
@tailwind utilities;

In your command line run - npx tailwindcss init -p. This will create two files tailwindcss.config.js and postcss.config.js in your project.
Open tailwindcss.config.js and you'll notice that you'll have the following object configuration present already.

module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

Modify the content: [] and add this to it content: ["./public/**/*.html"]. This is telling tailwindcss to watch the classes in the HTML files.
Do you remember the scripts that we added, in the beginning, to the package.json? Here's it another time.

"start": "npm run build && node index.js",
"dev": "concurrently \"nodemon index.js\" \"npm run tailwind:watch\"",
"build": "npm run tailwind",
"tailwind": "npx tailwindcss -i tailwind.css -o public/style.css",
"tailwind:watch": "npx tailwindcss -i tailwind.css -o public/style.css --watch"

We use the tailwind cli to watch any changes that we do to our project (specifically the HTML files as we mentioned in the content for the tailwind config) and output the classes we used with the styles into a styles.css in the same public directory. Notice that the --watch flag is being used to keep track of changes, something similar to nodemon.

We also have a build script that runs the tailwindcss cli and outputs the style in a separate file.
It's a keep only what you use approach.

HTML - index.html

Add the following code to the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Form</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" />
</head>
<body class="w-full h-screen flex flex-col gap-2 items-center justify-center bg-gradient-to-br from-green-400 to-blue-500 text-center">
<h1 class="text-2xl font-semibold">Contact</h1>
<form id="contact" class="w-full p-2 flex flex-col md:w-2/3 gap-2 lg:w-1/2" autocomplete="off">
<input type="text" name="name" id="name" placeholder="eg: John Smith" required class="py-1 px-2 border border-black rounded" />
<input type="email" name="email" id="email" placeholder="example@gmail.com" required class="py-1 px-2 border border-black rounded" />
<textarea name="message" id="message" placeholder="Hey! Let's get in touch, I want to..." required class="py-1 px-2 border border-black rounded resize-y" ></textarea>
<button type="submit" class="bg-blue-500 py-2 px-1 rounded text-md w-fit mx-auto font-semibold text-white hover:bg-opacity-100 bg-opacity-80" > Get in Touch! </button>
</form>
<div id="success" class="hidden text-md font-semibold"> You've successfully contacted me, I'll get back to you soon!</div>
<div id="error" class="hidden text-md font-semibold flex-col items-center justify-center">
<p>Oops! There's some error while sending me the contact details.</p>
<button class="bg-blue-500 py-2 px-1 rounded w-fit mx-auto text-white bg-opacity-80 hover:bg-opacity-100" onclick="javascript:window.location.reload();">Try again</button>
</div>
<div id="loading" class="hidden text-md font-semibold">Your Submission is being sent...</div>
<script src="/script.js"></script>
</body>
</html>

Now if you start the server, using npm run dev you should be able to see in your browser the following website.

Functionality - script.js

Add the following code to the script.js file. And let's examine what's actually happening.

/**
* Contact Form Functionality
*/

// Containers
const contactForm = document.getElementById('contact');
const loading = document.getElementById('loading');
const success = document.getElementById('success');
const errorEl = document.getElementById('error');

// Hide Container Function
const hideAllContainers = () => {
contactForm.style.display = 'none';
loading.style.display = 'none';
success.style.display = 'none';
errorEl.style.display = 'none';
}

// Contact Form Submit Handler
const handleContactFormSubmit = async (e) => {
e.preventDefault();
try {
contactForm.classList.add('animate-pulse');
loading.style.display = 'block';
const { name, email, message } = e.target;
const body = {
name: name.value,
email: email.value,
message: message.value,
}
const response = await fetch('/api/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
if(response.status !== 200) throw response;
hideAllContainers();
contactForm.classList.remove('animate-pulse');
success.style.display = 'block';
} catch (error) {
hideAllContainers();
errorEl.style.display = 'flex';
}
}

document.addEventListener('DOMContentLoaded', () => {
hideAllContainers();
contactForm.style.display = 'flex';
contactForm.addEventListener("submit", handleContactFormSubmit);
});

All the DOM Elements are being called using the DOM API and are being stored in variables.
A function hideAllContainers() is used to hide all the containers by accessing their style property.
A function handleContactFormSubmit() is used to process the form submission. If all goes well, the success div is shown and if anything goes wrong the error div is displayed prompting to try to fill the form again.
On the document object, an event listener is added called 'DOMContentLoaded' that only fires the callback function once the HTML file is loaded.
Once the HTML file is loaded hide all containers, then display the form alone and finally add the submit event to the form and assign the handleContactFormSubmit as the callback function.

As simple as that, you've just made a functional contact form. Test it out and you'll receive the email from the person who's trying to contact you.

Let me know how it worked out for you and if there's something wrong here, please do call it out.

DEV Community: Kunal Keshan

Learn How to use Context and Reducer Hooks in React.js by Creating a Global Snackbar.

kunalkeshan / global-snackbar-with-react-typescript-context

Discover the power of Context & Reducer Hooks in React.js by creating a global snack bar using TypeScript and bootstrapping with Vite.

Learn How to use Context and Reducer Hooks in React.js by Creating a Global Snackbar 🚀

Introduction

Prerequisites

Why use Context and Reducer Hooks?

Context Hooks to the Rescue! 🦸

Creating a Context

Providing the Context to Your Application

Using the Context in another Component

Upgrade with the Reducer Hook 📈

The useReducer Hook

Dispatch Function

Reducer Function

Create React + TS App With Vite

Application Set Up 🤖

Global State Management System 🌐

Creating a Context

Reducer Function

Putting it all Together

Global Snackbar

Foundation + Styling 🎨

Functionality ⚙️

Usage with Context + Reducer 🦾

Opening a Snackbar

Closing a Snackbar

Summing It Up

The Life Cycle of Developing a Website 🚴‍♀️

💡 Idea

🔦 Planning the MVP

📚 Requirements

🎨 Design

💻 Development

🧪 Testing

🌐 Deployment

⚙ Maintenance

🏗 Retirement

Learning to Code is a Marathon, not a Race.

Understand that there is no hurry in learning things. 🪁

Here's a list of fundamentals that you want to go through before getting into a specific field.

Don't just blindly follow the hype. 🏎️

Tutorials are useful, but only if you're approaching them actively. 🦾

Build, Build, Build! ⚡

Join a Community and create a network. 🫂

Here are some of the communities that have helped me grow exponentially.

Get a mentor for yourself. ✨

How can you find a mentor for yourself?

Learn to Unlearn. 📦

Pair Coding. 🧑‍🤝‍🧑

You're not an imposter. 🙅‍♂️

Resources that helped me level up. 🚀

Websites

YouTube Channels

Share what you learn, so others can learn from you. 📚

My Journey in Web Development - Dev Retro 2022.

20 Lessons in 20 Years.

How and Where to contribute to the ECE Notes Project?

Contribute to the ECE Notes Project

The best collection of ECE Notes you'll ever find!

Kunal Keshan ・ Aug 1 '22

Should I learn WordPress or Full-Stack Development?

Kunal Keshan ・ Jun 13 '22

Who am I?

The best collection of ECE Notes you'll ever find!

What is this Project about?

kunalkeshan / SRMIST-B.Tech-ECE-Notes-2022-24

Collection of all B.Tech ECE Notes for the academic year 2020-24.

B.Tech ECE Notes

💫 Motivation

ECE College Notes [SRMIST | 2020-24]

Why do I call it the best?

My personal motivation towards this Project.

Parts of this Project.

Notes.

kunalkeshan / SRMIST-B.Tech-ECE-Notes-2022-24

Collection of all B.Tech ECE Notes for the academic year 2020-24.

B.Tech ECE Notes

💫 Motivation

The `useReducer` Hook