DEV Community: Tapas Adhikary

I Spent 40 Hours Writing Tests That Broke in 2 Weeks — A Confession Story

Tapas Adhikary — Thu, 17 Jul 2025 10:51:57 +0000

TL;DR

Some stories are worth sharing, even if they start with humongous setbacks! Here goes my recent tech battle tale, and key learnings from it.

Prologue

Our team had just finished a major sprint refactor, and I, a product lead, volunteered to take charge of improving our end-to-end (E2E) test coverage.

The goal was to boost confidence in our regression suite and reduce bugs leaking into production. With the set of testing tools out there today to help with E2E testing, test case generation, test coverage, and test report creation, I had assumed it would be a cake walk!

What followed was a frustrating lesson, false positives, surprises, and how testing can either support or sabotage your development cycle, depending on how it’s approached.

By the way, this is not a post to blame or criticise testing — it's quite the opposite. It’s a confession about what went wrong when I did everything “following the rules” and still watched 40 hours of test automation crumble in under two weeks.

The Intent and A Grand Start

We had a React-based web application with moderate unit test coverage but with very little E2E coverage. The few Cypress tests we had were outdated and flaky. Developers were increasingly hesitant to trust automation. My goal was to build a robust suite that would:

Validate user flows across authentication, dashboard, and profile update features.
Catch regressions before they reach QA or production.
Run reliably as part of CI/CD.
Serve as living documentation for critical workflows.

I was the man with the mission. So I updated our Cypress version, established folder structure conventions, and began building out test specs with clear naming, reusable helpers, tags, and test data.

I wrote 20+ scenarios. I created custom commands for login/logout, seeded test data via API, and even used data-test IDs to avoid weak selectors.

Everything worked like a charm, all passed locally. Next, Everything passed on CI, too. I was the proudest guy in the team meeting for a couple of weeks!

The Battle Part

The dream run started to slow down as I figured out that my hard work may have to be redone once again!

These were the reasons:

1. User Interfaces never settle down

The product team planned and launched a user interface refresh with a brand new UX. Some of the changes were not even that major, like a button changed from "Submit" to "Save Changes", a few class names were refactored, and one modal now loads dynamically instead of rendering in the DOM.

So, what happened?

My button click tests failed due to text changes.
Modal tests couldn’t locate elements that now only appeared conditionally.
Navigation flows were slightly different, causing tests to hang or timeout.

What did I learn?

UI-based E2E tests are fragile by nature. Even small, intentional changes break everything downstream(sigh).

2. Data dependencies could be costly

I depended on backend APIs to seed realistic test data. But these APIs changed silently, breaking assumptions about user roles and default field values.

What did I learn?

If your tests depend on mutable data or APIs you don’t have control over, your suite is only as stable as its weakest API contract.

3. Weak Selectors and Timing Hell

Even though I used data-test attributes, dynamic rendering introduced some race conditions. Animations and lazy-loaded modals caused selectors to intermittently fail.

What did I learn?

Intermittent test failures create trust issues. Once a test fails intermittently, no one believes it anymore, even when it’s right.

The Research Time

I didn’t want to throw away my work. So I went into research mode. I started exploring tools, techniques, and approaches to strengthen the suite.

Tools Evaluated

1. Playwright

It is Faster and more reliable in async-heavy apps.
Supports smart selectors and auto-waiting.
Has the Cross-Browser Support Out of the Box.
Provides powerful Context Isolations.
Has a built-in Parallel Execution

Verdict: Loved it, but too late in the game to rewrite 20+ Cypress tests mid-sprint.

2. Nightwatch

It is an all-in-one test framework.
Has the Selenium and webdriver2 support.
Supports simple syntax and Page Object Model.
Provides Cross-Browser and mobile device testing.
Got a strong community and long-term stability.

Verdict: Nightwatch is solid if you’re in a legacy Selenium ecosystem or need WebDriver compatibility. In my case, the dilemma of rewriting the existing test cases was still a big reason to stay away.

3. Bug0

A fully managed AI-powered QA platform.
A platform with zero setup needed, no codebase access needed, and works just by providing a staging URL.
Excellent test compatibility matrix with rich test reporting capability.
OOTB CI/CD, notification, and real-time reporting integrations.
Self-Healing support that helps tests to automatically adapt when UI changes occur

Verdict: The Self-Healing feature was the turning point for me. Just when I was considering scrapping and rewriting the entire test suite, Bug0 came up with a lot of promise!

4. BrowserStack

A popular DIY testing tool.
You can test your apps on a massive grid of real browsers and OS combinations.
Getting access to logs, video recordings, and screenshots makes it easy to debug.
Support major frameworks like Sypress, Playwright, Selenium, Nightwatch
You can plug seamlessly with CI/CD.

Verdict: BrowserStack is great when it comes to ensuring the real-world compatibility coverage without breaking head for your own infrastructure. But still, it requires manual set-up, maintenance, and the effort to write and update tests.

I didn't stop my research with these three alone. I went ahead and looked into two more possibilities:

5. Mock Service Worker (MSW)

Intercept network calls and return mock data
Helped decouple tests from backend flakiness

Verdict: A true lifesaver. Tests became stable and deterministic.

6. Low-Code Platforms (Testim, Reflect.run)

Great for quick UI test creation
Non-technical folks could contribute

Verdict: Useful, but lacked control and flexibility for our edge cases.

The Final Selection

I’ll be honest here, I was sceptical. I’ve used “AI-powered” tools before, and most were just keyword detection with a fancy UI. But I found Bug0 different in three major ways:

1. Self-Healing Tests That Actually Worked

When a button label changed or a DOM structure was slightly refactored, Bug0’s test runner intelligently adapted using visual cues and context, not just selectors. I could see in the logs where it adjusted and why.

This alone reduced maintenance time by at least 60%.

2. Dynamic Test Validation and Real-time Reporting

Bug0 allowed me to run tests against two app versions (before and after refactors) and generated real-time reports. The report contains checks with drill-down facilities:

On drilling down, I could get all the test status and also detailed video capturing the failures.

I didn’t have to manually figure out what UI or data changes broke my tests — it told me. This was a huge timesaver during sprints, where design tweaks were common.

3.CI/CD Integration

The last, but not the least, is about the CI/CD integration and compatibility. I had the option to integrate a CI/CD pipeline with GitHub, GitLab, or Bitbucket. I had the requirement for GitHub, and it was a perfect marriage!

Once the test suite is ready, Bug0 plug it into the CI/CD workflow using their GitHub/GitLab/BitBucket App. The set-up was super fast(within a minute), triggered the test on every pull request, and ran silently in the background on every change.

My Overall Learning

Traditional Tools are Great, But...

With my research on evaluating tools, frameworks, and platforms, I found that most of the traditional DIY testing tools, like BrowserStack, Playwright, and Nightwatch, are great and solve real problems.

However, they are not easy to maintain in the long run. Your QA platform/tool selection should consider future maintenance costs, dedicated QA effort, and manual ways of managing test cases.

It's been a decade since the world has moved towards automation from manual testing efforts. If you are wondering about the current trends, A 2025 Forrester study found that 55% of organizations already use AI in their testing workflows, with 70% of mature DevOps teams relying on AI-powered tools to maintain speed and coverage.

Yes! The agentic AI, human-in-the-loop QA, and continuous quality systems are not a dream or fairy tales. They are the "new reality" to make us much more productive and efficient.

Understanding Testing Layers

I am from a developer background. I had as limited knowledge about the testing layers as a QA might have about a complex design pattern(no offence!).

The choice you need to make about learning these layers and differences between them, so that your test strategies sound reliable:

Unit Tests: For logic.
Component Tests: For User Interfaces
Minimal E2E Tests: Only the highest-value flows, stabilized via Bug0 + MSW.

Use decoupling:

Replaced flaky backend setups with mocks.
Used fixture versioning to avoid silent data shifts.

Ownership & Documentation

Even with an AI-powered platform that help you with a bunch of automation with test case writing and executions, you still need to care for:

Pushing Test guides in the repository.
Slack(Or, any other tool you use) alerts for flaky failures.
Devs knew how to debug and contribute further.

Epilogue

I spent 40 hours building a test suite that broke in 2 weeks. It taught me how to get smarter at it with my research and usage of the right tool at the right time.

A few words of empathy: If you’re struggling with test stability, ever-changing UIs, and time-consuming maintenance, you’re not alone. The testing pyramid is real for a reason.

Tools like MSW and platforms like Bug0 won’t magically fix bad practices, but they will amplify good ones. Testing is part of the development experience. It's time to embrace it with equal importance to every other layer of product development and delivery.

I hope my story did not bore you, and you found it insightful. I would love to know if it resonates with you and your experience in setting up automation testing strategies for your team.

That's all for now. Let’s connect:

Subscribe to my YouTube Channel.
Follow on LinkedIn if you don't want to miss the daily dose of up-skilling tips.
Check out and follow my open-source work on GitHub.

Tidbit 05: WeakMap in JavaScript – The Secret Keeper You Didn’t Know You Needed!

Tapas Adhikary — Thu, 19 Jun 2025 13:27:00 +0000

What is a WeakMap?

A WeakMap is like a regular Map, but with one juicy twist:

Its keys must be objects, and it holds them weakly — meaning it won’t stop them from being garbage collected.

Think of WeakMap as:

A magic box that only an object can open and take things from it. When the object leaves, the magic box also disappears.

When Should You Use WeakMap?

Use WeakMap when you want to:

Associate truly private data with an object.
Avoid memory leaks with temporary objects.
Hide implementation details from external code.

It is especially helpful:

When you don’t want to expose internal states or metadata directly.
When you want data to vanish when the object is no longer used.

A Real World Example

