DEV Community: Shubham Battoo

Side Projects and AI

Shubham Battoo — Fri, 02 Jan 2026 18:56:32 +0000

Reminiscing about side projects going through my GitHub repositories(a.k.a graveyard for side projects), and how they used to really motivate me to be creative. The joy of buying a domain, even before building something, the joy of just securing the name on every service ever, even before writing a single line of code. How building them shaped me, and made me a better developer.

Today with the onset of AI and one shotting an app is so in fashion, which I feel just takes away the joy of building, but at the same time, saves so much of our time and helps to grasp topics so much more easily and quickly. I wanted to look at building Side Projects with and without AI.

Side Projects and Me

Building, continuously building helped me be a better developer, not only helping me learn new skills, but also practicing already learnt skills. the whole concept of Build X with < insert programming language > was such a cool thing.

Side projects were really something I looked to every weekends, finishing my day job, every time, they were in my mind. The process of building really teaches you a lot, facing real production level bugs, working on real issues which you will be facing in your daily coding. It helps in creating a habit of coding, and honestly speaking code for fun is the best way to code, but I also love getting paid for it 😉

Side Projects and AI

I was very apprehensive diving into building my side projects with AI, learning more about MCPs and the agent flows, really made me intrigued about this whole world which has been opened up by AI. All the new opportunities, really made me excited. Not only I use long debugging sessions building projects with coding ai agents, it in turn also introduces me to doing things differently which really is helpful, and makes building difficult projects really fun.

But I have also seen, since something can be done so easily with some basic prompting, it really takes a lot of effort for me to start something, which is something I am really irked about. Nonetheless, once into the realm of coding it really does make building fun, after the early hiccups.

The process of me learning a new tool or a new language always included me building random side projects using the tool. In that case AI has supported me in learning tough concepts, or explaining syntax, which in turn helps me learn stuff quickly. But I also see sometimes, it teaches me something but I tend to forget it quickly, retaining is something which I am failing to do while learning and building with AI.

Whats Next

I am not so bullish or have negative thoughts on AI in coding, but at the same time I am seeing some really good benefits of it while building my side projects. Hoping I get into building a lot more and churn out good quality projects and not just what do they call it? yeah SLOP 😁

You don't need dotenv.

Shubham Battoo — Thu, 02 May 2024 08:02:12 +0000

Environment variables are very important while developing with Node.js, it essentially allows your application to behave differently based on
the environment you want them to run in. To facilitate this developers have often used a package dotenv which helped us load environment
variables from a .env file. Recent updates to the Node.js, have made this package usage reduntant as they have introduced native support for
environment variables.

Built in support for `.env`

Starting from Node.js v20.6.0, Node.js has built in support for configuring environment variables using the --env-file flag from the command
line. Your setup file should use the INI file style. Each line must have a key and a value for a setting.

Let's see how we can use this, take the following .env:

# config.env file
NODE_OPTIONS='--title="My Node App"'
PASSWORD='Asdf@1234'

To be able to initialise your Node.js application with the above .env you would need to run the following command:

node --env-file=config.env index.js

Inside your index.js you can use the variables using as follows:

console.log(process.title); // My Node App
console.log(process.env.PASSWORD); // Asdf@1234

As shown above, this adjustment lets you set your NODE_OPTIONS in the .env file instead of adding it to your package.json.

Loading environment variables with `process.loadEnvFile()`

As we can access configuration variables by passing a flag while running the node application another use case might be that developers might need to load variables from a file, starting from Node.js 21.7.0 introduced process.loadEnvFile() method.

Loads the .env file into process.env.

const { loadEnvFile } = require('node:process');

loadEnvFile() // will load the variables from .env
loadEnvFile('./config.env') // you can even pass a file path

One thing to keep in mind while using this would be NODE_OPTIONS in the .env will not affect Node.js.

In summary, while removing the dotenv dependency from your Node.js applications may require some initial setup, the benefits of streamlined
deployment and reduced complexity can significantly enhance both performance and maintainability.

As we approach the stable release of Node.js 22.0.0, it's evident that Node.js is evolving rapidly, from refreshing its website to introducing a
new mascot. The features included in the latest versions bring a breath of fresh air,
enhancing the platform's capabilities and user experience.

