DEV Community: Riddhima Singh

Understanding npm init, npx, and Vite (Without Memorizing Commands)

Riddhima Singh — Tue, 07 Jul 2026 07:56:05 +0000

I have noticed that many students create React projects without fully understanding what the commands actually mean. We often memorize these commands and use them without knowing what happens behind the scenes.
So, I did some research today to understand the purpose behind these commands.

When starting a React project, you see many commands like:

npm init -y
npm init
npx create-react-app
npm create vite@latest

They look similar, but they solve different problems.

1. What does npm init do?

npm init creates a JavaScript project.

It creates a file called:

package.json

This file is like the identity card of your project.

It stores information like:

{ "name": "my-project", "version": "1.0.0", "dependencies": {} }

It tells npm:

What is this project called?
What packages does it need?
What commands can it run?

2. Difference between npm init and npm init -y
npm init

When you run:

npm init

npm asks questions:

package name:
version:
description:
entry point:
author:
license:

You answer them manually.

Example:

package name: collaborative-editor version: 1.0.0 author: Your Name

Then npm creates package.json.

npm init -y

The -y means "yes."

It automatically accepts the default answers.

So:

npm init -y

means:

"Create package.json without asking me questions."

It is faster, but it does not create a React project.

It only creates the project configuration file.

3. What is npx?

Many people confuse npm and npx.

Think of it like this:

npm

npm = Node Package Manager

It is used to:

install packages
manage dependencies
run scripts

Example:

npm install react

This downloads React into your project.

npx

npx is included with npm.

It means:

"Execute a package."

Example:

npx create-react-app my-app

You are saying:

"Run the create-react-app tool."

It downloads the tool if needed, runs it, and creates your project.

4. What does temporary vs permanent mean?

Imagine you need a hammer.

Permanent installation

You buy a hammer and keep it at home.

Example:

npm install react

Now React is saved inside your project:

node_modules/

react/
react-dom/

Your project needs it every time.

Temporary usage

You borrow a hammer to build a table.

Example:

npx create-react-app

You need the tool once to create the project.

After it creates your files, you don't need the tool anymore.

5. What does npm create vite@latest mean?

Command:

npm create vite@latest

Break it down:

npm

Use npm.

create

Run a project creation tool.

vite

The tool we want.

@latest

Use the newest version of Vite.

So it means:

"Use the latest Vite project generator to create a project."

6. Is Vite downloaded temporarily?

Yes.

When you run:

npm create vite@latest

Vite is used as a generator.

Its job:

Your project is then separate.

Later, your project installs its own dependencies:

npm install

Now your project gets things like:

_node_modules/

react
react-dom
vite
typescript
_
These stay with your project.

7. What was different with older React?

Older React projects commonly used:

npx create-react-app my-app

This did the same general thing:

create project
|
↓
install React
|
↓
install tools
|
↓
start development server

The difference is mainly the tool used to build the project.

Create React App vs Vite
Create React App

Older approach:

create-react-app
|
↓
Webpack
|
↓
Bundle everything
|
↓
Run app

It was simple for beginners but became slower and less flexible.

Vite

Modern approach:

Vite does not mean React.

Vite can create projects for:

React
Vue
Svelte
Vanilla JavaScript

React is the library.

Vite is the tool that helps build and run the project.

The complete picture

When creating your project:

Remember this simple rule:

npm init

→ Create an empty JavaScript project.

npm install

→ Add packages permanently to your project.

npx

→ Run a package/tool without permanently installing the tool globally.

npm create vite@latest

→ Temporarily use Vite to generate a modern project.

npm run dev

→ Start your project.

Building a Real-Time Collaborative Code Editor from Scratch (With Almost No Experience)

Riddhima Singh — Tue, 07 Jul 2026 06:51:00 +0000

I'm starting a new project: building a real-time collaborative code editor, similar to how multiple people can edit the same document at once.

The catch?

I have no experience with WebSockets, CRDTs, collaborative systems, or distributed synchronization.

Instead of following a YouTube tutorial and copying code I don't understand, I'm going to learn every concept from the ground up—even if it means getting stuck, making mistakes, and rebuilding things multiple times.

My goal isn't just to finish the project. It's to understand why it works.

I'll be documenting the entire journey here:

What I'm learning
The problems I run into
The mistakes I make
How I solve them
Things I wish I'd known earlier

I'm not trying to build this as fast as possible. I'm trying to build it in a way that I'll actually be able to explain every decision I make.

If you've built collaborative apps before, I'd love your advice. And if you're learning alongside me, I hope these posts help you too.

Day 0 starts today....

🌌 Quantum Atelier: I’m Building Something & I Might Need Your Help

Riddhima Singh — Thu, 01 May 2025 06:13:40 +0000

Hey!

I’m just a student. Not some tech lead with a product launch.
I’m not here with a big announcement (yet) — I’m here in the middle of figuring it all out.

This is Quantum Atelier — a personal lab, a glitchy studio, a living digital playground I’m building from scratch.
It’s not a portfolio, not a blog, not a startup — maybe it’s a mix of all three.
It’s chaotic. Experimental. A space for all the unfiltered creation.

I’m doing the design, development, writing, identity, and the actual ideas — all on my own. No roadmap.
I’m learning frontend + deep web dev, slowly diving into Android dev too, and tinkering with everything from UI/UX to microinteractions to console-style layouts to slime-inspired pages.
I don’t always know what I’m doing. But I’m doing it anyway.

Why I’m Writing This
Because I want to document the mess.
Because if you're reading this and you've ever wanted to build something strange — we might just get along.

I’ll be sharing every oddball experiment, idea, and meltdown here on Dev, and maybe across Reddit, LinkedIn, and my own site too. I don't have a following, and that’s okay.

What’s Next?
I’ll soon launch Quantum Atelier— the actual site.
It won’t be perfect, but it’ll be mine.

I’ll also be writing about how I built it, the tools I used, and all the breakdowns along the way.
This is just the beginning.

If any of this sounds like something you want to follow, I’d be happy to have you around.
And if you’re building something too — tell me. Let’s figure this stuff out together.

See you in the next post.

— the person behind the chaos

“Quantum Atelier: The Beginning of a Chaotic Web Experiment"

Riddhima Singh — Tue, 29 Apr 2025 16:17:17 +0000

Hi, I’m Riddhima👋
I’m a curious student, currently deep-diving into Android and Web Development — and I’m on a mission to create a digital space that feels as alive, chaotic, and creatively unfiltered as my brain does.
This post marks the beginning of Quantum Atelier — my personal site where I’m blending everything else I can't explain conventionally.✍️

Why I’m Building This:
I didn’t want just another portfolio.📄
I wanted a playground. A digital lab. A canvas for failed ideas and brilliant accidents.
Something that doesn’t feel like LinkedIn in disguise.

What You’ll See in This Blog:
Raw progress updates as I build Quantum Atelier
Visual experiments and code snippets📄
Honest thoughts on building in public as a student
Maybe even some unhinged UI ideas and dev rants😅

Honestly? I was scared. I thought this space was only for "big people" with jobs and perfect GitHub graphs.But I'll try my best.Thought that maybe someone needs a perspective — like you want to build something, but feel too early or too small.

So, Let’s build things together.