Imagine you’re building a UI where you want to track the last time each DOM element was clicked. You want to accomplish it without storing the data directly on the element or risking memory leaks when elements are removed from the DOM. This is where WeakMap shines.

Why Use WeakMap Here?

You want to store data related to a DOM node.
You don’t want to manually delete it when the node is removed.
WeakMap allows automatic cleanup when the node is gone from memory.

Let us assume an HTML code snippet with two DIVs:

<div id="box1">Click Me!</div>
<div id="box2">Click Me Too!</div>

Let us now create a WeakMap clickTimestamps to store the click metadata:

const box1 = document.getElementById("box1");
const box2 = document.getElementById("box2");

// Create a WeakMap to store click metadata
const clickTimestamps = new WeakMap();

function handleClick(event) {
  const element = event.target;
  const now = new Date();

  clickTimestamps.set(element, now);

  console.log(`Element clicked at: ${clickTimestamps.get(element).toLocaleTimeString()}`);
}

box1.addEventListener("click", handleClick);
box2.addEventListener("click", handleClick);

What Happens Behind the Scenes?

The WeakMap stores the timestamp associated with each DOM element.
You don’t pollute the DOM element with extra properties.
When the element (say box2) is removed from the DOM and garbage collected, its associated timestamp in WeakMap is automatically cleaned up. No leaks!

How’s It Different from a Map?

As we know about the WeakMap, here is a comparison table of WeakMap vs. Map:

WeakMap is non-enumerable and non-inspectable — perfect for hiding things.

Pitfalls to Watch Out For

A few pitfalls you need to be aware of when using a WeakMap:

You can’t loop through a WeakMap.
You can’t check its size.
You can’t see what’s inside it (on purpose!).
If the object key disappears, so does the value—it’s gone forever.

Just like WeakMap, we also have WeakSet serves a similar purpose. However, it is a collection of unique elements, not a map. I wish to cover it in a future tidbit.

That's all for now. Found this helpful? Please snap a like, and feel free to comment below.

Want to learn further?

Check out the session on JavaScript Collections: Map, Set, WeakMap, and WeakSet.

Day 33: JavaScript Map, Set, WeakMap, WeakSet - When & Why to Use Them! 🤩 - In this session, we take a deep dive into JavaScript Collections—Map, Set, WeakMap, and WeakSet. Whether you’re a beginner or brushing up on advanced JavaScript, this session will help you understand when to use each, their key differences, and real-world use cases with clear examples.

Tidbit 04: JavaScript Promise Chain vs No-Chain

Tapas Adhikary — Tue, 10 Jun 2025 12:01:00 +0000

Promise Chain vs. No-Chain

A promise chain is formed when we append multiple promise handler functions(like, .then() or .catch()) to handle results and errors. However, at times you could be mistaken that you need to prefix the promise everytime you want to form a chain.

Let's understand it with the following examples:

First, here is a simple promise created with the Promise() constructor function. The promise resolves immidiately with a result value of 10.

const ten = new Promise((resolve, reject) => {
    resolve(10);
});

Now, to form a Promise Chain, let us chain a bunch of .then() handler functions:

// Promise Chain

ten.then((result) => {
    // returns 20
    return result + 10;
})
.then((result) => {
    // returns 200
    return result * 10;
})
.then((result) => {
    // returns 190
    return result - 10;
})
.then((result) => {
    // logs 190 in console
    console.log(result);
});

It has formed a perfect Promise Chain to pass the result from one handler function to another, and finaly print the end result into the console. The final result output is a number, i.e, 190.

Now, let us change the above code to the following:

// No Chain

ten.then((result) => {
    // returns 20
    return result + 10;
});
ten.then((result) => {
    // returns 100
    return result * 10;
});
ten.then((result) => {
    // returns 0
    return result - 10;
});
ten.then((result) => {
    // logs 10 in the console.
    console.log(result);
});

As you notice, we have now prefixed the promise ten every time before the .then() handler function. It is not a chain because, we are handling the promise freshly every time with

ten.then((result) => {
    // DO SOMETHING...
});

We are not passing the resolved result of the previous promise to the next one. Hence the output will be, 10. It is a common mistake developers make with JavaScript Promises.

Want to learn further?

Learn about other common mistakes developers make in handling JavaScript Promises.

Day 26: 6 Common Mistakes with JavaScript Promises & Async Code 🤩 - In this session, we’ll break down 6 common mistakes developers make while working with Promises and async code — and most importantly, how to avoid them! Whether you’re just learning or brushing up, this video will help you write cleaner, bug-free asynchronous code.

Tidbit 03: innerText vs textContent in JavaScript – Not Twins, Just Cousins!

Tapas Adhikary — Mon, 09 Jun 2025 14:17:00 +0000

In JavaScript DOM, both innerText and textContent seem to give you the text inside an HTML element. But under the hood, they work quite differently.

Let’s explore what they are, how they differ, and when to use which—with real-world examples!

The textContent — The Raw Texter

Returns all the text in the element, including hidden elements.
Ignores CSS and layout.
Faster because there are no layout calculations.
Great for getting raw data or sanitizing content.

Let's create a hidden text on the UI:

<div id="info">
  Hello <span style="display:none">World</span>
</div>

Now, if you use the textContent property:

document.getElementById("info").textContent;
// Output: "Hello World"

You will get "Hello World" even though “World” is hidden.

Use textContent when you need all content, regardless of visibility.

The innerText — The Visible Speaker

Returns only the visible (rendered) text.
Respects CSS like display: none, visibility: hidden, etc.
Slower (causes layout reflow).
Ideal for mimicking what users actually see on screen.

For, the same HTML above, if you use the innerText:

document.getElementById("info").innerText;
// Output: "Hello"

You will only get the “Hello”. The hidden “World” is ignored.

Use innerText when you want screen-accurate content (what the user sees).

You can learn about DOM Manipulations in JavaScript with examples and projects from this session.

Final Thoughts

Often developers use the innerText and textContent interchangibly without understanding their real purposes. Please note:

If you’re reading or saving data, go for textContent.
If you’re testing, displaying, or analyzing visible UI, use innerText.
They’re not interchangeable—choose wisely based on context!

Join 40 Days of JavaScript for FREE

There are 101 ways of learning something. But, nothing can beat the “structured” and “progressive” learning methodologies. I have designed this FREE task-based Course for you to stay structured and motivated. Sounds great? Please take a look:

Join 40 Days of JavaScript Course for FREE - Do not miss the chance to learn JavaScript in-depth with practical projects and assignments. JavaScript is omnipresent and learning the language well will help you get a better grip on many other libraries and frameworks like ReactJS, Angular, Next.js, Node.js, Remix, and many more. So, make sure to join the 40 Days of JavaScript initiative and master the language.

Tidbit 02: Abstraction in JavaScript: Washing Machine Style!"

Tapas Adhikary — Fri, 06 Jun 2025 13:50:00 +0000

What is Abstraction?

Abstraction is an Object-Oriented Programming (OOP) principle that means hiding internal details(or complexities) and exposing only essential parts to the end users. Think of it like using a TV remote — you press a button to switch channels, but you don’t need to understand the circuitry behind it.

In code, abstraction helps keep things clean, maintainable, and secure. Users interact with simple methods, while complex logic stays away.

Why is Abstraction Important?

Abstraction is one of the four pillars of OOP, along with Encapsulation, Inheritance, and Polymorphism. It helps with:

Simplicity: It hides unnecessary complexity.
Security: Sensitive logic or data can be kept private.
Maintainability: Internal changes don’t affect users of the class.
Reusability: You can reuse the same interface across different implementations.

We can implement Abstraction in JavaScript with Constructor Functions or the Classes feature introduced in ES6. Let us now implement one with ES6 Classes.

What Are ES6 Classes?

ES6 introduced the class syntax in JavaScript to make OOP-style coding easier and more familiar. It’s just syntactic sugar over JavaScript’s existing prototype-based inheritance but makes your code cleaner and more intuitive.

class AClass {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

Classes can have public/private fields and methods:

Public fields/methods: Accessible from outside the class.
Private fields/methods: Start with #, and are accessible only within the class.

class Sample {
  publicField = "I'm public";
  #privateField = "I'm private";

  showFields() {
    console.log(this.publicField);  // Can be accessed
    console.log(this.#privateField); // Can be accessed
  }
}

const s = new Sample();
console.log(s.publicField);   // Can be accessed
console.log(s.#privateField); // SyntaxError

You can learn about ES6 Classes with examples from this session.

The Washing Machine Example: Real-World Abstraction

When you run a Washing Machine, you worry about starting and stopping the Washing Machine. When you press a button to start the Washing Machine, a few things happen at the background. For example, the Washing Machine checks the power status, fill water, spin the drum, drain the water after wash, and stops.

All these complex electrical and mechanical activities are abstracted away from the customers by the Washing Machine vendors. The customers/end users just press the start button, and all that takes place at the background!

Now, if we model Washing Machine as a Class in the JavaScript world, we can think of start() and stop() as the only public methods to expose to the users. Whereas, all other actions like spin, drain, etc., should be handled as private methods. That's how we achieve abstraction.

Here is an implementation of Abstraction with the Washing Machine example:

class WashingMachine {
  brand; // public
  #powerStatus = false; // private
  #currentCycle = null;

  constructor(brand) {
    this.brand = brand;
  }

  // public
  start(cycle) {
    if (!this.#powerStatus) this.#turnOn();
    this.#currentCycle = cycle;
    console.log(`Starting ${cycle} cycle...`);
    this.#fillWater();
    this.#spin();
    this.#drain();
    this.stop();
  }

  // public
  stop() {
    console.log("Washing machine stopped.");
    this.#turnOff();
  }

  // private
  #turnOn() {
    this.#powerStatus = true;
    console.log("Power ON");
  }

  // private
  #turnOff() {
    this.#powerStatus = false;
    console.log("Power OFF");
  }

  // private
  #fillWater() {
    console.log("Filling Water...");

    console.log("Water Filled.");
  }

