Forem: Manisha Batesar

slice vs splice vs split — The Way I Finally Understood Them

Manisha Batesar — Tue, 17 Feb 2026 13:07:44 +0000

When I was learning JavaScript, I always got confused between slice, splice, and split.
Their names look very similar, so I kept mixing them up.

Then I understood them in a very clear and simple way — by focusing on what each parameter means and how each method works step-by-step.

So in this article, I want to explain them the same way I learned them — simple, clear, and practical.

What is a method?

A method is just a built-in function that works on a specific data type.

Examples:

Array methods → work on arrays

String methods → work on strings

So:

slice → array + string method

splice → array method

split → string method

1. slice → take a part (without changing original)

slice(startIndex, endIndex)

Parameter meaning:

startIndex → position to start taking values

endIndex → position to stop (not included)

Works on: array and string
Original data: does NOT change

Array example

let arr = [10, 20, 30, 40];

let result = arr.slice(1, 3);
console.log(result);

Explanation:

1 = startIndex → start from value 20

3 = endIndex → stop before index 3

So taken values: 20, 30

Result:

[20, 30]

Original array remains:

[10, 20, 30, 40]

String example

let str = "JavaScript";

let part = str.slice(0, 4);
console.log(part);

Explanation:

0 = startIndex → start from J

4 = endIndex → stop before index 4

So taken characters: J a v a

Result:

Java

So: slice = take part without changing original

2. splice → remove / add / replace inside array

splice(startIndex, deleteCount, items...)

Parameter meaning:

startIndex → where operation starts

deleteCount → how many items to remove

items → values to insert (optional)

Works on: array only
Original array: changes

Remove example

let arr = [10, 20, 30, 40];

arr.splice(1, 2);
console.log(arr);

Explanation:

1 = startIndex → start at 20

2 = deleteCount → remove 2 values

Removed:

20, 30

Result:

[10, 40]

Add example

let arr = [10, 40];

arr.splice(1, 0, 20, 30);
console.log(arr);

Explanation:

1 = startIndex → position after 10

0 = deleteCount → remove nothing

20, 30 = items to insert

Result:

[10, 20, 30, 40]

Replace example

let arr = [10, 20, 30, 40];

arr.splice(1, 2, 99);
console.log(arr);

Explanation:

1 = startIndex → start at 20

2 = deleteCount → remove 20, 30

99 = new value inserted

Result:

[10, 99, 40]

So: splice = change array

3. split → break string into array

split(separator)

Parameter meaning:

separator → where to cut the string

Works on: string only
Original string: does NOT change

Example

let str = "I love JavaScript";

let words = str.split(" ");
console.log(words);

Explanation:

" " = separator (space)

String is cut wherever space appears

So words are separated

Result:

["I", "love", "JavaScript"]

So: split = break string into array.

If you remember just this simple idea, you will never confuse slice, splice, and split again.

Thanks for reading!❤️

What is JWT?

Manisha Batesar — Fri, 30 Jan 2026 10:22:53 +0000

JWT (JSON Web Token)is a token (like a small digital key) that the backend creates after a user logs in.
👉 It tells the server: “Yes, this user is already logged in.”

We can think of JWT like an ID card or an entry pass.

Why use JWT?

Without JWT: you’d have to send your password every time — unsafe and slow.

With JWT: login once, get a token, and send it with every request. The server checks it and allows access.

JWT is made of three parts:

Header: token type & algorithm

Payload: user info (never store passwords)

Signature: secret key that proves the token is real

How it works:

👉 User logs in → server creates JWT
👉 Token sent to frontend → stored (usually in localStorage)
👉 User makes requests → token sent in headers
👉 Server checks token → allows or denies access

Thanks for reading!❤️

Understanding Async and Await

Manisha Batesar — Thu, 29 Jan 2026 10:11:51 +0000

Hi everyone 👋,

When I first saw async and await in a JavaScript tutorial on YouTube, I was confused — even the names felt strange 😅.
I kept wondering, what is this and why do we even need it?

But slowly, when I started using async and await in real code, I understood their purpose.
They are mainly used while calling APIs. When an API request is made, async and await make sure the code does not get stuck while waiting for the response.
The await keyword waits for the API result and then returns the actual response data once it is ready.

To handle possible errors during API calls, we usually use try–catch with async/await.
This helps prevent the application from crashing if something goes wrong, like a network issue or server error.

async function getTodos() {
  try {
    const res = await fetch("/todos");
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.log("Error while fetching todos");
  }
}

One important thing I realized during this time is that practice matters the most.
No matter how many tutorials we watch, a new concept only starts making sense when we actually use it in our own code.
That’s when it becomes part of our muscle memory and feels natural to use.

Thanks for reading ❤️

What is React?🧐

Manisha Batesar — Wed, 28 Jan 2026 12:35:57 +0000

Hi everyone 👋,

I recently started learning React.
When I first heard about React, I thought it would be tough
Because people kept saying, “React is hard,” but it is used everywhere,
so I decided to give it a try.

Slowly, I realized that React is actually very interesting
React is a JavaScript library to build user interfaces
It lets you create small reusable components, like buttons, headers, or todo items
Each component does one job, which makes code clean and easy to manage

