Forem: Shubhankar Valimbe

Introducing nextjs-starter-pack: my first npm package

Shubhankar Valimbe — Sun, 20 Jul 2025 00:30:16 +0000

I have gotten so tired of spending 2-3 hours setting up the same stack for every new Next.js project. Database, auth, state management, forms - it's always the same dance. To simplify that, I created nextjs-starter-pack — a one-command CLI to generate a fully configured, modern Next.js 15 apps with customizable integrations.

Why I built this

Every developer has that folder of "reference projects" they copy configs from. I realized I was basically rebuilding the same foundation over and over, just with slight variations depending on the project needs.

The breaking point was starting my fourth SaaS project and realizing I was about to spend another afternoon wiring up Clerk auth with Prisma... again.

Instead of copying code, why not generate it?

Getting Started

Try it with:

npx nextjs-starter-pack

Or explore the full range of options:

npx nextjs-starter-pack --help

What You Get

Foundation: Next.js 15 + React 19 + TypeScript + Tailwind + Shadcn/ui

Database: Prisma or Drizzle
Auth: Auth.js or Clerk
State: Zustand or Jotai

Plus: TanStack Query • React Hook Form + Zod • Dark mode

Try It Today

If you're tired of the setup ceremony that comes with every new Next.js project, give nextjs-starter-pack a try. It might just save you an hour on your next project.

Links:
GitHub Repository
NPM Package

I'd love to hear your feedback or feature requests. Feel free to open an issue on GitHub or reach out directly.

I'm actively working on new integrations (Stripe, i18n, CI/CD workflows, analytics, PWA, etc.) to make this the go-to for creating Next.js apps, and if any open sourcers are interested in helping build this, feel free to reach out on Reddit.

Stop setting up. Start building.

GitHub 102: Branching Strategies, Pull Requests, and More

Shubhankar Valimbe — Mon, 25 Sep 2023 21:16:50 +0000

Hello beautiful people!

Collaborative software development with Git and GitHub requires more than just the basics. In this guide, we'll explore advanced topics and best practices that will help you become a Git and GitHub collaboration pro.

Branching Strategies

Branching is a fundamental concept in Git, and different branching strategies can make or break a project's development process. Here are some common branching strategies:

Feature Branching: Create a branch for each new feature or enhancement. This keeps the main branch (usually main or master) stable.
Release Branching: Use release branches to prepare for a new version. Any bug fixes or last-minute changes go into this branch before a release.
Hotfix Branching: For critical fixes in production, create a hotfix branch based on the main branch. Once tested, merge it back into both main and the active development branch.

Pull Requests and Code Review

Pull requests are the heart of collaboration on GitHub. They enable you to propose changes, get feedback, and ensure code quality. Here's how it works:

Create a Pull Request (PR): When you're ready to merge your branch, open a PR. Describe the changes and add reviewers.
Code Review: Reviewers provide feedback, ask questions, and suggest improvements. Address these comments before merging.
Continuous Integration (CI): Ensure your code passes automated tests configured in your repository. Many CI tools integrate with GitHub.
Merge and Close: Once the PR is approved and CI passes, merge the changes. Don't forget to delete your branch if it's no longer needed.

Collaborating with Others

Collaboration is more than just code. Effective teamwork includes communication, shared goals, and clarity. Here are some tips:

Communication: Use GitHub's issue tracker, discussion boards, and comments in PRs for clear communication.
Shared Goals: Define project goals, milestones, and priorities. Ensure everyone is on the same page.
Pull Request Templates: Create templates to guide contributors when opening PRs, making the process smoother.

Best Practices

Good Git and GitHub practices make collaboration smoother and more efficient:

Descriptive Commit Messages: Write clear and concise commit messages that explain what you did.
Branch Naming Conventions: Follow a consistent branch naming convention. For example, use feature/ or bugfix/ prefixes.
Clean Commit History: Avoid messy commit histories by squashing related commits and keeping commits logically organized.

Examples

Let's see these concepts in action with a few examples:

Example 1: Feature Branch Workflow

Create a feature branch: git checkout -b feature/my-feature
Make changes, commit: git commit -m "Add new feature"
Push to GitHub: git push origin feature/my-feature
Open a PR, request reviews, and make updates.
Merge the PR when ready.

Example 2: Hotfix Branch Workflow

Create a hotfix branch: git checkout -b hotfix/urgent-fix
Make changes, commit: git commit -m "Fix critical bug"
Push to GitHub: git push origin hotfix/urgent-fix
Open a PR, request reviews, and make updates.
Merge the PR into main and develop branches.