  // private
  #spin() {
    console.log("Spinning...");
  }

  // private
  #drain() {
    console.log("Draining...");
  }
}

What’s Abstracted?

The user of the class only needs to call:

const lgWasher = new WashingMachine("LG");
lgWasher.start("Quick Wash");

They don’t need to worry about how the machine turns on, spins, or drains—those are abstracted away using private methods like #turnOn() and #drain().

Trying to access internal workings like:

lgWasher.#powerStatus  // Error
lgWasher.#turnOn()     // Error

It throws an error. That’s true abstraction in JavaScript, thanks to ES6 private fields and methods.

Conclusion

Abstraction helps you focus on what matters while the complexities stay behind the curtain. With Classes, JavaScript finally gives you the tools (like #private fields introduced in ECMAScript 2022) to implement this cleanly—just like your Washing Machine, which works wonders with a single start().

Join 40 Days of JavaScript for FREE

Join 40 Days of JavaScript Course for FREE - Do not miss the chance to learn JavaScript in-depth with practical projects and assignments. JavaScript is omnipresent and learning the language well will help you get a better grip on many other libraries and frameworks like ReactJS, Angular, Next.js, Node.js, Remix, and many more. So, make sure to join the 40 Days of JavaScript initiative and master the language.

Tidbit 01: How Does Event Loop Handle Promises?

Tapas Adhikary — Thu, 05 Jun 2025 11:46:00 +0000

Ever wondered how JavaScript knows when to run your .then() block? Or why your console.log("done") appears before a resolved promise result? Let’s break it down in this quick TidBit!

What is a Promise?

A Promise is JavaScript’s way of saying:

“I’ll give you a value… eventually!”

It’s a placeholder for a result that’s either:

Fulfilled (Success)
Rejected (Failure)
Or still Pending

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data loaded!");
    }, 1000);
});

promise.then((data) => console.log(data));

When resolve("Data loaded!") is called, the .then() block waits to execute — but where does it go meanwhile?

What is an Event Loop?

JavaScript is single-threaded. That means it can do one thing at a time. So how does it handle waiting, timers, and promises without freezing the app?

Enter the Event Loop.

It’s like a traffic controller — coordinating between:

Call Stack (where code runs)
Web APIs (like setTimeout, DOM)
Callback Queue
Microtask Queue (where .then() of Promises go)

How Event Loop Manages Promises?

Let’s see the order of execution:

console.log("Start");
Promise.resolve("Resolved").then((msg) => console.log(msg));
console.log("End");

Output:

Start
End
Resolved

But, Why?

Here’s how it plays out:

console.log("Start") ➝ runs immediately (Call Stack)
Promise.resolve(...).then(...) ➝ .then() is scheduled (Microtask Queue)
console.log("End") ➝ also runs immediately
After current stack is empty, Event Loop picks microtasks → .then() runs

This is why Resolved appears after End, even though the promise is already resolved!

Let’s spice it up with a setTimeout:

console.log("Start");

setTimeout(() => {
    console.log("From setTimeout");
}, 0);

Promise.resolve().then(() => {
    console.log("From Promise");
});

console.log("End");

Output:

Start
End
From Promise
From setTimeout

Here, Microtasks (Promises) are given priority over macrotasks (setTimeout, etc.).

Quick Recap

Promises don’t run instantly — their .then() goes to the microtask queue.
The Event Loop picks microtasks before other callbacks once the call stack is clear.
Even a setTimeout(..., 0) will wait behind a resolved Promise!

So next time your Promise resolves “later,” remember — it’s not late. It’s just politely waiting its turn in the queue.

Want to learn further?

Learn about Event Loop along with JavaScript Promises, Call Stack, Task Queue Visually.

Day 27: How Your Async Code Works | JavaScript Event Loop Simplified! 🤩 - In this session, we’ll learn about how JavaScript executes code internally. This session uses visualizations to demonstrate the working of Call Stack, Event Loop, Promises, Web APIs, and more. Let's learn.

Why the with() method of JavaScript Array is a gem?

Tapas Adhikary — Wed, 29 Jan 2025 13:40:32 +0000

JavaScript array methods offer plenty to web developers already. The methods like map(), reduce(), filter() , some(), every(), and many more have helped build our JavaScript muscles for better logic and algorithms.

The with() method is a relatively new inclusion to the JavaScript array method list, and its only intention is to change the value of a given index in an array in the "immutable" way. A big deal? Yes! Let's learn.

Btw, please do not confuse the with() method from the JavaScript Array with the with statement from the language. The with statement has been deprecated whereas, the with() method is a new inclusion to the language. People say JavaScript is weird, naming things is possibly a reason for it!

This article is also available as a video tutorial now. You can check it out here:

The traditional way to seek and change

Let us consider an array of numbers,

const numbers = [1, 2, 3, 4, 5];

How would you change the element of an array for a given index? Suppose you need to change the element 3 which is at the index 2(remember, the array index in JavaScript starts with 0) with a new element, say, 6.

The usual instinct would be to do this,

numbers[2] = 6;

console.log(numbers); // [1, 2, 6, 4, 5];

This works! However, there is a problem. We have mutated(aka, permanently changed) the original array. When you deal with data in your application, a data structure like an array should hold the original(unchanged) data as a "source of truth". You wouldn't want it to be modified by any functions and logic to achieve better predictability in your code.

Immutability is a great tool

Immutability is a mechanism to ensure that we can not change something(an array, object, etc). However, if we need a modified version of it, we need to first create a copy of the original and then make modifications to the copied version. This ensures that the original data is never changed by anything in the application, knowingly or unknowingly.

So, how about changing the element of an array at a given index, in an immutable way? It means every time we change an element in an array, we do not mutate the original array, rather we get back a new copy of the original array with the change applied.

The with() method and immutability

ECMAScript 2023 introduced a new method called with() to solve this problem of mutability and achieve immutability while changing an element of an array. So now, instead of using a given index on the array directly, we can use the with() method to change the element value.

The with() method takes two parameters:

index - An index value which can start from 0, and also can be a negative number. The negative index counts backwards from the end of the array.
value - The value to change at a given index.

Let us now apply the with() method on the same array to change the element at a given index,

const numbers = [1, 2, 3, 4, 5];

const newArray = numbers.with(2,6);

console.log(numbers); // Unchanged => [1, 2, 3, 4, 5];
console.log(newArray); // Changed(A new copy) => [1, 2, 6, 4, 5];

As you see, the with() method produces a new copy of the original array with the change applied. The original array is unchanged.

The with() method and the negative index

One more drawback of the direct index-based element seeking to get an element at a given index is that you can not use the negative number as an index value. Try something like the code snippet below, you will get an undefined.

numbers[-2]; // undefined

Also, trying to set a value on a negative index will have unexpected results,

const numbers = [1, 2, 3, 4, 5];
numbers[-2] = 8;

console.log(numbers); // [1, 2, 3, 4, 5, -2: 8]

Did you see that? You have ended up adding something completely different than what you anticipated. But, using the with() method, you can change an element of an array at a negative index. The negative index starts from the end of the array with an index value of -1 and move backwards.

const numbers = [1, 2, 3, 4, 5];

const anotherArray = numbers.with(-2, 8);
console.log(anotherArray); // [1, 2, 3, 8, 5]

In the above code, we have changed the second element of an array from the end. Hence the element 4 in the array is replaced with the element 8.

You can use the at() method of JavaScript array to read an element using a negative index.

anotherArray.at(-2); // 8

Method chaining

As the with() method returns an array, you can chain the output of the with() method along with other array methods, like map(), filter(), reduce(), etc.

In the code snippet below, we replace the second element of the ages array with a new element, and then map the output array to multiply each element by four.

const ages = [12, 23, 56];

const mappedAges = ages.with(1, 32).map(x => x * 4);

console.log(mappedAges); // [48, 128, 224]

Can you please give a real-life use case of the with() method?

Sure! When I published a YouTube video on this topic, I got a question about the real-life use case of the with() method. The exciting thing is, that I discovered the with() method when I was building a use case that needs the feature it offers. The image below provides a summary of the use case.

Conclusion

That's all for now. I hope you agree with me that the with() method is a true gem providing us immutability and negative index accessibility with JavaScript Arrays. You can check out these articles to learn more about JavaScript arrays and their unique use cases:

Liked it? Please let me know with your comments and likes. ❤️

Let's connect. I share knowledge on web development, content creation, Open Source, and careers on these platforms.

Next.js and Next-Auth V5: Guide to Social Logins(OAuth)

Tapas Adhikary — Thu, 23 Jan 2025 11:33:00 +0000

Authentication and Authorization are the implicit needs for any user-facing application. Using authentication users let the application and underlying services know who they are, and if they are the legitimate people to get access to the system. There are various ways of authenticating like credential-based authentication, OTP-based authentication, magic links, biometrics, and more.

While authentication is the way to tell someone who you are, authorization is how to provide access to resources they are supposed to have. There are role-based, policy-based authorization models that ensure the right access to resources when users try accessing them after authentication.

You will find this article helpful if you are looking for a guide to learning about Authentication and Authorization.

In this step-by-step tutorial, we will focus on setting up authentication using OAuth providers like Google and Github with a Next.js application. We will use Auth.js or Next-Auth V5, an open-source authentication tool for the web to get the auth set-up done.

Let's get started 🚀