It's also encouraging to see Node.js adopting successful features from modern runtimes like Bun, which shows a healthy approach to innovation
and improvement. This adaptability ensures Node.js remains a top choice for developers seeking robust and up-to-date technology.

Happy configuring your next Node.js Application!

Deep Cloning Objects in JavaScript

Shubham Battoo — Tue, 09 Jan 2024 17:15:56 +0000

A lot of the developers are still not aware of the the method to deep clone objects in JavaScript the native way.
Thats right, structuredClone method is built-in:

const song = {
    title: 'Never gonna give you up',
    artist: 'Rick Astley'
}

const copiedSong = structuredClone(song);

JavaScript's structuredClone method serves as a powerful tool for creating exact, deep copies of complex data structures and objects within the language. Unlike conventional cloning methods, structuredClone can duplicate not only simple data types but also intricate objects, arrays, and nested elements, ensuring their integrity while preserving references. Whether dealing with intricate data structures or nested objects, structuredClone provides developers with a reliable means to duplicate JavaScript entities without compromising their structure or integrity.

It can clone a wide variety of JavaScript types:

Array
Date
Set
Map
Blob
And many more

Let's look at JSON.parse(JSON.stringify(x))

This hack works perfectly well for all situations, but still has some drawbacks, which are addressed by the structuredClone.

const song = {
    title: 'Never gonna give you up',
    artist: 'Rick Astley',
    tags: ['pop'],
    releaseDate: new Date()
};

const probalamaticCopiedSong = JSON.parse(JSON.stringify(song));

console.log(probalamaticCopiedSong);

The above example we are trying to use the hack to copy the song object with a key which is of type Date but when we try to log the copied object we get the following:

{
  title: 'Never gonna give you up',
  artist: 'Rick Astley',
  tags: [ 'pop' ],
  releaseDate: '2024-01-09T17:01:05.013Z'
}

The releaseDate key is converted to string and is not the desired result, we want the Date to remain as a Date.

What about spread operator?

Understanding what a deep copy means is important here, if we want a shallow copy the spread operator serves the purpose, basically not being able to copy the nested elements of an object.

const song = {
    title: 'Never gonna give you up',
    artist: 'Rick Astley'
};

const copiedSong = {...song};

The above works perfectly fine. Until, we introduce a third key to our song object and try to copy it usign the spread method.

const song = {
    title: 'Never gonna give you up',
    artist: 'Rick Astley',
    tags: ['pop']
};

const shallowCopiedSong = {...song};

shallowCopiedSong.tags.push('rick roll');

Lets look at the same example again with some change, here when we try to push a string value to the tags key on the shallowCopiedSong object, not only it will add 'rick roll' to shallowCopiedSong it will also add it to the song object, and that is not the solution we are looking for.

Browser Compatibility

Source: MDN

Conclusion

In the ever-evolving realm of JavaScript, structuredClone emerges as a pivotal feature, enabling developers to faithfully replicate intricate data structures and objects while maintaining their integrity. Its ability to create precise duplicates of complex entities empowers developers, ensuring the preservation of relationships and facilitating seamless data manipulation within JavaScript applications.

You dont need JS for that? 🤯

Shubham Battoo — Fri, 24 Nov 2023 13:33:50 +0000

Since, the introduction of HTML5 and CSS3, lot of design decisions which were only possible with JavaScript were now possible to be achieved with HTML and CSS. Here in this article we will be looking at some of those utilities which you can make use of for your next web app, and reduce the JavaScript overhead.

:target