With these advanced techniques and best practices, you'll master Git and GitHub collaboration, ensuring smoother workflows and higher-quality code for your projects.

Let me know your thoughts or questions in the comments!

GitHub 101: Cloning, Committing, and Creating New Branches

Shubhankar Valimbe — Mon, 25 Sep 2023 21:01:54 +0000

Hello beautiful people!

Today I'm going to act as a chaperone on your journey to become a GitHub pro. If you're an experienced dev, you already know what it is. For the ones that don't, GitHub is a widely used platform for collaborating on code. This guide will walk you through the process of cloning a GitHub repository, making changes, and pushing those changes to both the main branch and a new branch.

Before starting, please create an account on GitHub if you don't already have one and install Git.

Cloning a GitHub Repository

To get started, you'll need to clone an existing GitHub repository to your local machine. Follow these steps:

Navigate to directory

Open your terminal or command prompt.

Navigate to the directory where you want to store the cloned repository:

cd /path/to/your/desired/directory

Copy Repo URL

Click on the Code button in the upper right corner of repo files and copy the HTTPS URL.

Clone the repo

Clone the repository using its HTTPS URL. Replace username and repository-name with the actual URL of the GitHub repository:

git clone https://github.com/username/repository-name.git

Authenticate GitHub credentials

Git will prompt you for your GitHub username and password (or personal access token, if two-factor authentication is enabled) to authenticate and clone the repository.

Once the clone is complete, you'll have a local copy of the Git repository in the directory you specified.

Making Changes

With the repository cloned locally, you can now make changes to the code or files. You can edit, add, or delete files as needed.

Pushing Changes to the Main Branch

To commit and push your changes to the main branch, follow these steps:

Stage the changes

Stage the changes you want to commit. To stage all changes, use:

git add .

Commit Changes

Commit the changes with a descriptive message:

git commit -m "Your commit message here"

Push Changes

Push the changes to the main branch on GitHub:

git push origin main

Creating and Pushing to a New Branch

To create and push your changes to a new branch, do the following:

Create a branch

Create a new branch locally and switch to it:

git checkout -b new-branch-name

Make and commit your changes in this new branch as shown above.

Push to new branch

Push the new branch to GitHub and set up tracking:

git push -u origin new-branch-name

With these steps, you've successfully cloned a GitHub repository, made changes, and pushed those changes both to the main branch and a new branch. This workflow allows you to collaborate effectively on GitHub projects.

Let me know your thoughts or questions in the comments!

DOM Manipulation with JavaScript: Bring Your Web Page to Life!

Shubhankar Valimbe — Thu, 14 Sep 2023 09:07:33 +0000

Hello beautiful people!

Ever wondered how to make your web page interactive and dynamic? Well, that's where DOM (Document Object Model) manipulation with JavaScript comes into play. In this quick read, we'll explore the basics of DOM manipulation and how it can add life to your web projects.

Understanding the DOM

Before we dive into the magic of DOM manipulation, let's get the basics right. The DOM is a programming interface for web documents. It represents the structure of a web page and allows us to interact with its elements. Each HTML element on your page is a part of the DOM, and you can think of it as a tree-like structure.

Accessing DOM Elements

The first step in DOM manipulation is accessing the elements you want to work with. You can do this using JavaScript's document object. For instance, to select an element with an id of myElement you can use:

const element = document.getElementById('myElement');

You can also select elements by class, tag name, or other attributes using methods like querySelector and querySelectorAll.

Modifying Elements

Now that you've got your hands on an element, it's time to make some changes. Here are a few common operations:

Changing Text Content

element.textContent = 'New Text Content';

Modifying HTML

element.innerHTML = '<p>This is a paragraph.</p>';

Changing Styles

element.style.color = 'red';
element.style.fontSize = '20px';

Adding or Removing Classes

element.classList.add('new-class');
element.classList.remove('old-class');

Handling Events

DOM manipulation is not just about changing things; it's also about responding to user actions. You can use event listeners to make your page interactive. For example, to execute code when a button is clicked:

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

Creating New Elements

Sometimes, you may want to add new elements to your page dynamically. You can create elements using document.createElement and then append them to the DOM.

const newElement = document.createElement('div');
newElement.textContent = 'I am a new element';
document.body.appendChild(newElement);

Removing Elements

And, of course, you can remove elements too!

const elementToRemove = document.getElementById('toBeRemoved');
elementToRemove.remove();

Putting It All Together

With these basic tools, you can perform a wide range of DOM manipulations, from updating text and styles to adding, removing, and responding to elements. The DOM is your playground, and JavaScript is your tool to create amazing web experiences.