Note: It would be great if you code as you follow along the sections of this article. The source code used in this article is publicly available on GitHub for you to access and use. You can find the link to it at the bottom of this article.

Create a Next.js App Router Project

First, create a Next.js app using the command below from your terminal/command prompt.

npx create-next-app@latest

Make sure you have the latest Node.js installed.

The prompt will guide you to create a Next.js app with a name of your choice, a target tech stack (JavaScript or TypeScript), and a few more configurations. In my case, I went ahead with the following choices:

Please note, that I have selected JavaScript, TailwindCSS, and most importantly, the App Router. After the project completion, change the directory to the project directory and start the local server using the following command:

yarn dev # Or its npm, pnpm, bun equivalent

Now, the local server will run on http://localhost:3000 by default.

Auth.js , aka Next-Auth(Version 5)

Auth.js is an open-source authentication library that integrates with modern JavaScript frameworks like Next.js, Svelte, and Express. Previously the project was available only for Next.js and thus it used to be called Next-Auth. Today, a portion of Auth.js is still supports Next-Auth, but along with it, there are SvelteKitAuth, and ExpressAuth available too.

Installation

We will use Next-Auth Version 5 which is in its beta while writing this article. Open a terminal and install next-auth with the following command:

yarn add next-auth@beta

# Or
# npm install next-auth@beta
# pnpm add next-auth@beta
# bun add next-auth@beta

Setting up environment

Create a file called .env.local at the root of your project folder. We need to add a key called AUTH_SECRET with a value. You can generate the secret by using the following command from your terminal or command prompt:

npx auth secret

You should see an output like below which prompts you to copy the key-value pair and paste it into the .env.local file.

Alternatively, if you are on a Linux / Mac OS X system, you can use the following command to generate the auth secret:

openssl rand -base64 33

In whatever ways you generate the secret, please ensure to copy-paste and create a key-value pair in the .env.local file like this:

Configurations: The `auth.js` file

Next, create a auth.js file at the root of the project folder with the following code:

import NextAuth from "next-auth";

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        // WE WILL ADD THINGS HERE SHORTLY
    ],
});

Here we have created a minimalistic configuration of the Next-Auth to avail functionalities like signIn, signOut, along with an auth object that can provide us with all information about the session and the logged-in user in the session. The GET, and POST handlers will be used in a route handler that we will learn about soon.

At this point, the only configuration we pass to the NextAuth is an empty providers array. However, do not worry much about it, as we will be filling it soon.

The `callback` route

Now we will create a route handler specially for Next-Auth. This route handler will be used as a callback route from the OAuth providers when we configure them after a while.

Create a folder hierarchy called api/auth/[...nextauth]/ under the app/ folder. The [...nextauth] directory creates a dynamic route. Now create a file called route.js under this hierarchy as follows: /app/api/auth/[...nextauth]/route.js.

Copy and paste the following code snippet inside the route.js file.

// Here the GET and POST is being imported
// from the auth.js file before we export
// them from here.

export { GET, POST } from "@/auth";

That's it. We are done with the installation, set-up, and basic configurations of Next-Auth. Let us now shift our focus to building the user interface(UI) needed for the authentication.

Create Login Form

Create a components folder at the root of your project folder and create a file called LoginForm.jsx under it with the following code:

import { doSocialLogin } from "@/app/actions";

const LoginForm = () => {
    return (
        <form action={doSocialLogin}>
            <button 
                className="bg-pink-400 text-white p-1 rounded-md m-1 text-lg" 
                type="submit" 
                name="action" 
                value="google">
                Sign In With Google
            </button>

            <button 
                className="bg-black text-white p-1 rounded-md m-1 text-lg" 
                type="submit" 
                name="action" 
                value="github">
                Sign In With GitHub
            </button>
        </form>
    );
};

export default LoginForm;

A few things to note here:

We have created a login form with two submit buttons to sign in with Google and GitHub respectively.
We have imported a server action called doSicialLogin and using it as the form action so that the function gets invoked when the user submits the form by clicking on either button. The server action function doesn't exist yet, we will create it soon.
Each of the submit buttons has the same name attribute value called action. It is helpful to identify the button that triggers the form submission inside the server action.

The Home Page

Now, open the page.js file under the app/ folder and replace its content with the following code:


import LoginForm from "@/components/LoginForm";

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center m-4">
      <h1 className="text-3xl my-3">Hey, time to Sign In</h1>
      <LoginForm />
    </div>
  );
}

It is a simple component that imports the LoginForm we created above and used it in the JSX. If you try to access the app now, you will get an error due to the non-existence of the doSocialLogin server action used in the login form. Let's fix that.

Next.js Server Actions: Log in and out

Server Action in Next.js are built on React Actions that you can define in server components and/or calls from client components. Server actions are JavaScript async functions that run on the server by the user interactions with the client.

It helps to build a data mutation technique more often when you want to submit a form to create, update, or delete data on the server. It can also be useful to perform isolated server-side actions like sending emails, processing payments, user login, logout, and many more use cases.

Read this article to understand the usages and use cases of Server Actions in-depth.

Create a folder called actions/ under the app/ folder. Now, create a file called index.js under the app/actions/ with the following code:


'use server'

import { signIn, signOut } from "@/auth";

export async function doSocialLogin(formData) {
    const action = formData.get('action');
    await signIn(action, { redirectTo: "/home" });
}

export async function doLogout() {
  await signOut({ redirectTo: "/" });
}

Let us understand what is happening there.

We used a directive called 'use server' at the top of the file to inform Next.js that this file contains server actions and they must be executed on the server side.
Then, we have defined two server actions, doSocialLogin() and doLogout().
Earlier, the action doSocialLogin() we have imported into the LoginForm component to invoke it when the login form is submitted. Hence it receives a formData object containing the information of the submitted form fields. In our case, the login form doesn't have any other fields than two submit buttons sharing the same name value, action. Hence we retrieve the button value using the action name to see whether users have clicked on the Google or GitHub buttons to submit the form.
Inside the doSocialLogin() function we call the signIn() from the auth.js by passing a couple of arguments. The first argument is to tell the Next-Auth about the provider to use to sign in. In our case, it will be either google or github. The second parameter is a configuration object informing auth.js about the redirection page after login. It says, redirect to the home page(/home route) once authenticated.
The doLogout() action invokes the signOut() function from auth.js and redirect to the root route(/) on log out.

Now access the app, you should see it running and showing you the user interface like the image below. Clicking on either of the buttons will not do much as we haven't configured the providers yet, and the great news is, that we will be doing it next.

Social Login With Google Oauth

Let us make the sign-in with Google work first. This is a multi-step procedure. First, we need to create a client ID and client secret from Google Cloud Console. Once we have them, we need to configure the Google Provider in the auth.js file,

Client ID and Secret from Google

Go to Google Cloud Console and follow these steps to generate a client ID and secret. You can also use an existing client ID and client secret.

Log in to the Google Cloud console and click on the Credentials option from the left menu. Then click on the + CREATE CREDENTIALS drop down from the top and select the OAuth client ID option as shown in the image below.
In the next screen, select Web application as an application type, give a suitable name for the OAuth 2.0 client. I preferred to keep it the same as my project name. Then provide http://localhost:3000 as the authorized JavaScript origin URL. It will make sure that the client and secrets can not be used from elsewhere.
Next, provide the URL http://localhost:3000/api/auth/callback/google as the value of the authorized redirect URI. Does this URI ring a bell 🔔? Yes, this is the same route pattern we created earlier with the route.js.
Finally, click on the CREATE button.
Now you will see a modal dialog with the OAuth client ID and secret created. Make sure you copy them, and optionally you can download them in a JSON file to use later.
Click on OK to close the modal.

Set Up Environment

In the .env.local file add two entries:

Key GOOGLE_CLIENT_ID, and the value will be the client ID we created above.
Key GOOGLE_CLIENT_SECRET, and the value will be the client secret we created above.

Configure the Google Provider for Next-Auth

Open the auth.js file and import GoogleProvider as shown below. Also, add the GoogleProvider configuration in the providers array as mentioned in the code below.

Please note,

We are using the client ID and secret from the environment variables.
We also configured to provide a consent UI for our users to provide their consent to use their Google auth every time they authenticate.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code",
                },
            },
        })
    ],
});

Test it out from the UI

Now, it's time to test out the Sign in with Google flow. So, go to the app and click on the button to log in with Google. You will see a redirection to select an account to authenticate. If you have multiple Google accounts, please select the one you want to authenticate with.

The next step will be a consent screen where you have to click on the Continue button to log in.

After this, you will be redirected to a route called /home because that's how we have configured the signIn() function above. You will see a 404-page not found error because we have not created the route yet. However, the best part is, that our authentication is successful.

To validate the cookie created for the session token, open up the browser dev tools and move to the Application tab. In the left panel, expand the Cookies options and click on the http://localhost:3000. You should find the authjs.session-token cookie with the token value at the bottom.

Show LoggedIn User's Details

It's time to fix the /home route and show something other than a 404 error. How about showing the logged-in user's details like name and profile image? We can also show a logout option to sign out from the app when the user is already logged in.

Create a folder called home/ under the app/ folder, and create a page.js file under the app/home/ with the following code:

import Image from "next/image";
import Logout from "@/components/Logout";
import { auth } from "@/auth";

import { redirect } from "next/navigation";

const HomePage = async () => {
    const session = await auth();

    if (!session?.user) redirect("/");

    return (
        <div className="flex flex-col items-center m-4">
            <h1 className="text-3xl my-2">
                Welcome, {session?.user?.name}
            </h1>
            <Image
                src={session?.user?.image}
                alt={session?.user?.name}
                width={72}
                height={72}
                className="rounded-full"
            />
            <Logout />
        </div>
    );
};

