DEV Community: FARHAN KHAN

🚀Running Client and Server Together in MERN — No More “Oh, I Forgot to Start the Backend!” Moments

FARHAN KHAN — Wed, 13 Aug 2025 21:21:55 +0000

When I was new to MERN stack development, I faced this problem way too many times:

I’d open my project.
I’d start the frontend (npm start inside the client folder).
I’d forget to start the backend.
Then I’d spend 10 minutes wondering why nothing was working… 😅

If you’ve worked with MERN, you probably know the drill:

my-project/
│── client/   # React frontend
│── server/   # Node.js backend

We usually run them separately:

# In client folder
npm run dev

# In server folder
node server.js

This means two terminals and remembering to start both every time.

💡 The Solution: Run Both Together with concurrently

A few days ago, I found a simple way to avoid this hassle — run both with a single command.

Step 1: Install concurrently

Go to your project root (the folder containing both client and server) and install:

npm install concurrently --save-dev

Step 2: Update package.json in the root

Inside your root package.json, add a new script:

"scripts": {
  "start": "concurrently \"npm start --prefix client\" \"npm run dev --prefix server\""
}

Here’s what’s happening:

npm start --prefix client → runs the React app from the client folder.
npm run dev --prefix server → runs the backend from the server folder (you can replace dev with whatever script you use for backend).

Step 3: Start both with one command

Now you can simply run:

npm start

🎉 Both frontend and backend will start in the same terminal!

Why I Love This

✅ Beginner-friendly — No more “Oops, backend isn’t running.”
✅ Cleaner workflow — One command, one terminal.
✅ Easy to share — Anyone cloning your repo can run the project instantly.

This might be a small trick, but it saved me time and frustration when I was starting out.
If you’re new to MERN, give it a try — your future self will thank you! 🙌

Happy coding! 💻✨
Have you used concurrently before, or do you have other tricks for running MERN smoothly? Share in the comments!

Custom Inventory Management System Using VBA: A Cost-Effective Solution for Small Businesses

FARHAN KHAN — Mon, 09 Dec 2024 05:35:18 +0000

Managing inventory efficiently is critical for businesses of any size. However, for small-scale businesses, investing in expensive CRM systems can often be overkill. This is where a custom inventory management system built with VBA (Visual Basic for Applications) comes into play as a simple, affordable, and effective solution.

In this blog, we’ll explore:

The advantages of a VBA-based system.
A practical example: WooCommerce and Excel integration using VBA.
A sneak peek into the implementation details we’ll cover in Part 2.

Why Consider a Custom Inventory Management System?

Small businesses often struggle with inventory management due to:

Limited budgets for software solutions.
The complexity of over-engineered CRM systems.
The need for tailored solutions that align with their unique workflows.

A custom VBA-based inventory management system addresses these pain points by offering:

Cost Savings: VBA is included with Microsoft Office, making it virtually free for those who already use Excel.
Customization: You can build a system tailored to your specific business needs, without unnecessary features.
User-Friendliness: Since Excel is widely familiar, employees can quickly adapt to the system.
Scalability for Growth: As your business expands, you can tweak the system to accommodate changing requirements.

Real-World Use Case: WooCommerce and Excel with VBA

One compelling use case of VBA for inventory management is integrating it with WooCommerce—a popular e-commerce platform. With VBA, you can:

Fetch product details directly from WooCommerce into Excel.
Update inventory stock, prices, and product names by simply editing Excel sheets.
Automatically synchronize updates with WooCommerce, reducing manual effort.

Advantages of This Approach

Simplified Operations Using Excel as the interface eliminates the need to learn complex CRM dashboards.
Reduced Costs Unlike premium plugins or SaaS tools, this solution incurs no additional subscription costs.
Streamlined Updates For example, you can update the stock quantity for specific products without overwriting other details, making the system flexible for partial updates.
Enhanced Productivity Automating inventory updates through VBA macros saves time, allowing your team to focus on core business activities.

Example Scenario: WooCommerce Inventory Update via Excel

Imagine you’re running an online store with WooCommerce. Your inventory spreadsheet contains:

SKU (Stock Keeping Unit)
Product name
Stock quantity
Price

With VBA, you can:

Input changes in the stock quantity directly into the spreadsheet.
Run a macro to update WooCommerce in real time.
Receive a status column update (e.g., "Success" or "Error") for transparency.

What’s Next?

In Part 2, we’ll dive into the technical implementation:

Setting up the WooCommerce REST API.
Writing VBA macros to connect Excel with WooCommerce.
Handling errors and testing the solution.

This series is designed to empower small business owners and developers alike to build their own custom inventory management systems without breaking the bank.

Conclusion

A custom VBA inventory management system bridges the gap between functionality and affordability for small businesses. With tools you already use daily, such as Excel, you can create a robust solution that simplifies operations, reduces costs, and adapts to your business needs.

Stay tuned for Part 2, where we’ll get our hands dirty with implementation!

Managing Multiple GitHub Accounts in VS Code: A Comprehensive Guide

FARHAN KHAN — Sun, 28 Jul 2024 10:36:02 +0000

Now a days in this fast-paced development environment, it's common for developers to have multiple GitHub accounts. Whether you're working with different organizations, contributing to open-source projects, or maintaining personal repositories, having the ability to switch between accounts within a single instance of Visual Studio Code (VS Code) is invaluable. This guide will walk you through the process of setting up and managing multiple GitHub accounts in VS Code, ensuring you avoid common pitfalls and maintain a streamlined workflow.

Step 1: Setting Up SSH Keys

To securely manage multiple GitHub accounts, you'll need to generate separate SSH keys for each account. This ensures that each account is uniquely identified and authenticated.

Generating SSH Keys:

Open your terminal and use the following command to generate a new SSH key. Replace your_email@example.com with the email associated with your GitHub account:

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

You'll be prompted to save the key. For clarity, save it with a distinctive name like key_work for your work account and key_personal for your personal account.

Adding SSH Keys to GitHub:

Next, add the generated SSH key to your GitHub account. Copy the public key using:

cat ~/.ssh/id_rsa_work.pub

Then, navigate to GitHub, go to Settings -> SSH and GPG keys, and add the new key.

Step 2: Configuring SSH for Multiple Accounts

To handle multiple SSH keys, you need to configure your SSH client. Create or edit the ~/.ssh/config file and add entries for each account:

# Work GitHub account
Host github.com-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_work

# Personal GitHub account
Host github.com-personal
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_personal

This configuration tells your SSH client which key to use when connecting to GitHub.

Step 3: Testing SSH Connections

Verify that your SSH keys are correctly configured by testing the connections:

ssh -T git@github.com-work
ssh -T git@github.com-personal

You should receive a message confirming successful authentication for each account.

Step 4: Configuring Git Remotes in VS Code

Now, you need to set up your Git remotes in your project repositories to use the correct SSH configurations.

Adding Remotes:

In your project directory, add the appropriate remote:

git remote add origin git@github.com-work:username/work-repo.git

Verify the remote setup with:

git remote -v

Conclusion:

Managing multiple GitHub accounts within a single instance of Visual Studio Code can greatly enhance your workflow, especially if you're juggling projects for different organizations or balancing professional and personal development work. By setting up distinct SSH keys for each account and configuring your SSH client properly, you can seamlessly switch between accounts without encountering permission errors or other common issues.

The steps outlined in this guide—from generating SSH keys and configuring your SSH client, to adding and managing Git remotes—provide a robust framework for maintaining separate GitHub identities. This not only keeps your projects organized but also ensures a secure and efficient way to handle code repositories.

How to Deploy and Host Your Website Cost-Effectively with Vercel 💰💰

FARHAN KHAN — Sun, 09 Jun 2024 14:57:37 +0000

Creating and deploying a portfolio website can often seem like a intimidating task, especially when you're trying to minimize costs without compromising on quality. Recently, I had the opportunity to develop a simple yet effective single-page portfolio for a client, and I found an efficient way to deploy it using Vercel while keeping expenses to a minimum.