:target is a CSS pseudo-class that selects an element targeted by the URL fragment identifier (#). When a link with a corresponding ID is clicked, it activates the associated element's styling, enabling dynamic changes or visual cues based on user interactions with the URL.

See Example

Details Accordian

The <details> tag in HTML is used to create a disclosure widget that can be toggled open or closed to reveal or hide content. It acts as a container for supplementary information, typically within an interactive dropdown or collapsible section. This tag is often coupled with the <summary> tag, which provides a visible heading or label for the collapsible content.

See Example

Dialog

The <dialog> tag in HTML represents a dialog box or modal in a document. It provides a way to create pop-up dialogs or modal windows within a web page, typically used for interactions that require user attention or action. By using JavaScript and the showModal() method, developers can control the display and behavior of the <dialog> element.

See Example

Embracing these versatile HTML elements and CSS features can significantly enhance user experiences, offering a seamless blend of interactive design and functionality on the modern web.

How to setup your react applications

Shubham Battoo — Wed, 22 Sep 2021 16:05:37 +0000

There is no right or wrong way when creating a React application. Being a library react doesn't have any predefined structure for an application, it gives us a lot of freedom to do things. Most of the time what people tend to do is create a components folder and use that as a place to store your complete application, this is not very scalable solution and the code becomes difficult to test or add features to. I like to keep my code structure in a way so that they are easy to test, being very obvious which makes adding features easy.

I am going to show you a way in which you can create a scalable architecture for a production React applications.

Tech Stack

Following are the technologies I generally use while creating a production ready scalable react application:

React with Hooks
Redux for state management
React Router
CSS Modules or Sass/Scss
Jest and React Testing Library

Build tools and Linting

I generally use Create React App for bootstrapping my react application, and add some custom configuration using craco (Create React App Configuration Override).

When a react application grows in size and complexity various problems also arise, managing imports is one of them. Aliases just makes importing from anywhere inside the project easy, also moving files is a very less hassle, you can easily do something like import Component from @components/my-component.

You can set up craco in you project and add the following to craco.config.js to enable aliases:

const path = require("path");
module.exports = {
  webpack: {
    alias: {
      '@components': path.resolve(__dirname, "src/components/"),
      '@images': path.resolve(__dirname, "src/assets/images/")
    }
  }
}

Even your IDE can be set up to use these while auto-importing components/files.

As Create React App getting started template already comes bundled with eslint I tend to leave the linting to it, and only add custom configurations if required to the eslint config file, or else we are good to go.

Directory Structure

Following are the top level folders:

assets - place to keep all your static assets from images, logos, splash, etc.
components - shared/reusable components, like buttons, form components(select, input...), layout wrappers
libs - for javascript modules, and also for custom hooks
store - global redux store
utils - utilities, helper methods
pages - to store all the main views for our app, most of the app is contained here
contexts - it is optional, but is used to store all the contexts used globally

└── /src
    ├── App.js
    ├── /assets
    ├── /components
    ├── /contexts
    ├── index.js
    ├── /libs
    ├── /pages
    ├── /store
    └── /utils

Apart from these, you can also add types if using react with typescript, but keep in mind these are a bit flexible, like pages can be called views, also you can separate javscript modules and hooks in two different directories.

Components

All the shared components across the projects are stored here, also further grouping is done by type for example - forms, layout, etc.

Components have a single component.js file with named exports, its better to avoid default exporting which might create file name conflicts. Most of the times we are trying to create our own form system or layout from bindings from different libraries like Formik and Material UI, or ant design. So, I prefer to keep the files together in a folder so its easy to find them and work with them. Following is in a way I create files for a component:

Component.js - Your React component goes here
component.module.css/component.scss - All the styles related to this component

Here we have one thing to consider, you can either create a test file here or create a similar structure in your __tests__ folder like following:

└── __tests__
    └── Components
        └── Component.test.js

Or, As I prefer them to be together in the Components folder itself with the Component just makes them easier to find and concentrate on them.

Component.test.js - tests cases related to your component

└── components
    ├── layout
    |   └── container
    │       ├── Container.js
    │       ├── container.scss
    │       └── Container.test.js
    └── navigation
        ├── NotFound
        │   ├── NotFound.js
        │   └── NotFound.test.js
        ├── PvtRoute
        │   ├── PvtRoute.js
        │   └── PvtRoute.test.js
        ├── RootNavigator.js
        └── RootNavigator.test.js

Libs

This directory will host all our javascript modules/services which will be used throughout our application. Not only that but all our custom hooks can also be stored inside this directory. Following can be the way to setup the folder:

└── src
    └── libs
        ├── localStorage.js
        ├── useAuthentication.js
        └── useUser.js

Store

This contains our global store, for our case it will be Redux. We will have folders for each of our features which will contain the reducers, actions and as well as tests. We will also have one index.js file which will be our rootReducer, which will be on the top most level of the store folder. The files can be created in the following manner:

└── src
    └── store
        ├── index.js
        ├── recipes
        │   ├── recipesAction.js
        │   └── recipesReducer.js
        └── user
            ├── userAction.js
            └── userReducer.js

It is very extensible method can can be used with Redux Toolkit or with Redux Sagas, in place of reducers and action keywords it could be slices or sagas.

Utils

Here we will store all our utilities, which will be used by the entire application. Not all code bases need a utils folder, but I recommend to have one to store all the global configurations and methods which can be used elsewhere in the app. It can contain a helpers.js file which can store all the different functions used. Another for form validation we can create, validations.js, and to store constants we can have one constants.js

└── src
    └── utils
        ├── constants.js
        ├── helpers.js
        └── validations.js

Pages or Views

Here lives are our main chunk of the application, it can also be called views as each page is like a "view" in an application. Anything inside a view is a page which will be used in a specific view - AddRecipe page which will only be used in context to /recipes route, and UserProfile page will only be used on the /users route.

The main advantage of storing our pages in this way, instead putting all of the pages together inside components or pages is that it makes it very easy to understand the app structure. If there are nested routes, you can always add a nested views folder within the main route.

└── src
    └── pages
        └── Recipes
            └── AddRecipe
                ├── AddRecipe.js
                └── AddRecipe.test.js

Conclusion

This is my personal preference to setup a react based project/webapp, which scales when the code base becomes huge in production and its hard to manage resources.

Would love to know more, how do you guys setup your react applications?

Array Indexing Method

Shubham Battoo — Sun, 07 Feb 2021 06:41:00 +0000

Recently, came across a cool Twitter thread which talks about a new way to access the array items.

Basically, this is a tc39 proposal which is at stage 3 at the moment. The at method supports relative indexing from the end, this is a prototype of built-in indexable objects: Array, String, and TypedArrays objects.

You can provide either positive or negative integers both and it will return the item at that index. Negative indexes helping to count back in the array.

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

// Current way to get last item
arr[arr.length - 1]; // 5

// Proposed way
arr.at(-1); // 5

Earlier, there was another proposal which suggested adding a method Array.prototype.last to get the last item from an array. Which did not cross the stage 1.

Currently, it is not supported in any browser but hopefully will be supported soon.

Would love to know what other uses do you guys feel we can have with this method.

Operator Lookup - Search for JavaScript Operators

Shubham Battoo — Fri, 04 Dec 2020 17:39:14 +0000

Found a really neat tool to search for JavaScript Operators, really nicely created by Josh W. Comeau.

If you are like me, must have spend a lot of time searching on MDN for the correct operator to use or something, this tool really makes JavaScript Operators easy to find and learn more about.

The tool even contains example uses!!

JavaScript Operator Lookup

Numeric Separators

Shubham Battoo — Sat, 19 Sep 2020 13:28:39 +0000

Reading large numbers is difficult most of the time, using the latest proposal for Numeric Separators is going to make this job easy.

For example, say you have the following number:

let budget = 1000000000;

It's hard for the human eye to detect what is the actual order in here.

But, by using the Numerical Separators, it can be rewritten in the following way:

let budget = 1_000_000_000;

We can easily tell by separating them with underscores that this is a billion.

Support

There is fairly good support for this feature in the latest browsers:

CanIuse
MDN

Found it very neat. Let me know how you guys feel about this?

Further Learning

Uploading Files to MongoDB with GridFS and Multer Using NodeJS

Shubham Battoo — Sat, 23 Nov 2019 15:39:44 +0000

Hello, in this tutorial we will learn how to upload files directly to MongoDB using GridFS specification.

If you think TLDR; just check finish code here.

The official docs explain when to use this specification for uploading files. Which is summarized in the following:

If your filesystem limits the number of files in a directory, you can use GridFS to store as many files as needed.
When you want to access information from portions of large files without having to load whole files into memory, you can use GridFS to recall sections of files without reading the entire file into memory.
When you want to keep your files and metadata automatically synced and deployed across a number of systems and facilities, you can use GridFS. When using geographically distributed replica sets, MongoDB can distribute files and their metadata automatically to a number of mongod instances and facilities.

Since, GridFS stores files in chunks. Following are the collections created:

chunks stores the binary chunks.
files stores the file’s metadata.

Prerequisites

NodeJS LTS
MongoDB installed on your local machine
a Code Editor

Setting up a local NodeJS server

Go to your command line, and type

npm init -y

This will generate an package.json file with default values.

Then install all the dependencies required for this project

npm install express mongoose ejs multer multer-gridfs-storage

Create a file named app.js in the root of the project. Require the necessary packages for creating a server.

const express = require("express");
const app = express();

app.use(express.json());
app.set("view engine", "ejs");

const port = 5001;

app.listen(port, () => {
  console.log("server started on " + port);
});

It will be better for us to create scripts to run the web app from the command line, go to your package.json file and on the scripts key, add the following:

  "scripts": {
    "start": "node app.js",
    "dev": "nodemon app.js"
  }

then run, npm start and the server should start on the port 5001. You should see one log on the command line stating that server started on 5001.

Connecting to Database, Initializing GridFsStorage and Creating a Storage

Require all the necessary packages

const crypto = require("crypto");
const path = require("path");
const mongoose = require("mongoose");
const multer = require("multer");
const GridFsStorage = require("multer-gridfs-storage");

Mongoose is an ORM for MongoDB which will be used for this tutorial. Multer is a NodeJS middleware which facilitates file uploads. And GridFsStorage is GridFS storage engine for Multer to store uploaded files directly to MongoDB. Crypto and Path will be used to create unique name for the file uploaded.

// DB
const mongoURI = "mongodb://localhost:27017/node-file-upl";

// connection
const conn = mongoose.createConnection(mongoURI, {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

Now, Initializing the GridFsStorage

// init gfs
let gfs;
conn.once("open", () => {
  // init stream
  gfs = new mongoose.mongo.GridFSBucket(conn.db, {
    bucketName: "uploads"
  });
});

Here we are using the native nodejs-mongodb-drive which the mongoose uses and creating a GridFSBucket, we are passing the db to the bucket, you can see we are giving one bucket name, this bucket name will be used a name of a collection.

// Storage
const storage = new GridFsStorage({
  url: mongoURI,
  file: (req, file) => {
    return new Promise((resolve, reject) => {
      crypto.randomBytes(16, (err, buf) => {
        if (err) {
          return reject(err);
        }
        const filename = buf.toString("hex") + path.extname(file.originalname);
        const fileInfo = {
          filename: filename,
          bucketName: "uploads"
        };
        resolve(fileInfo);
      });
    });
  }
});

const upload = multer({
  storage
});

Now we are initializing the storage as per Multer GridFS and creating random bytes using the randomBytes method present on the crypto library.

Here we are using the Promise constructor to create a promise, which then resolves with the fileInfo object. This step is optional as you can only pass a url key and the bucket will work just fine and not change the file name. For example you can use like the following :

const storage = new GridFsStorage({ url : mongoURI})

Next lets set up our frontend with a template engine and configure express to render the template.

Creating the view

Create a new folder named views in the root of the folder, and inside it create a file named index.ejs. Here we will store our front end view. I will not bore you guys will the HTML creation and just post the code for it. I am using bootstrap for fast prototyping.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Mongo File Upload</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 m-auto">
                <h1 class="my-4">Lets upload some stuff</h1>
                <form action="/upload" method="post" enctype="multipart/form-data">
                    <div class="custom-file mb-3">
                        <input type="file" class="custom-file-input" name="file" id="file1" onchange="readSingleFile(this.files)">
                        <label class="custom-file-label" for="file1" id="file-label">Choose file</label>
                    </div>
                    <input type="submit" value="Submit" class="btn btn-primary btn-block">
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function readSingleFile(e) {
            const name = e[0].name;
            document.getElementById("file-label").textContent = name;
        }
    </script>
</body>

</html>

Setting up the express app to render the view. Set up the view engine middleware to ejs

....
app.use(express.json());
app.set("view engine", "ejs");
....

app.get("/", (req, res) => {
 res.render("index")
})

Then start the server again, go to the browser and open http://localhost:5001, and you should see one page rendered with the view we just created.

Create Request to handle the form submit and upload the file

app.post("/upload", upload.single("file"), (req, res) => {
  res.redirect("/");
});

As we already did most of our heavy lifting while creating a storage bucket and multer take cares of the rest. We just need to pass the middleware and then just redirect to the same url.

The tricky part is to download or in this case stream the data from the GridFS storage bucket and render the image, for that we will create a route for showing an image that will take the name of the file as an argument or passed as a route param.

app.get("/image/:filename", (req, res) => {
  // console.log('id', req.params.id)
  const file = gfs
    .find({
      filename: req.params.filename
    })
    .toArray((err, files) => {
      if (!files || files.length === 0) {
        return res.status(404).json({
          err: "no files exist"
        });
      }
      gfs.openDownloadStreamByName(req.params.filename).pipe(res);
    });
});

On the gridfs bucket we get access to many methods one such is find, which is very similar to normal find in MongoDB and accepts a filename as a first argument and then we are converting the result to an array and check if there is any file with such filename and if there is we use another method which is present on the gridfs bucket called openDownloadStreamByName which then again takes the filename and then we use the pipe to return the response to the client.

Now up until now, we can get the image with the above route but no way to render it on our view, so let's create a method inside the route where we were rending our index.ejs page.

....
app.get("/", (req, res) => {
  if(!gfs) {
    console.log("some error occured, check connection to db");
    res.send("some error occured, check connection to db");
    process.exit(0);
  }
  gfs.find().toArray((err, files) => {
    // check if files
    if (!files || files.length === 0) {
      return res.render("index", {
        files: false
      });
    } else {
      const f = files
        .map(file => {
          if (
            file.contentType === "image/png" ||
            file.contentType === "image/jpeg"
          ) {
            file.isImage = true;
          } else {
            file.isImage = false;
          }
          return file;
        })
        .sort((a, b) => {
          return (
            new Date(b["uploadDate"]).getTime() -
            new Date(a["uploadDate"]).getTime()
          );
        });

      return res.render("index", {
        files: f
      });
    }
  });
});
....

Here you can see a lot of optional code like the sorting of the array and you can skip those.

Now, On the template, we loop over the files sent and then show the images below the form. We will only render the files which are of type jpg or png, that check can be upgraded by using a regex and depends on the personal preference.

        <hr>
                <% if(files) { %>
                <% files.forEach(function(file) {%>
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="card-title">
                                <%= file.filename %>
                        </div>
                    </div>
                    <div class="card-body">
                        <% if (file.isImage) { %>
                    <img src="image/<%= file.filename %>" width="250" alt="" class="img-responsive">
                        <%} else { %>
                        <p><% file.filename %></p>
                        <% } %>
                    </div>
                    <div class="card-footer">
                        <form action="/files/del/<%= file._id %>" method="post">
                            <button type="submit" class="btn btn-danger">Remove</button>
                        </form>
                    </div>
                </div>
                <%}) %>
                <% } else { %>
                <p>No files to show</p>
                <% } %>

You can see there is one remove button on the above code, so let us create one delete route to remove the file from the database.

// files/del/:id
// Delete chunks from the db
app.post("/files/del/:id", (req, res) => {
  gfs.delete(new mongoose.Types.ObjectId(req.params.id), (err, data) => {
    if (err) return res.status(404).json({ err: err.message });
    res.redirect("/");
  });
});

Here we get the id as a string so that needs to be converted into a mongodb objectid and then only the bucket method can delete the file with the corresponding id. I kept things simple by not using the delete HTTP method here you are free to use it if you feel like, a post request just works fine here.

Conclusion

As we can see MongoDB provides a nice solution to store files on the database and can come handy while creating WebApps with less storage facility, but keep in mind you can only store documents up to 16mb.

Give the post a like and star the repo if it helped you.

Explain JavaScript promises Like I'm Five

Shubham Battoo — Sun, 28 Jan 2018 19:37:18 +0000

DEV Community: Shubham Battoo

Side Projects and AI

Side Projects and Me

Side Projects and AI

Whats Next

You don't need dotenv.

Built in support for .env

Loading environment variables with process.loadEnvFile()

Further Reading

Deep Cloning Objects in JavaScript

Let's look at JSON.parse(JSON.stringify(x))

What about spread operator?

Browser Compatibility

Conclusion

You dont need JS for that? 🤯

:target

Details Accordian

Dialog

How to setup your react applications

Tech Stack

Build tools and Linting

Directory Structure

Components

Libs

Store

Utils

Pages or Views

Conclusion

Array Indexing Method

Further Reading

Operator Lookup - Search for JavaScript Operators

Numeric Separators

Support

Further Learning

Uploading Files to MongoDB with GridFS and Multer Using NodeJS

Prerequisites

Setting up a local NodeJS server

Connecting to Database, Initializing GridFsStorage and Creating a Storage

Creating the view

Create Request to handle the form submit and upload the file

Conclusion

Explain JavaScript promises Like I'm Five

Built in support for `.env`

Loading environment variables with `process.loadEnvFile()`