export default HomePage;

Here:

We have created a static route called /home.
We imported the Logout component. We haven't created the Logout component yet, will do that next.
Then we imported auth from the auth.js. The auth is an async function that returns us with the session information, including the logged-in user's details.
We retrieved the session information and checked if the logged-in user information was available. If not, we redirected the user to the root route where we have the login form. So this way, we can protect a specific route at the page level.
In the JSX, we displayed the logged-in user's name and image and the Logout component. Let's create the Logout component.

Add Sign Out(Logout) Functionality

Create a file called Logout.jsx under the components folder with the following code:


import { doLogout } from "@/app/actions"

const Logout = () => {
  return (
    <form action={doLogout}>
        <button 
            className="bg-blue-400 my-2 text-white p-1 rounded" 
            type="submit">
                Logout
        </button>
    </form>
  )
}
export default Logout

Explanation:

It is a simple React component with a form and a submit button.
With the click of a button, we submit the form and invoke the doLogout() server action we have created already!

That's it. Time for a final test. Perform the login with Google as before. Wait, do you get an error like this instead of seeing the logged-in user's details?

Don't worry. It is because we haven't informed Next.js about the source of the profile image coming from Google. Open the next.config.mjs file and replace the content with the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com'
      },
    ],
  },
};

export default nextConfig;

In the code above, we have provided the trusted hostname as the image source. The hostname was mentioned in the error as a suggestion for us to configure.

Now refresh the UI. You should see the home page up and running with the logged-in user's name, image, and a Logout button. Clicking on the Logout button will log you out of the app and take you to the login form.

Now, You can also check the cookies like the last time. You will not find the session token cookie when you log out.

Wow! Finally, we are here after implementing the social login using Google by using Next-Auth/Auth.js.

Let's finish the configurations for GitHub as well.

Social Login With GitHub OAuth

We will be re-using a lot of things done so far. First, let us create the client ID and client secret for a GitHub OAuth app.

Client ID and Secret from GitHub

Log in to your GitHub account and go to the developer settings following this URL. Under the OAuth Apps section, you will find your existing Oauth Apps, if any. Now, create a new OAuth app by clicking the button at the top-right corner of the page.

Next, you need to fill up a few details like we did for Google. Give a suitable application name, home page URL as http://localhost:3000, and the authorized callback URL. Please provide http://localhost:3000/api/auth/callback/github as the value of the authorized callback URL. Then, register the application.

You will see a client ID generated. Please copy and keep it safe somewhere. Now, click on the Generate a new client secret button to create a client secret.

A new client secret will be generated for you. Please copy and keep this one safe, too.

Set Up Environment

Create two new more environment variables GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET and assign the respective values we have created.

Configure GitHub Provider From Next-Auth

The last thing remaining is to configure the GitHub provider. Open the auth.js file and import the GitHubProvider as shown below. Then, add the GitHubProvider object in the providers array.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";

export const {
    handlers: { GET, POST },
    auth,
    signIn,
    signOut,
} = NextAuth({
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code",
                },
            },
        }),
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID,
            clientSecret: process.env.GITHUB_CLIENT_SECRET,
            authorization: {
                params: {
                    prompt: "consent",
                    access_type: "offline",
                    response_type: "code",
                },
            },
        })
    ],
});

That's it. Go back to UI and Sign in with GitHub. You should get a screen to Authorize the Oauth app. Click on the Authorize button.

Boom! 💥

The same error as before, but you know how to fix it.

Open the next.config.mjs file and add another entry to the remotePatterns array for GitHub images.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'lh3.googleusercontent.com'
      },
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com'
      },
    ],
  },
};

export default nextConfig;

Now refresh the screen and you should see the logged-in user's name, image, and the Logout button.

Incredible! We have learned to set up and code both Google and GitHub Oauth login using Next-Auth/Auth.js with Next.js App Router. It feels amazing!

Source Code & Resources

All the source code you have written so far as you explored this article can be found in this repository(under the branch 02-integrate-github-provider).

tapascript / learn-next-auth

Learn Next-Auth(V5)/Auth.js with plenty of examples, projects, and video tutorials

Learn Next Auth(Version 5)

This repository contains the source code for the educational video on the tapaScript YouTube Channel. You will find various Next-Auth implementation details and the source code in this repository.

SUBSCRIBE TO tapaScript and support me ❤️ 🙏 ☺️

The Implementations:

🫶 Support

Liked my work? You can show your support with a STAR(⭐).

Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)

Thanks to all stargazers

🙏 Please Sponsor My Work

I am an…

View on GitHub

If you like the work, do not forget to encourage me with a star ⭐.

Further Learning

If you enjoyed this article and developing the app, you may also like to explore a few more related topics on Next.js and Auth.js. Here are the links:

Check out the Complete Next-Auth(V5) Course for FREE

Liked it? Please let me know with your comments and likes. ❤️

Let's connect. I share knowledge on web development, content creation, Open Source, and careers on these platforms.

CreoConnect 2024 - From the Founder's Book

Tapas Adhikary — Thu, 19 Dec 2024 13:56:23 +0000

Indeed we love discussing technical matters and are encouraged to share our tech knowledge, but this one has to be different. Yes! let’s talk about our most celebrated event that we have concluded recently, CreoConnect.

Why is it important to talk about CreoConnect?

CreoWis being a startup in its infancy is as curious as any other human baby. It looks up to things with surprise, excitement, emotion, and enthusiasm to explore the new. Be it a service we provide to our customers, or a product that we incubate, the curiosity quotient always remains high.

Needless to say(but, still essential to mention), any organization, be it a small startup, midscale, or a big MNC is the collective of its people. Each skilled individual works with others in the organization to make it grow. For a remote company like CreoWis, we must not miss out on the opportunities to celebrate those individuals who are helping it to grow. Hence CreoConnect - an annual event to connect in person to know each other better, gain more trust, have fun, and understand what it takes to get things done together.

So, it is essential to talk about CreoConnect and get some insights on what went on to make it happen and how it might help us to do better in the future. If you are also a startup like us or with an entrepreneurial mindset, our learning may help you in doing something similar, or even bigger.

The Dream from Day One

In mid-2023 when my co-founder and I were digesting the fact that we will have a remote software company together, we were already dreaming about many other possibilities! One of them was celebrating work.

We didn’t have much idea of how much we would grow in a year, how big the team was going to be, and how many customers we would deal with. However, we were clear that we would have an annual event to celebrate our people, work, and achievements - that’s pretty much what CreoConnect is today. The first instalment of CreoConnect also marks the one-year completion of CreoWis with almost the same set of folks it had started with.

Before the event

The first thing we needed was a name for the event with a wish that we could repeat it on every occurrence. If you think, what’s in a name? I would say a lot. You start sinking into it, start liking it, living it. It may also create a brand for you. So, choose wisely!

In our case, it was a bit straightforward. We said, let’s poll, and we got CreoConnect.

An event like CreoConnect needs solid planning. You need to plan travels, stay, food, activities, logistics, itinerary, and many more tiny things that fulfil it. We, the founders, started the planning almost 3-4 months before to sketch out the timeline, budget, and necessities. A lot of research went into understanding what would be the “best” for all of us, or what most of us would be so proud about. Must say, we have thoroughly enjoyed the process of getting the dream closer to reality.

A month before the event, we announced it to the team on a Discord call. The outburst of happiness and excitement was sky-high. The team took the charge of making the event even more memorable. A daily dose of countdown on the CreoWis Discord server used to act like a positive catalyst, and was enough to create the adrenaline rush among us every morning.

As the day was coming near, we got the idea of shooting a video capturing what CreWis means to each of us, in our vision where do we want to see the company in a few years, and what are we expecting from the CreoConnect 2024? It was truly amazing to see each of us getting involved and bringing the best points out about those.

If you are interested, go over this 6-minute video, hoping you will enjoy it.

CreoConnect 2024 - The annual company event

Finally, it was the time. CreoConnect 2024 was a 3-day in-person event between the 6th to 8th December 2024. On the 6th, all our employees from the different parts of the geo gathered together in Bangalore, India to celebrate. For most of us, it was the first time when we had seen each other in person and got the warmth and the instant bonding we anticipated.

Do not miss this one(with audio ON): https://www.youtube.com/shorts/jVmhIK1h0bU

The first day was fun-filled with catching up with each other, sharing positive vibes, and spending a fantastic time together at the dinner. We connected so well there that it felt like we were meeting each other in person every day. A long walk together after the dinner had made things even more special.

The second day started with our team meeting called, Creo-Catchup. It is our monthly sync-up with company updates, but this time it was a bit different. We covered:

CreoWis formation history
Last 1 year
The future projections
Service Award
Star Award
A couple of minutes of short speech from everyone

Right after the meeting, it was a fun time. We caught up with a bunch of group activities, photos, food, games, and networking.

The last day was for us to return home. But before that, we spent a great time talking to each other, snapping some special moments, and making a point that the upcoming CreoConnect event is going to be even bigger.

Here are some moments we cherish together, hope you like them, too.

You can also catch up more about the event on our Instagram Page and YouTube Channel.

Key Takeaways

We have some key takeaways from the event that we believe going to strengthen our core values.

We work together best as friends, people, and humans, rather than resources.
The culture of a company may not be built in a day, but it gets seeded very early. The more we nurture it with the right ingredients, the better it blossoms.
When you are a team, behave like a team. Transparency is the key. Be open with your thoughts and articulation.
Treat others the way you want to be treated.
Last, but not least, the feeling of belongingness and ownership. This place is for me, I make it better. If things are not going well at times, I need to step up and fix them.

I am extremely proud of our team at CreoWis. I hope to write a bigger sequel of this post sometime in 2025 with some more faces getting added. Until then, Keep going.

