How I created a npm library, published it in a day?

Mayank Kumar — Thu, 07 Dec 2023 14:33:02 +0000

Hello reader,
So you are interested in publishing your own library on npm? Or just trying to gain an insight on how it could be done, so yes it's very logical to try it out and was fun for me.

Any interviews/events or meet-up, have something to show your work, and move around like Simba, Pumba and Timoth 😂.

Try this command which will give you more insights to my library, and open to any addition to the libray!!

npx mernkit your-project

If you want to learn more about this library, one click to check it all(2 mins read!), mernkit

Let's start with how I got it done quickly,

Ideation (1/5✅)

I wanted to have a proper folder structure for my MERN projects. Industry requires you to use MVC structure and it's good to get early with these habits.

Starting to work on it (2/5✅)

So firstly I created a folder structure with the basic ideation as this,

I needed Vite.js, React Routers, Tailwind CSS for front-end

Then model, controllers, routes, config.js, .env folder and thug get a proper structure.

Then coded it all out, giving u my GitHub repo, the templates folder holds all my code.

Work on library structure (3/5✅)

Searched out on how to connect to npm with "npm login", and use your code to make a library, you can keep the logic as running just a single function or multiple. Then I looked on youtube and got one simple video of Web Dev Simplified.

Now keeping a script.js to make the library. This script.js will run and handle logical part of your library.

!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const projectName = process.argv[2] || 'my-mern-project';
const projectPath = path.join(process.cwd(), projectName);
async function copyDir(src, dest) {
  await fs.promises.mkdir(dest, { recursive: true });
  let entries = await fs.promises.readdir(src, { withFileTypes: true });
  for (let entry of entries) {
    let srcPath = path.join(src, entry.name);
    let destPath = path.join(dest, entry.name);
    entry.isDirectory() ?
      await copyDir(srcPath, destPath) :
      await fs.promises.copyFile(srcPath, destPath);
  }
}
async function copyTemplates() {
  try {
    const scriptDir = path.resolve(__dirname);
    await Promise.all([copyDir(path.join(scriptDir, '../templates/frontend'), path.join(projectPath, 'frontend')),
      copyDir(path.join(scriptDir, '../templates/backend'), path.join(projectPath, 'backend'))
    ]);
    console.log('mernkit setup completed successfully!');
  } catch (error) {
    console.error('Error copying templates:', error);
  }
}
copyTemplates();

Testing!!(Very Important) (4/5✅)

While being in the root of project directory, "npm link", this links your library to test, create a new test folder and try to run the command to check your library.

Just because I didn't test my library well, I had to release version 1.0.0 to 1.0.7 to get a working library, not advisable so test it out well, and also get Read.me done.

Publish it!! (5/5✅)

Use the command, to publish your library/package to npm.

npm publish

A basic 5 step method to get your own library and show your work to people apart from your GitHub, something which is live and open to people to use.

Now after you have published your package, it's time to relax, u have just made your first library just like me....

Hit me up on my socials for any discussions,
Instagram-mank_42
Twitter-okaymank
Linked-In-Mayank Kumar
Github-mank-423

Don't do this in your tech interviews!!(My learnings so far...)

Mayank Kumar — Thu, 30 Nov 2023 09:22:46 +0000

Let's keep it short and simple about what are my learnings from the interviews I have given so far in the year of 2023. I will also share my small moments throughout on every aspect.

First of all, Hi from Mayank and Stitch which will be with you throughout the post. Dev.to.

So I have given Interview for SDE and MERN developer roles, and here are the learnings:

Know your language

Always have enough hands-on with the language and look-up for common built-ins used in the language. Also getting comfortable with a web editor helps during interview.

Funny story: Somewhere in March 2k23, I was interviewed for full-stack MERN. And the conversation was like,
Interviewer: How would you rate yourself in JavaScript?
Me: Out of 5 or 10? (confidence 😂)
Interviewer: Out of 5 (and I said 4!!)
After that it started with array declaration and then bombarding of inbuilt of js which I seriously didn't prepared for and I don't know how I made through the interview 🫠. My mistake totally!

Don't jump to tutorials and feel you are ready!

I have changed my approach, now I try one good tutorial create a codebase, after that I use that codebase and try to create my own logic for a very basic app to just learn the functionality.

Use Chat-GPT to get idea and code structure but try to type the code on your own

A serious one!, I have seen myself indulging in GPT usage this much, that I could just know how to use any code but I had problem typing it out. Get your syntax perfect even just knowing what to type, simply copy-pasting is not useful.

One more on Reactjs interview, I easily made a form with useState to show the values, unless asked to make a array in useState and insert the values in array. I was blank with syntax, but slowly keeping myself calm, I was able to complete it with interviewer's help. Also the above interview(js-4/5), I was asked to make a drop-down, which I hadn't used it in a while, there also I was stuck. So get the syntax straight!!

Always be prepared with a polished introduction (*basic communication tip)

I still sometimes forget some part of introduction, but all-in-all it should give the idea of who you are, what you are doing and learning, your project ideas and why applied for this role. Also adding some relevant experience is a plus. *I stammered in my first HR interview when she directly asked 'So tell me about yourself'😝.

Look for basic questions of interview(GFG, InterviewBit, etc.)

Concepts like hoisting, fork process, sharding, event callback flow, asynchronous programming, and small topics like this, I hadn't perfect idea before a Node.js Intern Developer role and some basic JavaScript concepts. Kind interviewer explained me every concept clearly *live tutorial 🌟, ofc didn't made it😂.

Make small projects on concepts and put everything on GitHub

Got this tip from recent interview to just type-out and keep ready small projects on topics i.e.- OOPS concept, basic CRUD apps, Redux Implementation(Make a to-do list, or just basic input and showing data on webpage) / Context API, and push all the code on GitHub to showcase them instantly.

I just tried giving a .NET full-stack dev interview, because HR explained that basically it's related to front-end development for freshers. Oh my God! I jotted down basics of .NET core, MVC, hands on C# language, ASP.NET and some other concepts. The interviewer directly started with any project implementations on OOPS in C#🤣. I explained the concepts but I didn't had any projects. So yes, didn't got the role. Ofccc🤔

So it ends with a condensed part which I also follow,Know what you are doing, Keep proof of work, and stay calm!. That's it

Hit me up on my socials for discussing any stories or any project ideas,
Instagram-mank_42
Twitter-okaymank
Linked-In-Mayank Kumar
Github-mank-423

DEV Community: Mayank Kumar