One thing I really love about React is components
Each part of the page can be a small component, like a button, a header, or a todo item
This makes my code easy to understand and clean, even when the project grows
It felt magical at first , but now it just makes sense

I’m still learning
But I’m excited to build more projects and share what I learn here!

Thanks for reading ❤️

[Boost]

Manisha Batesar — Mon, 24 Feb 2025 06:51:12 +0000

Building a $10,000 App with AI: A Step-by-Step Guide

Manisha Batesar ・ Feb 24 '25

#ai #powerfuldevs #productivity #reactnative

Building a $10,000 App with AI: A Step-by-Step Guide

Manisha Batesar — Mon, 24 Feb 2025 06:50:42 +0000

Imagine creating an app that not only serves a purpose but also has the potential to earn you $10,000, all without writing a single line of code. Sounds too good to be true? Well, it's not! In this guide, I’ll walk you through the entire process of building a productivity app using artificial intelligence and various modern tools. From idealization to deployment, we'll cover everything you need to know to get started.

Step 1: Finding a Viral App Idea

The first and most crucial step in building an app is coming up with a viral idea. This involves solving a real problem in a simple way. To identify a viable app idea, it should meet these three essential criteria:

Identify a Common Problem: Look for issues that are frustrating or emotionally charged. People download apps to solve their pain points.
Keep It Simple: Your app's core functionality should be explainable in three words or less. For instance, “task manager” or “focus timer.”
Make It Shareable: The app should be so helpful that users feel compelled to share it with others.

For this project, I decided to create an all-in-one productivity tool. After long hours of work, I realized how unproductive multitasking can be. My app will help users prioritize tasks, focus on one at a time, and chat with an AI to easily add new tasks.

Step 2: Finding App Designs

Next, we need to find viral app designs that we can legally replicate. For this, we will use Mobbin, a platform filled with over 300,000 UI & UX designs from popular apps like Duolingo, Spotify, and Netflix. It’s a treasure trove of inspiration!

To find suitable designs:

Go to the Mobbin website and click on the search bar.
Select the category that fits your app—since we’re creating a productivity app, I chose that category.
Pick a design that aligns with your app idea. I found a design that I felt was perfect for my concept.

Once you find a design, you can copy the entire flow of the app legally. Click the copy button, download the plugin, and paste it into a new Figma file to start customizing it.

Step 3: Structuring the App

Now that we have our design, it's time to create the structure of our app. This is a critical step that I refer to as creating the "brain" of the app. By structuring the app properly, we save ourselves a lot of time and frustration later on.

To begin, we will create two important files to guide our AI—Cursor AI—step by step:

Context File: This file explains everything about your app to the AI. Write down all your thoughts about how the app should function, detailing the entire flow from start to finish.
Development Plan: This will outline the steps needed to build the app.

Using Cursor AI, we can start building the app. If you haven’t downloaded Cursor yet, head over to their website to grab it. It’s free and offers a trial version of the pro features.

Step 4: Building the App with Cursor AI

Once you have your context file ready, open Cursor and create a new project folder. Name it something relevant, like "DeepWork AI." Create a documentation folder inside it and add your context file.

Cursor AI uses powerful AI models to write code for you. To start building, you’ll need to tag your context file so the AI can reference it. Open the terminal and use the command:

npx create-expo-app@latest with-router

Once your project is created, navigate to your project folder and run:

npx expo start

This will initialize your app and generate a QR code that you can scan with the Expo Go app on your phone to see the app in action!

Step 5: Setting Up the Backend

For the backend, we will use Supabase for our database and authentication. Create a new project in Supabase and get your public Anonymous token. This token will be essential for connecting your app to the database.

In your Cursor project, navigate to the environment file and paste the Supabase token and URL. Then, ask Cursor to build the login and signup pages for your app.

Step 6: Improving the UI of the App

After setting up the basic functionality, it’s time to improve the UI. Go back to Mobbin and explore more designs, copying the ones that you think would work well for your app. Paste them back into your Cursor project and ask the AI to use them as inspiration for improving your app's design.

This step significantly enhances the aesthetics of your app, making it look professional and user-friendly.

Step 7: Integrating AI Features

Now, let’s set up the AI chat feature using the DeepSeek API. This feature will allow users to interact with the app and add tasks via chat. Make sure to copy the API key into your environment file as well.

With everything set up, reload the app and test the AI chat feature. You should be able to add tasks just by typing in natural language!

Step 8: Deployment

Congratulations! Your app is now built and ready for deployment. To upload your app to both the App Store and Google Play Store, you will need to create developer accounts: an Apple Developer account ($99 annually) and a Google Play Developer account ($25 one-time fee).

In the terminal, you can use the command:

npm install eas-cli

This command installs the Expo Application Services, which you can then configure to build and publish your app.

Conclusion

Building a $10,000 app with AI is not just a dream—it’s an achievable reality. By following the steps outlined in this guide, you can create a productivity app that helps users focus, prioritize tasks, and enhance their productivity without writing a single line of code. Remember to iterate and improve based on user feedback, and you could be on your way to creating a successful app!

If you want to dive deeper into AI development, feel free to check out BuildWithAI for more resources and articles.

Made from How To Build A $10,000 App with AI (Cursor + DeepSeek)

Advance nest.js

Manisha Batesar — Tue, 31 Dec 2024 12:05:07 +0000