If you have read so far, thanks! It means you care. Please feel free to share this article in your social circle. We at CreoWis believe in sharing knowledge publicly to help the developer community grow. Let’s collaborate, ideate, and craft passion to deliver awe-inspiring software services & product experiences.

Want to work with us? Let’s connect:

This article is crafted by Tapas Adhikary, Co-Founder at CreoWis. You can reach out to him on X/Twitter, LinkedIn, and follow his work on the GitHub and YouTube.

Build a custom image uploader with ReactJS

Tapas Adhikary — Mon, 11 Mar 2024 06:37:44 +0000

Uploading and previewing images are fundamental requirements in any modern user-centric application. Be it Facebook, Instagram, WhatsApp, Twitter, LinkedIn, whatever you name, you have it there.

In this article, we will learn how to handle image upload and preview in a ReactJS application. Just a callout, we will not use any external(3rd-party) library for this. Rather, we will build it from scratch to understand what happens under the hood. With me? Let's get started with the setup.

If you want to learn from the video content, this article is available as a video tutorial. Please take a look. 🙂

Setup a ReactJS app with Vite and TailwindCSS

We will use TailwindCSS with React and by tradition, let us create a React project scaffolding with Vite. The good news is, that you do not have to do all the installation and configurations from scratch. You can use this template repository to create your project repository with Vite and TailwindCSS configured with React.

Click on the Use this template button at the top-right corner of the template repository. It will take you to the next page to provide the new repository details.

On the next page, provide the new repository name, and a suitable description, and create the repository. Let us call the new repository as image-uploader in this article.

Now, clone the new repository to get the project folder locally. Change the directory to the project folder and install the required dependencies using npm/yarn/pnpm.

Make sure you have Node.js version 18 or above installed. You can try the command node -v to find out the version installed. If you want to install or upgrade to the required version of Node.js, please do it from here.

## With NPM
npm install

## With Yarn
yarn install

## With PNPM
pnpm install

Now you can run the project locally using

## With NPM
npm run dev

## With Yarn
yarn dev

## With PNPM
pnpm run dev

The application will be available to access on the URL http://localhost:5173/.

Great, we have got the initial setup done. You can import the project into your favourite code editor. Let us now create the image uploader component.

Complete the uploader structure

Create a components directory under the src directory. Now, create a file called ImageUpload.jsx under the src/components. This file will contain the React component to upload and preview images.

Before we start writing the code for the image uploader, we need a few things.

A default image to tell our users about the image uploader.
An edit icon to invoke the file browser to select an image.
A loading gif file we will use as a placeholder when the file upload is in progress.

Please copy the image files from here to your project's src/assets directory. Now, go back to the ImageUpload.jsx file and start coding the component.

First, import the images we just copied. We will also need the useState and useRef hooks from React. So, copy and paste the following import statements at the top of the component file,

import { useState, useRef } from 'react';
import DefaultImage from "../assets/upload-photo-here.png";
import EditIcon from "../assets/edit.svg";
import UploadingAnimation from "../assets/uploading.gif";

Now, let's create the component function right below the import statements.

// --- Import statements as belore

const ImageUpload = () => {
    const [avatarURL, setAvatarURL] = useState(DefaultImage);
        return (
            <div className="relative h-96 w-96 m-8">
              <img 
                src={avatarURL}
                alt ="Avatar"
                className="h-96 w-96 rounded-full" />

              <form id="form" encType='multipart/form-data'>
                <button
                  type='submit'
                  className='flex-center absolute bottom-12 right-14 h-9 w-9 rounded-full'>
                  <img
                    src={EditIcon}
                    alt="Edit"
                    className='object-cover' />
                </button>
              </form>  
            </div>
         )
}

export default ImageUpload;

Let's understand the above code snippet:

We have created a functional react component(called, ImageUpload). The component has a state called avatarURL which is set with an initial value, the default image. We did this to ensure that the page is not blunt and blank, and we show an upload message to our users with that default image.

We will change the value of the state later programmatically when the user starts uploading an image and when the image upload completes.
Next, we have a fairly simple JSX that shows this default image using the avatarURL state value. We also have a form with a button and an edit icon underneath. We are introducing this form early so that we can handle the file input in a while.
Finally, we exported the ImageUpload component so that we can import it into the App.jsx file for rendering.

Please open the App.jsx file and replace its content with the following code snippet,

import ImageUpload from "./components/ImageUpload"

function App() {

  return (
    <div className="flex justify-center">
      <ImageUpload />
    </div>
  )
}

export default App;

Here we have imported the ImageUpload component and used it in the JSX of the App component. We have surrounded it with a DIV to align it better on the page.

Next, optionally you can change a few things in the index.html file. We have changed the app's title. You can make the change in the <title> tag under the <head>...</head>. Also, we have provided a few classes to the <body> to get a darker background(most folks love dark mode these days!).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Image Uploader</title>
  </head>
  <body class="bg-black bg-opacity-90">
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Let us go over the browser and see the app.

You can see a yellow rounded image with the Upload text and a hand icon pointing towards an edit icon indicating that you can click on the edit icon to start the uploading process. Cool, huh?

Let us now handle the input file type to select an image for uploading.

Handling the file chooser

Now we need to add a file chooser to our component. We will be using HTML's input element with the type file. Please add the input type file inside the <form> element in the JSX as shown below.

const ImageUpload = () => {
    // --- All code like before

    return (
        {/* --- All code like before */}

        <form id="form" encType='multipart/form-data'>
            {/* --- The Button code like before */}

            <input 
              type="file"
              id="file" />
        </form>
    )
}

If we go to the UI now, we will see a file chooser with an option to Choose file. You can click on it to select files. It works but it doesn't look great. Also, we do not want our users to click on that button to choose files, rather, they should perform the same operation by clicking on the edit icon we added before.

Customizing the uploader with reference(useRef)

let's fix that. We have to do two things:

Hide the input file type.
Refer to the input file type from the edit icon such that, when we click on the edit icon, it simulates the click on the Choose file button of the file input type(yes, even when it is hidden!).

React provides us with a standard hook called useRef which allows one to refer to a DOM element and get access to its properties. It means we can create a reference to the file input type using the useRef hook and use that reference to simulate a click action on the edit icon click. Does it sound promising yet confusing? Don't worry, let's see the code and understand.

If you are looking for an in-depth understanding of the useRef hook, I have a foundational video here. Please check it out.

First, hide the file input by adding a hidden property to it.

<input 
   type="file"
   id="file"
   hidden />

Now, create a reference using the useRef hook at the top of your component.

const ImageUpload = () => {
  const [avatarURL, setAvatarURL] = useState(DefaultImage);

  const fileUploadRef = useRef(null);

  // --- Rest of the code as is below
}

Add this fileUploadRef as the value of the ref attribute to the file input.

 <input 
    type="file"
    id="file"
    ref={fileUploadRef}
    hidden />

So. from now on, the fileUploadRef.current will refer to the file input element. We will use it to simulate a click event.

Add an onClick property to the <button> inside the form, and add an event handler function called handleImageUpload as a value of it.

<form id="form" encType='multipart/form-data'>
    <button
        type='submit'
        onClick={handleImageUpload}
        className='flex-center absolute bottom-12 right-14 h-9 w-9 rounded-full'>
            <img
                src={EditIcon}
                alt="Edit"
                className='object-cover' />
    </button>
</form>

The last thing that remains is to defile the handleImageUpload function.

 const handleImageUpload = (event) => {
    event.preventDefault();
    fileUploadRef.current.click();
  }

As you see in the code above, we now invoke the click() function using the fileUploadRef.current. It means, the click on the file input will occur and we will see the file chooser opens up when someone clicks on the edit icon.

At this stage, the code of the ImageUpload component will be like this:

import { useState, useRef } from "react";
import DefaultImage from "../assets/upload-photo-here.png";
import EditIcon from "../assets/edit.svg";
import UploadingAnimation from "../assets/uploading.gif";

const ImageUpload = () => {
  const [avatarURL, setAvatarURL] = useState(DefaultImage);
  const fileUploadRef = useRef();

  const handleImageUpload = (event) => {
    event.preventDefault();
    fileUploadRef.current.click();
  };

  return (
    <div className="relative h-96 w-96 m-8">
      <img 
        src={avatarURL} 
        alt="Avatar" 
        className="h-96 w-96 rounded-full" />

      <form id="form" encType="multipart/form-data">
        <button
          type="submit"
          onClick={handleImageUpload}
          className="flex-center absolute bottom-12 right-14 h-9 w-9 rounded-full"
        >
          <img 
            src={EditIcon} 
            alt="Edit" 
            className="object-cover" />
        </button>
        <input 
            type="file" 
            id="file" 
            ref={fileUploadRef} 
            hidden />
      </form>
    </div>
  );
};

export default ImageUpload;

All these are great, but, have you noticed that nothing really happens when you select an image and click on the Open button from the file chooser? Let's handle that part now.

Handling the file change event

To capture the selected file and its information, we need to add a change handler on the file input. Please add an onChange property to the file input along with a change handler function uploadImageDisplay as a value.

<input 
    type="file"
    id="file"
    ref={fileUploadRef}
    onChange={uploadImageDisplay}
    hidden />

Now let's define the uploadImageDisplay function.

const uploadImageDisplay = async () => {
    const uploadedFile = fileUploadRef.current.files[0];
    const cachedURL = URL.createObjectURL(uploadedFile);
    setAvatarURL(cachedURL);
}

A few things happening here:

We read the uploaded file information from the files[0] property. The files array contains information about all the files selected using the file chooser. As we are supporting(or rather concerned) about only one image file at a time, we can assume the first element of the files array will get us that information.
Next, we use the URL.createObjectURL to get the cached path of the uploaded file.
Finally, we set that file path as a value to the state variable we have been maintaining to show the default and uploaded image.

Previewing the uploaded image from the browser cache

Now, if you select an image from the file chooser and click on the Open button at the bottom,

You will see the image got uploaded and it previewed immediately.

This is great! But, it would be even fantastic if we could upload this image to a server and get a link as a response to preview it.

Uploading the image to the server

I have found this public API that supports file upload on a server. So now, we will make a POST call to this API with the selected file as a payload. Let us change the uploadImageDisplay function to make it happen.

const uploadImageDisplay = async () => {
    try {
      setAvatarURL(UploadingAnimation);
      const uploadedFile = fileUploadRef.current.files[0];
      // const cachedURL = URL.createObjectURL(uploadedFile);
      // setAvatarURL(cachedURL);

      const formData = new FormData();
      formData.append("file", uploadedFile);

      const response = await fetch("https://api.escuelajs.co/api/v1/files/upload", {
        method: "post",
        body: formData
      });

      if (response.status === 201) {
        const data = await response.json();
        setAvatarURL(data?.location);
      }

    } catch(error) {
      console.error(error);
      setAvatarURL(DefaultImage);
    }
}

Let us understand the function above:

Initially, we set the avatarURL state value with the loading image.

We have commented out the code to show the image from the browser cache.
We created a form data with the key file as the API expects it this way.
Then we used the fetch Web API to make a POST call with the form data as the payload.
On receiving the response, we check if the status code is 201, which means the file has been uploaded successfully. We read the response data and get the uploaded image URL from the data?.location. We set that as the updated state value. Hence, the loading image will be replaced with the uploaded image.

If there is an error, we set the state value to the default image.

Congratulations!!! You have done it.

Here is the complete code of the ImageUpload component:

import React, {useState, useRef} from 'react'
import DefaultImage from "../assets/upload-photo-here.png";
import EditIcon from "../assets/edit.svg";
import UploadingAnimation from "../assets/uploading.gif";

const ImageUpload = () => {
  const [avatarURL, setAvatarURL] = useState(DefaultImage);

  const fileUploadRef = useRef();

  const handleImageUpload = (event) => {
    event.preventDefault();
    fileUploadRef.current.click();
  }

  const uploadImageDisplay = async () => {
    try {
      setAvatarURL(UploadingAnimation);
      const uploadedFile = fileUploadRef.current.files[0];
      // const cachedURL = URL.createObjectURL(uploadedFile);
      // setAvatarURL(cachedURL);
      const formData = new FormData();
      formData.append("file", uploadedFile);

      const response = await fetch("https://api.escuelajs.co/api/v1/files/upload", {
        method: "post",
        body: formData
      });

      if (response.status === 201) {
        const data = await response.json();
        setAvatarURL(data?.location);
      }
    } catch(error) {
      console.error(error);
      setAvatarURL(DefaultImage);
    }
  }

  return (
    <div className="relative h-96 w-96 m-8">
      <img 
        src={avatarURL}
        alt ="Avatar"
        className="h-96 w-96 rounded-full" />

      <form id="form" encType='multipart/form-data'>
        <button
          type='submit'
          onClick={handleImageUpload}
          className='flex-center absolute bottom-12 right-14 h-9 w-9 rounded-full'>
          <img
            src={EditIcon}
            alt="Edit"
            className='object-cover' />
        </button>
        <input 
          type="file"
          id="file"
          ref={fileUploadRef}
          onChange={uploadImageDisplay}
          hidden />
      </form>  
    </div>
  )
}

export default ImageUpload;

A couple of tasks for you!

I hope you enjoyed learning from this article and it helped you to understand the concept. All the source code used in this article can be found on my GitHub.

https://github.com/atapas/youtube/tree/main/react/28-react-image-uploader

Before we end, I would like to give you a couple of tasks to implement on top of whatever we have done so far:

Right now, the file chooser accepts all sorts of file types. Can you restrict it to accept only the image type files, i.e., .png, .jpg, .svg, etc?
Right now, the file chooser appears when we click the edit icon. Can you make the code changes to make it appear when you click on anywhere on the image?

If you happen to do these, please let me know. My socials are mentioned below. You can also join tapaScript discord where we learn and share things.

Let's connect. I share knowledge on web development, content creation, Open Source, and careers on these platforms.

10 Git stash commands every developer should know

Tapas Adhikary — Fri, 08 Dec 2023 05:10:52 +0000

Git Stash is an extremely useful tool for developers. Learn the usage of the git stash commands to become a productive developer.

Developers are agile. Their work environments are also rapid and fast-moving to keep them on their toes most of the time. I can imagine a situation like this would be quite normal at your workplace:

You are working on a feature and, in between, making some changes that are still too unstable to commit. Now, your boss(they say the boss is always right!) comes over with a rush and informs you that a valued customer is facing the deadliest issue in production. You must take care of it RIGHT NOW.

You don't want to commit unstable changes to your current branch, but you have to switch to another branch and fix the issue to make your customer(and, of course, the boss) happy. However, git doesn't allow you to switch branches without your current changes for the tracked files being committed to the current branch. Wow, what a chicken and egg problem!

Don't worry, we have git stash to rescue.

Welcome to Git stash

The word stash means storing something safely in a hidden and secret place. In the world of git, it tracks your files and folders for changes for everyone's visibility, and with git stash, it also provides a way to secretly put some changes that are only known to you so that you can hide them and again bring them back when required.

The git stash command allows you to save the uncommitted changes locally, switch the branch to do other things, and return to your unfinished work along with the stashed changes. The workflow goes like this:

You are in branch feature/A-branch where you have uncommitted changes
You stash the changes.
You then switch to another branch feature/B-branch to finish the work. You commit(and push) the changes.
You switched back to the feature/A-branch branch, applied your stashed changes, and continued your work.

The command that you use to stash your changes is:

git stash

We will learn the usages for 10 commands related to the git stash in this article. If you are a beginner to git and want to know its fundamentals along with frequently used commands, here is a read for you:

Top 10 Git Commands Every Developer Should Know

✅ Stash your changes

You can have two types of uncommitted changes.

The staged changes that git is tracking. It means you have used the git add command to stage them but haven't committed them yet using the git commit command.
The unstaged changes that git is not tracking. It is a file that you haven't staged using the git add command.

Use the following command to stash a staged change:

git stash 

# You can also use `git stash save <description>` command to 
# save a stash with a description.

It will create a stash in the stack with a unique reference ID.

If you want to stash an unstaged change, use the -u switch

git stash -u

Now, it will add one more entry to the stash stack.

You can use the git stash -a command to stash all the files, including the hidden files.

✅ List all the stashes

You can list all the stashes from the stash stack using this command:

git stash list

It will list all the stashes in a stack, meaning the latest stash will be at the top. Also, notice the format of the stash reference IDs. They are in the format stash@{0}. The number in the curly braces shows their position in the stash stack, 0 being the top.

✅ Create a stash without a reference log entry

So far, we have created all the stashes with a reference ID. We have seen the git stash list command show them in the reflog. However, you can create a stash without logging it's reference to the stash reflog.

To do that, use the create command:

git stash create "valid stash"

It will create a stash with a description and unique ID, but nothing will be stored anywhere in the ref namespace. This stash creation method is mostly used for scripts.

To add this stash entry into the reflog later, you can use the git stash store command like this:

git stash store -m "adding to reflog" "98c7181a7a3621139a4899be71e93ec7ceb18afa"

The output,

✅ Show the latest stash information

Use the git stash show command to see the information of the latest stash in the stack. By default, it shows the status information of the file stashed and the number of insertions and deletions in the files.

If you want to see a verbose stash output, you can use the -p switch with the above command to see the stash information in the patch view.

git stash show -p

The output,

The patch view shows the exact diff between the commits.

✅ Show the information of a particular stash

What if you want to see the information of a particular stash? Remember the stash reference ID? We can refer to a specific stash and get its information using the show command we learned above.

git stash show shash@{2} -p

Here, we are interested in seeing the information on the third stash in the stack. The output,

✅ Apply and remove a stash

The stashes stay in the stash stack. You can pop(take out) a stash from the stack and apply it to the current branch. Use the following command to pop a stash:

git stash pop

It will pop the latest stash(one at the top of the stack) and apply it to the current branch. Also, the applied stash will be dropped(removed) from the stash stack.

✅ Apply a stash without removing it

What if you want to apply a stash without dropping it from the stack? You can use the following command for that:

git stash apply

The apply command will apply the latest stash from the stack without removing it from the stack.

Also, if you want to apply a specific stash from the stack, you can use the stash reference ID like this:

git stash apply stash@{2}

✅ Remove a stash without applying it

You can also drop the latest stash from the stack without applying it. To do that, use the following command:

git stash drop

You can also drop a specific stash without applying it using the reference ID of the stash:

git stash drop stash@{3}

✅ Clear all the stash

Sometimes, you may not need the stashes and want to clear them all. Use this command to clear all the stashes from the stack:

git stash clear

✅ Create a new branch from the stash

You can create a branch from the commits in the stash using the following command:

git stash branch fix/resolve-conflicts-checkout stash@{0}

The command will create a new branch and switch to the new branch.

You can check the newly created branch using the git branch command.

That's all for now. Do you know any other usages of the git stash command? Please feel free to comment and let us know.

Thanks for reading it. I hope it was insightful and helped you get familiar with some new git commands. If you liked the article, please post likes/comments and share it in your circles.

Let's connect. You can follow me on Dev, and I also share content on these platforms:

Dynamic routes recipes from Next.js App Router