In this blog post, I'll share my experience and provide a step-by-step guide on how you can do the same for your projects, making use of cost-effective domain purchases and Vercel's hosting capabilities.

Behind the Scenes: Building a Sleek Single Page Portfolio

The project at hand was a straightforward single-page portfolio designed to showcase the client's work. This portfolio was purely a frontend project, meaning there was no backend or database integration involved.

Key Technologies Used:

Next.js
Typescript
Tailwind.css

Development Highlights:

Responsive Design: Ensuring the portfolio looks great on all devices.
Interactive Elements: Adding smooth transitions and hover effects.
Clean Code: Keeping the codebase simple and maintainable.

Visual Guide: Deployment Process Simplified

Deployment on Vercel

Deploying the portfolio website was straightforward thanks to Vercel. Vercel is known for its simplicity and efficiency, making it an excellent choice for frontend projects.

Why Vercel?

Ease of Use: Vercel provides a seamless deployment process, particularly for static sites.
Free Plan: Vercel's free tier is perfect for personal projects and small client projects.
Automatic SSL: It automatically provides SSL certificates for your custom domains.

Steps to Deploy:

Sign Up and Set Up: Create a Vercel account and link it to your GitHub repository.
Import Project: Import your project from GitHub, GitLab, or Bitbucket.
Configure Settings: Set up the build settings if needed (though Vercel often auto-detects them).
Deploy: Click the deploy button, and Vercel will handle the rest.

Acquiring and Pointing a Custom Domain

After deploying the site on Vercel, the next step was to point a custom domain to it. I purchased a domain at a very affordable price from HIOX India.

Steps to Acquire and Point Domain:

Purchase Domain
Access DNS Settings: Log into your domain registrar account and navigate to the DNS settings.
Add DNS Records: Add an A record pointing to Vercel's IP address or use CNAME records as directed by Vercel.

Example of DNS Records:



Type: A

Name: @