So go ahead, experiment, and have fun bringing your web pages to life with DOM manipulation and JavaScript! 🚀

The React Revolution: Evolution of Syntax

Shubhankar Valimbe — Sat, 09 Sep 2023 12:11:00 +0000

Hey there, React lovers! If you've been around the JavaScript block for a while, you've probably witnessed the incredible evolution of React. From its humble beginnings to becoming the go-to library for building interactive web applications, React's syntax has undergone some fascinating changes. In this blog post, we'll take a stroll down memory lane and explore the evolution of React's syntax.

The Birth of React

React 0.3.0 (May 29, 2013)

Back in the day, React's syntax was quite different. It all started with a React.createClass method to define components, which looked like this:

var Hello = React.createClass({
  render: function() {
    return <div>Hello, {this.props.name}</div>;
  }
});

And rendering components was done like this:

React.render(<Hello name="World" />, mountNode);

ES6 and the Class Component Revolution

React 0.13.0 (March 10, 2015)

React underwent a significant transformation with the introduction of ES6 classes. This change made defining components cleaner and more JavaScript-like:

class Hello extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

This ES6 class syntax made React code more readable and aligned with modern JavaScript practices. It also enabled the use of lifecycle methods directly in class components.

Functional Components

React 0.14.0 (October 7, 2015)

React introduced functional components, allowing developers to define components as pure functions. This syntax simplifies component creation when you don't need state or lifecycle methods:

function Hello(props) {
  return <div>Hello, {props.name}</div>;
}

Functional components became the go-to choice for simple, stateless UI elements.

JSX Spread Attributes

React 16.2.0 (November 28, 2017)

React introduced a more convenient way to pass props using JSX spread attributes. It allowed for cleaner code when dealing with multiple props:

const person = { name: "Alice", age: 30 };
<Hello {...person} />

This change made component composition and prop spreading more expressive.

Hooks: A Game Changer

React 16.8.0 (February 6, 2019)

Fast forward to 2019, and React unleashed hooks, a game-changing feature. Hooks let you use state and other React features without writing class components. Here's how you might use the useState hook:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Hooks offered more flexibility and reusability in functional components, ultimately simplifying React code.

Wrapping Up

The evolution of React's syntax reflects its commitment to staying current and developer-friendly. Whether you prefer class components, functional components, or the power of hooks, React's flexibility allows you to choose the syntax that best suits your project's needs.

As React continues to evolve, one thing remains constant: it's a powerhouse for building dynamic user interfaces on the web. So, whether you're nostalgic for the old ways or diving headfirst into the latest syntax, React has you covered. Happy coding!

Event Handling in JavaScript

Shubhankar Valimbe — Fri, 08 Sep 2023 21:41:08 +0000

Hey there, JavaScript enthusiast! Ready to add some interactivity to your web page? Well, you're in the right place because today, we're diving into the exciting world of event handling in JavaScript.

What's an Event?

Before we get into the nitty-gritty, let's talk about what an event is. In the web world, an event is basically something that happens – a click, a keypress, a mouse movement, you name it. These events can be captured and responded to using JavaScript.

The Event Listener

To catch these events, we use something called an event listener. It's like having a spy waiting for specific things to happen on your web page. When that something happens, the event listener jumps into action.

Here's a simple example:

const button = document.querySelector('#myButton');

button.addEventListener('click', () => {
  alert('Button clicked!');
});

In this code, we're telling JavaScript to listen for a click event on the element with the id myButton. When the button is clicked, a pop-up alert will appear saying 'Button clicked!'. Magic, right?

The Event Object

Events can carry extra information with them, like where the mouse was when it was clicked. This additional info comes in an event object.

const myElement = document.querySelector('#myElement');

myElement.addEventListener('mousemove', (event) => {
  console.log(`Mouse coordinates: ${event.clientX}, ${event.clientY}`);
});

In this snippet, we're logging the mouse's X and Y coordinates whenever the mouse moves over myElement. The event object contains all the juicy details.

Removing Event Listeners

Don't forget, you can also remove event listeners if you no longer need them. It's as simple as this:

const removeListener = () => {
  button.removeEventListener('click', clickHandler);
};

button.addEventListener('click', clickHandler);

Wrapping Up

And there you have it – a quick tour of event handling in JavaScript! With event listeners and event objects in your toolkit, you can make your web page respond to user actions and create dynamic, interactive experiences.

So go ahead, give it a try! Add some event handling magic to your website and make it come to life.