Tapas Adhikary — Wed, 15 Nov 2023 05:09:37 +0000

Next.js App Router has brought many improvements over its predecessor, Page Router. One of the significant improvements is the routing itself.

Next.js App Router uses the file-system-based router, where you create directories(aka folders) to define routes. You must create a special file called page.js(or .ts/.jsx/.tsx) under the directory to create a page for the route.

The top-level app/ directory acts as the root route(/), and any directory you create under the app directory will create other route segments that map to a URL segment. You can also create the nested route by creating the subdirectories as shown in the image below.

In Next.js App Router, a page is unique to a route. You can create one page per route by creating a page.js file under a directory that signifies a route segment.

// /app/page.js
export default function Page() {
  return <h1>Home Page</h1>
}

If a directory doesn't have a corresponding page.js file, the respective route will be inaccessible and result in a 404, page not found error. The image below demonstrates that each route directory has a page file that creates the page for that route segment.

So far, all the routes we have discussed are static and pre-defined, known beforehand to developers to construct the route segments. But what if we do not know the value to form a route segment? What if it is dynamic, like an id, name, or slug?

Welcome Dynamic Routes

You create dynamic routes when you do not know the route segment name and want to create with dynamic data. For example, you may have a static route called /blog. Creating individual blog post routes under it will be too much overhead. You may want to create them using any dynamic data like id, name. or a slug.

💡 What is a slug?

Slug is an unique part of an URL that provides information about a web page. You should keep them simple, human-readable to help out with SEO. It appears at the end part of the URL after the backslash (“/”). For example, how-to-learn is the slug of the URL https://tapascript.io/blog/how-to-learn.

Let's Understand Things With Code

We understand things better with code. Let's do that. All the code used in this article is available on the tapaScript GitHub repository.

First, we will create a project with the latest Next.js version. Open a terminal/command prompt and execute the following command. Make sure you have installed Node.js 18 or above.

npx create-next-app@latest

Please provide the details asked. A few important things to note here.

Opt for App Router
The selection of TypeScript is your choice. If you are comfortable with it, you can select Yes. I'll use JavaScript code in this article as most developers will likely use it(however, I am a big TypeScript fan!).
You may opt for the src/ directory. I do that as I like to keep my project configuration files under the src/ directory but outside of the app/ directory. Here, we will assume to opt for it.

Once done, change the directory to your project directory and install the dependencies using yarn/npm/pnpm/bun, whatever you want. Then, start the server locally using the yarn dev or its npm/pnpm/bun equivalent commands.

> cd teach-next-js
> yarn
> yarn dev # or npm run dev or pnpm dev or bun dev

The app will be available on the localhost:3000 by default. As you see in the image below, the app/ directory under the src/ directory signifies the top-level route /. The page.js file under the app/ directory provides us with the page for that route.

Let's clear the existing code in the page.js file and put a simple ReactJS component like this:

export default function Home() {
  return (
    <div className="flex justify-center p-2">
      <p className="text-3xl">
        Home Page
      </p>
    </div>
  )
}

Now, our home page(on the route segment /) will look like this:

Create More Routes

Let's create a /blog route segment. To do that, we will create a blog/ directory under the app/ directory.

Now you will have a /blog route segment. However, it will not be accessible publicly because we have not defined a page for it yet.

Let's create a page.js file under the blog/ directory with the following content.

const BlogPage = () => {
  return (
    <>
      <p className="text-3xl">Blog Page</p>
    </>
  )
}

export default BlogPage;

We will see the blog page rendered successfully. It is a simple page with a paragraph of text.

Create Nested Routes

Let us now create a couple of nested routes like /about/form and /about/tax. You guessed it right! We will have to create an about/ directory and then two sub-directories under it. Those are form/ and tax/.

Now, to make all three routes accessible, we need to create a page.js file under each of the directories.

Here is an example page for the /about route segment. You can create something similar for the pages of /about/form and /about/tax.

const AboutPage = () => {
  return (
    <>
      <p className="text-3xl">About Page</p>
    </>
  )
}

export default AboutPage;

Here is how each of the pages may appear for each of the routes.

Create Dynamic Routes

Now it's time we start understanding dynamic route segments with code. You can create a dynamic route segment by wrapping the directory name in square brackets([]). For example, [name], [slug], [id], etc.

Taking forward the example of a blog and its posts, the individual posts can include a route like this, /blog/[slug]/page.js. Here [slug] is the dynamic route segment.

Create a directory named [slug] under the blog/ directory and a page.js file under the blog/[slug]/.

All dynamic segments are passed as the params prop to the page. We can destructure the dynamic route segment value from the params prop. Let's create the content for the dynamic route page with the following code.

const BlogPost = ({params: {slug}}) => {
  return(
    <p className="text-2xl">
      Showing the blog post for the 
      slug <strong>{slug}</strong>
    </p>
  )
}

export default BlogPost;

The page has received a params prop, and we can extract the slug value from it. Now, you can do whatever logic you need using the slug value. You can use it to make a network call and get details to render on the page, or you can just render it on the page, as shown below.

Create Dynamic Catch-all Segments

You can broaden the use of the dynamic route segment([slug]) to a catch-all route segment by adding an ellipsis inside the brackets[...slug].

For example /app/store/[...slug]/page.js will match /store/book, /store/design, and also /store/book/novels, /store/design/shoes, /store/design/shoes/boot, and so on.

Create a store/ directory under the app/ directory. Now, create a directory with the name [...name] under the app/store/.

The page.js file under the app/store/[...name] will define a page for the catch-all route segment. This page component is quite similar to the page component we have seen above for the dynamic routes. However, notice that we are extracting name instead of slug here because we have used [...name] as the directory name.

const StorePage = ({params: {name}}) => {
  console.log(name);
  return(
    <p className="text-2xl">
      Showing the store page for the 
      name <strong>{name}</strong>
    </p>
  )
}

export default StorePage;

Now, when you try the route localhost:3000/store/a, the params returns {name: ['a']}. We are printing that on the console and browser.

You can also catch the route localhost:3000/store/a/b with the same, and the params prop value will be {name: ['a', 'b']}.

Create Optional Dynamic Catch-all Segments

But hang on! How about the route /store? It gives us 404, page not found.

Yes! One way to fix that is by creating a page.js file inside the app/store/ directory. If you don't want that, you can make the catch-all segment as an optional catch-all segment by wrapping the parameter(or directory name) in double square brackets, [[...name]].

Now even the /store route page will be served from the app/store/[[...name]]/page.js. However, in this case, the value of name will be undefined and the params prop value will be {}.

That's all. Thanks for reading it. I hope it was insightful. If you liked the tutorial, please post likes and share it in your circles.

One Last Thing...

I am a self-declared Next.js evangelist who loved this framework from its very beginning days. With the inclusion of the App Router, the affection has gone higher 😊.

I have a full-fledged playlist on my YouTube channel(tapaScript) that will teach you to build projects with Next.js, from clarifying fundamental concepts to coding and tasks.

You may want to check it out.

Let's connect. I share knowledge on web development, content creation, Open Source, and careers on these platforms.

DEV Community: Tapas Adhikary

I Spent 40 Hours Writing Tests That Broke in 2 Weeks — A Confession Story

TL;DR

Prologue

The Intent and A Grand Start

The Battle Part

1. User Interfaces never settle down

2. Data dependencies could be costly

3. Weak Selectors and Timing Hell

The Research Time

Tools Evaluated

The Final Selection

1. Self-Healing Tests That Actually Worked

2. Dynamic Test Validation and Real-time Reporting

3.CI/CD Integration

My Overall Learning

Traditional Tools are Great, But...

Understanding Testing Layers

Ownership & Documentation

Epilogue

Tidbit 05: WeakMap in JavaScript – The Secret Keeper You Didn’t Know You Needed!

What is a WeakMap?

When Should You Use WeakMap?

A Real World Example

How’s It Different from a Map?

Pitfalls to Watch Out For

Want to learn further?

Tidbit 04: JavaScript Promise Chain vs No-Chain

Promise Chain vs. No-Chain

Want to learn further?

Tidbit 03: innerText vs textContent in JavaScript – Not Twins, Just Cousins!

The textContent — The Raw Texter

The innerText — The Visible Speaker

Final Thoughts

Join 40 Days of JavaScript for FREE

Tidbit 02: Abstraction in JavaScript: Washing Machine Style!"

What is Abstraction?

Why is Abstraction Important?

What Are ES6 Classes?

The Washing Machine Example: Real-World Abstraction

What’s Abstracted?

Conclusion

Join 40 Days of JavaScript for FREE

Tidbit 01: How Does Event Loop Handle Promises?

What is a Promise?

What is an Event Loop?

How Event Loop Manages Promises?

Quick Recap

Want to learn further?

Why the with() method of JavaScript Array is a gem?

The traditional way to seek and change

Immutability is a great tool

The with() method and immutability

The with() method and the negative index

Method chaining

Can you please give a real-life use case of the with() method?

Conclusion

Next.js and Next-Auth V5: Guide to Social Logins(OAuth)

Create a Next.js App Router Project

Auth.js , aka Next-Auth(Version 5)

Installation

Setting up environment

Configurations: The auth.js file

The callback route

Create Login Form

The Home Page

Next.js Server Actions: Log in and out

Social Login With Google Oauth

Client ID and Secret from Google

Set Up Environment

Configure the Google Provider for Next-Auth

Test it out from the UI

Show LoggedIn User's Details

Add Sign Out(Logout) Functionality

Social Login With GitHub OAuth

Client ID and Secret from GitHub

Set Up Environment

Configure GitHub Provider From Next-Auth

Source Code & Resources

tapascript / learn-next-auth

Configurations: The `auth.js` file

The `callback` route

Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)