Value: 76.76.21.21 (Vercel's IP)

Type: CNAME

Name: www

Value: cname.vercel-dns.com

Screenshot of DNS Configuration:

Cost Efficiency

One of the significant advantages of this deployment method is its cost efficiency. Here's how this approach helps in cutting costs:

Cost Savings Breakdown:

Free Hosting: Vercel offers free hosting for static sites, reducing hosting expenses.
Affordable Domains: Purchasing domains from budget-friendly registrars can save a considerable amount.

Overall Savings:

By combining Vercel's free hosting with a cheap domain purchase, the total annual cost for maintaining the portfolio website was significantly reduced.

Limitations and Considerations

While this approach is excellent for small projects, it's important to recognize its limitations:

Not Suitable for Larger Projects:

No Backend Support: Vercel is ideal for frontend-only projects. Projects requiring server-side logic or database interactions need a different hosting solution.
Limited Customization: Advanced server configurations are not possible.

Examples of Suitable Projects:

Portfolios
Blogs
Landing Pages

Projects Requiring Alternative Solutions:

E-commerce Sites
Web Applications with Backend

Conclusion

In summary, deploying a single-page portfolio on Vercel while using an affordable custom domain is an excellent way to cut costs without sacrificing quality. This method is particularly suited for small to medium-sized projects where backend integration is not necessary.

Key Takeaways:

Vercel offers an easy and free hosting solution for static sites.
Purchasing a domain from budget-friendly registrars can further reduce costs.
This approach is ideal for portfolios, blogs, and landing pages, but not for projects requiring backend support.

Have you tried deploying a site using Vercel and a custom domain? Share your experiences and any tips you have in the comments below!

How to become an Astro developer.👨‍💻👨‍💻

FARHAN KHAN — Thu, 29 Jun 2023 11:36:49 +0000

In this very tutorial we are going to look at why to use Astro to develop websites mostly content-focused websites such as marketing sites, publishing sites, documentation sites, blogs and even portfolios.

Let's see some features of Astro that makes it a choice for web developers to built websites.

Fully-featured, but flexible
- We can extend the features of Astro by integrating react and tailwindcss for easy styling. To know more about it visit to astro-docs.
Easy to use
- As Astro contains the usage of HTML syntax it becomes very easy for developers to work with Astro. To Know more about it visit to astro-docs.

You can see more features of Astro at astro-features.

Note that-

No prerequisite is required as this tutorial is totally beginners friendly.

Takeaways from this tutorial-

By the end of this tutorial, you will become an Astro developer which means that you will be able to create a simple static website using Astro.

Let's start creating the website using Astro-

Installation-
- Get a new Astro project up and running locally using the following command-

# create a new project with npm
npm create astro@latest

After running the following command you will get the following msg. In that write the project name.

You will get the following options after entering the name of the project. You can select anyone of the option according to you.

Next you will be asked whether to add dependency or not

You also get an option whether to use typescript or not.

You can also initialize a new git repository which makes your work one step simpler.

Running the app
- Once the installation is completed you can go to the directory using the following command

cd myapp

Once you are in the directory you can run your app locally using the following command

npm run dev

After running the following command you can see your app in the browser at URL- http://localhost:3000. Your app should look somewhat like this

Let's take a quick peek at the folder structure-

Now as you can see in the above image while working with Astro you have to use .astro extensions for files.

The index.astro inside the /src/pages directory is the root file. The changes that you make in the index.astro file will get reflected in the browser.

Once you reach this point you will become an Astro developer 🥳🥳🥳. Now you only have to make use of your frontend skills to improve the app.

Additionally we can integrate tailwindcss with the Astro app by just running the following command

npx astro add tailwind

After running the above command you can easily use tailwindcss properties in the Astro app

Conclusion

I hope that this tutorial is going to help the web developers to become an Astro developer.
If someone have any doubt about this please leave a comment in the comment section, I will surely help.
See you all in the next blog😊😊.

The easiest way of uploading image and audio files together using Multer, Cloudinary, and Node.js.

FARHAN KHAN — Thu, 22 Jun 2023 13:28:13 +0000

The project list📃 of a backend web developer always includes projects on REST API and other websites projects such as E-commerce with fully functional backends. One main functionality of these kinds of projects is file uploading such as image, audio, video, etc.

When working with MERN stack one of the most common and popular way of uploading a file is using-

The most probable solutions for uploading a file found on the internet are-

You have to search a lot to find the perfect solution for uploading the image and audio file together using multer, cloudinary and node.js.

I hope that this blog of mine is going to help most of the backend web developers for easily uploading the image and the audio file together using multer, cloudinary and node.js.

Prerequisites

Node.js and Express.js
Multer
Cloudinary

Let us start with uploading the image and audio file

First of all let's setup the express app. Following are the steps to create an express app.

Create a folder server which contains a server.js file which will be the root file.
Run the following command to initiate the node modules.



npm init
npm i
npm i node-modules

Install express using following command.



npm i express

Setup the express app in the following way.

Once the initial setup is done we will move further with the:-

Addition of middlewares such as app.use(express.json()) and app.use(express.urlencoded({extended: true})); and connection of mongodb using mongoose in server.js file.

In the following way the routes setup is done.

Now lets setup the Multer file which is in the middlware folder.
For uploading the image and audio file together we are going to use a third party dependency namely multer-storage-cloudinary

In the following way the multer setup is done using the third party dependency.

Now we will use the upload.fields as a middleware.

We are also going to setup the cloudinary in the cloudinaryconfig.js file so as to use it as a middleware in the server.js file.

Once the setup of Multer, Cloudinary is done we will take a quick peek of the controller.js.

In the uploadcontrol.js file:-

First of all we have created an async function namely Create.
Then we have stored the path of both the image and the audio file in the constants imageurl and audiourl.
In the last step we have stored the value of both imageurl and audiourl in the Uploads db.

Once the entire setup is done we will check the upload request on Postman

Hurrey!🥳🥳 we are successfully receiving the url of both the files.
And also getting the url stored in mongodb.

So I hope that this tutorial is going to help all the backend web developers out there in uploading the image and audio file together using Multer, Cloudinary and Node.js

User authentication in MERN stack (Frontend and Backend connection)

FARHAN KHAN — Wed, 14 Jun 2023 12:54:06 +0000

Throughout this informative journey of User authentication in MERN stack till now we have seen-

In this tutorial we will be concentrating on the Frontend and the Backend connection.

We will take a closer look at the CORS error and also the solution for the same.

Prerequisites

Basic understanding of form handling in react.(Form handling)

So lets begin with the connection.

Signup Form

First of all we will create a function to handle the form on submit.

In this function-

First we are taking the values of all the fields.
Then asynchronously using async and await we are setting up the fetch function where
- First parameter is the URL of the backend server.
- Then we specify the method i.e method:"POST".
- After specifying the method we set the headers i.e headers:{ "Content-Type":"application/json" } and send the content of the field in the string format using body:JSON.stringify({ username, email , password , confirmpassword })

Once the function is completed we will call it from the Submit button using onClick.

Login Form

The setup of the function which handles the form on submit is similar to the signup form onRegister function.

And once the function setup is done we call the function in the submit button similar to signup form.

Once the login and the signup form setup is completed the major part is handling the CORS error.

Now lets take a quick peek at the CORS error:

The CORS error can be solved by adding the Proxy server in the package.json file of the Client side

So in this tutorial we have seen the connection of Frontend and Backend. We have covered -

The setup of the function that handles the login and the signup form on submit.
The CORS error. Also the solution for the same.

With this, we have completed the user authentication in MERN stack.

User authentication in MERN stack (Frontend)

FARHAN KHAN — Sun, 04 Jun 2023 14:49:33 +0000

User authentication in MERN stack (Backend)

Before starting with this tutorial we will take a quick peek at what we saw in the last tutorial

In the last tutorial, we covered the backend logic of Signup and Login. We saw-

Folder structure for Backend 📂
Concept of Server.js file where the express app was defined.
Building of Schema.
Routes of Login and Signup.
Controllers that contain the Signup and Login logic.

What are we expecting from this tutorial?

In this tutorial, we will take a deep dive into the frontend of user authentication which contains the login and signup form.

The takeaway points from this tutorial are-

How to create a react app using Vite rather than CRA(create-react-app).
How to set up the Login and Signup form.
How to set up Router.

Prerequisites

A basic understanding of React. (React)
How Components and Pages are created in react. (Components in React)

Folder Structure

The above image gives a glimpse of what the folder structure of the frontend consists of. It consists of -

Assets folder📂 - It consists of Images folder where all images are stored
Components folder📂 - It consists of Navbar.jsx file.
Pages folder📂 - It consists of Login.jsx and Signup.jsx.
Other files - App.css, App.jsx, main.jsx, index.css.

Setting up the react app with Vite

At this point, a fascinating query may arise if we already have CRA to create a react app then why use Vite

Here's a simpler answer to that

Vite uses the esbuild bundler, which is much faster than the Webpack used in CRA.

In other words, we can say that a React app can be built faster using Vite as compared to CRA.

the Following command is used to create React app using Vite

npm create vite

After running the above command

Enter the project name .
Select the framework you want to work with.
Select the variant for eg- Javascript or Typescript.

Components

Before starting with Navbar. jsx which is a component let's see a short description of what are Components in react

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Navbar.jsx

As per the definition of components which says that components are reusable bits of code hence the Navbar.jsx is created as a component we do not have to write its code for all pages.

Pages

Both the Signup and Login page are created using Ant Design. To make development more faster you can use either Material UI or Ant Design .

Let's take a quick peek at what is Ant Design.

Ant Design is an open-source design system developed by the Ant Group–parent company of Alibaba, Alipay, Huabei, and MYbank, to name a few.

Signup.jsx

Starting with the Signup form first of all we import all necessary components required for the form from antd.
Then for the better understanding of the form fields we import all necessary icons from @ant-design/icons

Once all necessary components and icons are imported we set up the form by adding username, email, password and confirm password fields and applying the operations of each field provided by Ant Design.

Login.jsx

Similar to Signup form in the Login form also we first of all import all necessary components and icons.

Router Setup

To link the pages with each other in react we use react-router

Let us first have a look at what is react-router

React Router is a JavaScript framework that lets us handle client and server-side routing in React applications. It enables the creation of single-page web or mobile apps that allow navigating without refreshing the page .

First of all install the react-router from following command

npm i react-router-dom

Starting with the router setup-

First import all the pages that are homepage, login, signup.
Import createBrowserRouter and RouterProvider from react-router-dom.
Then using createBrowserRouter create the array of paths and elements and assign it to the router.
Configure the route using RouterProvider.

So, In this tutorial we saw -

Folder structure of frontend 📂.
Creating react app with Vite.
Components and Pages.
Creating Router.

Stay tuned for next tutorial of User authentication with MERN. As in the next tutorial we are going to focus on the connection of frontend and backend. See you all in the next tutorial.

User authentication in MERN stack (Backend)

FARHAN KHAN — Mon, 22 May 2023 21:41:30 +0000

In this tutorial, we will dive into the fundamentals of user authentication, covering key concepts such as registration, login, password hashing. It will guide you through the process of setting up a secure authentication system, from building the backend API using Node.js and Express.js to creating a user-friendly frontend with React.

Whether you are a beginner looking to gain a solid foundation in user authentication or an experienced developer seeking to enhance your skills with the MERN stack, this tutorial will provide you with the knowledge and tools necessary to implement robust user authentication in your web applications.

Prerequisites:

Folder Structure

The folder structure for user authentication of mern website contains:

A server.js file - where the main express app is initiated.
A model folder - which contains all mongodb documents Schema files in which the documents schemas are defined.
A router folder - which contains all route files where routes are defined.
A controllers folder - which contains all controller files where the authentication logic is written.

Server.js

As mentioned above in server.js file the express app is initiated.

To start with the server.js we first of all need to import all necessary dependencies such as:

After importing all the necessary dependencies we have used middleware such as

app.use(bodyParser.urlencoded({ extended: true })) - to parse URL encoded data
app.use(bodyParser.json()) - to parse json data.

We have also created post request for api/podcasts,login,signup.
After that we have made connection with mongoDB database (cloud i.e atlas or compass) .

userSchema.js

The userSchema.js file is in the models folder where the schema for user authentication is defined.

In userSchema.js first of all we import mongoose which is used to create the schema. Then we create the schema having fields username, email, password and confirmpassword.

user.js

The user.js file is inside the routes folder where routers for login and signup are defined.

In user.js first of all we import express which is required for creating routes. Then we import the login and signup controllers from Usercontroller.js. Then we create router using express.Router(). After that we create routers for login and signup.

Usercontroller.js

The Usercontroller.js file in controllers folder contains the logic of login and signup.

To start with the user controller we first of all import all necessary dependencies such as:

jwt
bcrypt

Signup Logic

Get the values of field such as username, email, password and confirmpassword using req.body
Check for the empty fields.
If any empty field is present throw error ('Please fill the field')
Check whether the entered email by the user is present in the databse or not.
If the entered email is already present in the database than return res.status(400).json('Email already exist') .
If the entered email is not present in the database than create the instance of the schema model and pass the new values. const user = new User({ username:username, email:email, password:password, confirmpassword:confirmpassword })
Create the salt value using await bcrypt.genSalt(10).
Then we create hash value using await bcrypt.hash(password,salt).
Once the hash value is created we store it as the user password user.password = hash.
After that we save the instance of the schema user.save().

Login Logic

For the login we first get the values of fields using req.body.
Check for the empty fields
if any empty field is present than throw error ('Please fill the field').
Check if the entered email by the user is present in the database or not.
If the entered email is not present than throw err return res.status(404).json({error:"User not found"}).
If the entered email is present than compare the entered password and the hash password using bcrypt.compare.

So in this tutorial we have covered the backend part of user authentication in MERN where we have seen the folder structure of the backend, also Schema for document, routes and controllers(logic of Signup and login).

In the second part of this blog we are going to see frontend and the backend connection.