DEV Community: Prathamesh More

How to Create a YouTube Downloader with Node.js and React.js

Prathamesh More — Mon, 05 Jul 2021 11:59:23 +0000

The basic flow of the app:

User will provide a YouTube video link
The backend server will push this video link in the queue to process the download
When the job popped from the queue for processing, the backend emits the event for the client
The client listens to the event and shows appropriate messages
Users will able to download videos from a server

We will use Socket.io for the emitting events and processing and handling jobs will use the Bull package.

Let's begin,

Install required software and packages on your local machine

Software Requirements:

Node.js - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Postman - A collaboration platform for API development.

Require packages:

Backend packages:

npm i typescript express mongoose cors express-validator mongoose morgan socket.io ytdl-core bull dotenv

Frontend packages:

npm i axios js-file-download socket.io-client

Setup Backend:

We will be using the MongoDB database so make sure you install it locally or you can use free cloud service from MongoDB.

Set up Redis database with Upstash:

Upstash is a serverless database for Redis. With servers/instances, you usually pay per hour or at a fixed price. With serverless, you pay-per-request.

This means you're not charged when the database isn't in use. Upstash configures and manages the database for you.

Start by creating an account on Upstash.

Now set up the Redis database instance

Let's initialize TypeScript based Node.js project,



tsc --init
then do
npm init -y

Don't forget to add .env file and its content.

Create a new src directory in the root directory of the project as shown in the above image.

Create a simple server and connect to the local or remote MongoDB database:



import { config } from "dotenv";
config();
import http from "http";
import express, { Request, Response } from "express";
import { Server } from "socket.io";
import mongoose from "mongoose";
import cors from "cors";
import path from "path";
import morgan from "morgan";
import { SocketInit } from "./socket.io";

const app = express();

const server = http.createServer(app);

export const io = new Server(server, {
  cors: { origin: "*" },
});

new SocketInit(io);

mongoose
  .connect(process.env.MONGO_DB, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Connected to database");
  })
  .catch((error) => {
    throw error;
  });

app.use(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

app.get("/", (req: Request, res: Response) => {
  res.status(200).send('ok')
});

server.listen(3000, () => {
  console.log("Server running up 3000");
});

Now, create a mongoose model for store video metadata, this file will reside in src/models.



import mongoose from "mongoose";

export interface VideoDoc extends mongoose.Document {
  title: string;
  file: string;
  thumbnail: string;
}

const videoSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
    },
    file: {
      type: String,
      required: true,
    },
    thumbnail: {
      type: String,
    },
  },
  { timestamps: true }
);

export const Video = mongoose.model<VideoDoc>("video", videoSchema);

REST APIs



REST APIs Routes
1. GET => /api/donwloads => Get all downloads
2. GET => /api/donwloads/:id => Get a single download
3. POST => /api/downloads => Push new download
4. DELETE => /api/downloads/:id => Remove a single download
5. GET => /api/downloads/:id/downloadfile => Download a single file

Let's implement controllers and routes for APIs,



import express, { Request, Response, NextFunction } from "express";
import fs from "fs/promises";
import { Video } from "../models/video";
const downloadsRouter = express.Router();

downloadsRouter.get(
  "/api/downloads",
  async (req: Request, res: Response, next: NextFunction) => {
    const videos = await Video.find().sort({ createdAt: -1 });
    res.status(200).send(videos);
  }
);

downloadsRouter.get(
  "/api/downloads/:id/downloadfile",
  async (req: Request, res: Response, next: NextFunction) => {
    const { id } = req.params;
    const video = await Video.findById(id);

    if (!video) {
      res.status(404).send("Video not found");
    }
    const { file } = video;

    res.status(200).download(file);
  }
);

downloadsRouter.post(
  "/api/downloads",
  body("youtubeUrl").isURL(),
  async (req: Request, res: Response, next: NextFunction) => {
    //Will implement
  }
);

downloadsRouter.delete(
  "/api/downloads/:id",
  async (req: Request, res: Response, next: NextFunction) => {
    const { id } = req.params;

    const video = await Video.findByIdAndDelete(id);

    if (video) {
      await fs.unlink(video.file!);
    }
    res.status(200).send(video);
  }
);

export { downloadsRouter };

Now here comes the most important task,

This is section will implement a download queue using Bull Queue.

However every queue instance will require new Redis connections.

This queue will process all downloads one by one.

On each job process, we are emitting events for the client.



import Bull from "bull";
import ytdl from "ytdl-core";
import fs from "fs";
import { Video } from "../models/video";
import { Events } from "../utils";
import { SocketInit } from "../socket.io";

const downloadQueue = new Bull("download queue", {
  redis: {
    host: process.env.REDIS_HOST!,
    port: parseInt(process.env.REDIS_PORT!),
    password: process.env.REDIS_PASSWORD
  },
});

downloadQueue.process((job, done) => {
  return new Promise(async (resolve, reject) => {
    const { youtubeUrl } = job.data;

    //Get singleton instance
    const socket = SocketInit.getInstance();

    const info = await ytdl.getBasicInfo(youtubeUrl);

    console.log(info.videoDetails.thumbnails[0].url);

    const thumbnail = info.videoDetails.thumbnails[0].url;

    //Appending some randome string at the end of file name so it should be unique while storing on server's disk
    const title =
      info.videoDetails.title +
      " by " +
      info.videoDetails.author.name +
      "-" +
      new Date().getTime().toString();

    ytdl(youtubeUrl)
      .pipe(fs.createWriteStream(`${process.cwd()}/downloads/${title}.mp4`))
      .on("finish", async () => {
        socket.publishEvent(Events.VIDEO_DOWNLOADED, title);

        const file = `${process.cwd()}/downloads/${title}.mp4`;

        const video = new Video({
          title,
          file,
          thumbnail,
        });

        await video.save();

        done();

        resolve({ title });
      })
      .on("ready", () => {
        socket.publishEvent(Events.VIDEO_STARTED, title);
      })
      .on("error", (error) => {
        socket.publishEvent(Events.VIDEO_ERROR, error);
        done(error);
        reject(error);
      });
  });
});

export { downloadQueue };



export enum Events {
  VIDEO_DOWNLOADED = "VIDEO_DOWNLOADED",
  VIDEO_STARTED = "VIDEO_STARTED",
  VIDEO_ERROR = "VIDEO_ERROR",
}

Whenever a user tries to download a video, we first push that job i.e. link in download queue.

Then we request for Socket.io instance and video's metadata like title and thumbnail.



//Get existing instance
const socket = SocketInit.getInstance();
const info = await ytdl.getBasicInfo(youtubeUrl);
const thumbnail = info.videoDetails.thumbnails[0].url;

Using ytdl package, we start downloading the file and storing it in a directory called downloads in the root of the project.

When the download starts we emit event VIDEO_STARTED with a title as data.

When the download completes we emit event VIDEO_DOWNLOADED.

When the download gets failed due to some reason like private video or copyright content, we emit event VIDEO_ERROR.

Now import this queue module in the controller, also we added some validation on the request body.



import express, { Request, Response, NextFunction } from "express";
import fs from "fs/promises";
import { body, validationResult } from "express-validator";
import { downloadQueue } from "../queues/download-queue";
import { Video } from "../models/video";
const downloadsRouter = express.Router();

downloadsRouter.get(
  "/api/downloads",
  async (req: Request, res: Response, next: NextFunction) => {
    const videos = await Video.find().sort({ createdAt: -1 });
    res.status(200).send(videos);
  }
);

downloadsRouter.get(
  "/api/downloads/:id/downloadfile",
  async (req: Request, res: Response, next: NextFunction) => {
    const { id } = req.params;
    const video = await Video.findById(id);

    if (!video) {
      res.status(404).send("Video not found");
    }
    const { file } = video;

    res.status(200).download(file);
  }
);

downloadsRouter.post(
  "/api/downloads",
  body("youtubeUrl").isURL(),
  async (req: Request, res: Response, next: NextFunction) => {
    try {
      const errors = validationResult(req);
      if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
      }
      const { youtubeUrl } = req.body;
      await downloadQueue.add({ youtubeUrl });
      res.status(200).send("Downloading");
    } catch (error) {
      throw error;
    }
  }
);

downloadsRouter.delete(
  "/api/downloads/:id",
  async (req: Request, res: Response, next: NextFunction) => {
    const { id } = req.params;

    const video = await Video.findByIdAndDelete(id);


    if (video) {
      await fs.unlink(video.file!);
    }
    res.status(200).send(video);
  }
);

export { downloadsRouter };

Finally we can add this controller in server.ts file,



import { config } from "dotenv";
config();
import http from "http";
import express, { Request, Response } from "express";
import { Server } from "socket.io";
import mongoose from "mongoose";
import cors from "cors";
import path from "path";
import morgan from "morgan";
import { SocketInit } from "./socket.io";
import { downloadsRouter } from "./routes/downloads";

const app = express();

const server = http.createServer(app);

export const io = new Server(server, {
  cors: { origin: "*" },
});

new SocketInit(io);

mongoose
  .connect(process.env.MONGO_DB, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Connected to database");
  })
  .catch((error) => {
    throw error;
  });

app.use(morgan("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.set("view engine", "ejs");
app.use(express.static(path.join(__dirname, "views")));
app.use(cors());
app.use(downloadsRouter);

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

server.listen(3000, () => {
  console.log("Server running up 3000");
});

Finally, change scripts in package.json



"scripts": {   
   "start": "ts-node src/server.ts",
   "dev": "ts-node-dev src/server.ts"
}

Now test with Postman,

POST => /api/downloads

GET => /api/downloads

Setup Frontend:

Create boilerplate code for React by running the following command:

npx create-react-app fronend && cd frontend

The folder structure looks like after running the command,

Then we just added Components directory, we have there three components

Now add Bootstrap for UI:

Design basic nav bar:



import React from "react";

export default function Navbar() {
  return (
    <header class="pb-3 mb-4 border-bottom">
      <a
        href="/"
        class="d-flex align-items-center text-dark text-decoration-none"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="50"
          height="50"
          fill="currentColor"
          class="bi bi-youtube"
          viewBox="0 0 16 16"
        >
          <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z" />
        </svg>
        <span className="fs-4">YouTube Downloader</span>
      </a>
    </header>
  );
}

Now integrate all download APIs in Home.js component,

Here we making connection with server using socketio-client for events and aslo making HTTP request for data.



import React, { useEffect, useState } from "react";
import axios from "axios";
import toast, { Toaster } from "react-hot-toast";
import { io } from "socket.io-client";
import Videos from "./Videos";

const notify = (msg, { success }) => {
  if (success) {
    return toast.success(msg);
  }
  return toast.error(msg);
};

const socket = io("http://localhost:3000/");

export default function Home() {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    socket.on("VIDEO_DOWNLOADED", (data) => {
      notify(`${data} Downloaded`, { success: true });
      window.location.reload();
    });

    socket.on("VIDEO_STARTED", (data) => {
      notify(`Download Started ${data}`, { success: true });
    });

    axios
      .get("http://localhost:3000/api/downloads")
      .then((res) => {
        setVideos(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const downloadVideo = (event) => {
    event.preventDefault();

    const youtubeUrl = event.target.elements.youtubeUrl.value;

    axios
      .post("http://localhost:3000/api/downloads", { youtubeUrl })
      .then((res) => {
        notify("Fetching video details...", { success: true });
      })
      .catch((error) => {
        notify("Something went wrong", { success: false });
      });
  };

  return (
    <div>
      <div class="p-5 mb-4 bg-light rounded-3">
        <div class="container-fluid py-5">
          <h1 class="display-5 fw-bold">
            Download your favorite Youtube videos
          </h1>
        </div>
        <form onSubmit={downloadVideo}>
          <div>
            <label for="youtubeUrl" class="form-label">
              Enter link
            </label>
            <input type="url" id="youtubeUrl" class="form-control" required />
            <div id="urlHelpBlock" class="form-text">
              E.g. https://www.youtube.com/watch?v=PCicKydX5GE
            </div>
            <br />
            <button type="submit" class="btn btn-primary btn-lg">
              Download
            </button>
            <Toaster />
          </div>
        </form>
      </div>
      <h3>Downloaded videos</h3>
      <div style={{ margin: 10 }} className="row">
        {videos.map((video) => {
          return <Videos video={video} />;
        })}
      </div>
    </div>
  );
}

Now let's implement Video.js component to render each single video and related operation,



import axios from "axios";
import React from "react";
const FileDownload = require("js-file-download");

export default function VideoDownloader(props) {
  console.log(props);
  const { video } = props;
  const { _id, title, thumbnail } = video;

  const downloadVideo = async (event) => {
    const videoId = event.target.id;
    const filename = event.target.title;
    console.log(filename);
    axios
      .get("http://localhost:3000/api/downloads/" + videoId + "/downloadfile", {
        responseType: "blob",
      })
      .then((response) => {
        FileDownload(response.data, `${filename}.mp4`);
      });
  };

  const removeVideo = async (event) => {
    const videoId = event.target.title;
    axios
      .delete("http://localhost:3000/api/downloads/" + videoId)
      .then((respsonse) => {
        window.location.reload();
      });
  };

  return (
    <div className="card" style={{ width: "18rem" }}>
      <img src={thumbnail} class="card-img-top" alt="thumbnail" />
      <div className="card-body">
        <h6 className="card-text">{title}</h6>
        <button
          id={_id}
          className="btn btn-success rounded"
          style={{ width: "100px" }}
          onClick={downloadVideo}
          title={title}
        >
          Download
        </button>
        <button
          title={_id}
          className="btn btn-danger rounded"
          onClick={removeVideo}
        >
          Delete
        </button>
      </div>
    </div>
  );
}

Now let's run both frontend and backend code,

Backend will run on 3000 port => npm run dev

Frontend will run on 3001 port => npm start

Source Code

Check out Upstash for production.

Introduction to Redis and Caching with Node.js

Prathamesh More — Mon, 22 Mar 2021 15:00:52 +0000

What is Redis?

Redis is an open-source, in-memory data structure store, used as a NoSQL database for the cache to improve the overall response rate for most frequently requested data.

In this blog, we will develop Notes Taking App API, We will implement two feature,

Take a note from the user.
Return a note back to the user.

But here will use Redis, to cache note. If the user requests the same note frequently, we will return notes stored in Redis.

REST API Routes

POST => /api/notes => Create notes
GET  => /api/notes/:id => Get a note

Software Requirements

Let's begin,
Install the required packages on your local machine:

npm install express body-parser mongoose redis --save

Set up Redis database with Upstash,

Upstash is a serverless database for Redis, with servers/instances, you pay-per-hour or a fixed price. With Serverless, you pay per-request.

This means you're not charged when the database isn't in use. Upstash configures and manages the database for you.

Let's start with creating an account on Upstash,

https://upstash.com/

Now set up database instance,

Create a simple server and connect to the MongoDB database:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const redis = require('redis');

const app = express();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/', {
    dbName: 'notes',
    useNewUrlParser: true,
    useUnifiedTopology: true
}, err => err ? console.log(err) : console.log('Connected to database'));


app.listen(3000, () => console.log('Server running at port 3000'));

Now connect to the Redis server using the configuration provided by Upstash:

//Redis connection
const redis = require("redis");
var client = redis.createClient({
  host: "eu1-capital-cattle-31290.upstash.io",
  port: "31290",
  password: "YOUR_REDIS_PASSWORD",
});
client.on("error", function (err) {
  throw err;
});

Mongoose Model:

//Mongoose Model
const NoteSchema = new mongoose.Schema({
  title: String,
  note: String,
});
const note = mongoose.model("Note", NoteSchema);

Now implement routes for API

Get a note from the user and store it Redis and MongoDB:

//Create notes
app.post("/api/notes", (req, res, next) => {
  const { title, note } = req.body;
  const _note = new Note({
    title: title,
    note: note,
  });
  _note.save((err, note) => {
    if (err) {
      return res.status(404).json(err);
    }
    //Store in Redis
    client.setex(note.id, 60, JSON.stringify(note), (err, reply) => {
      if (err) {
        console.log(err);
      }
      console.log(reply);
    });
    return res.status(201).json({
      message: "Note has been saved",
      note: note,
    });
  });
});

Take look here in the code, we used a method setex to store data in Redis.

This method takes 4 parameters

id : Unique ID must be provided to store data. It must be a string.
seconds : Expiry time in seconds as a number.
value : Actual data to store in Redis. It must be a string. So we are serializing object into string .
callback : Callback takes two parameters err and reply.

Create a note

Now retrieve data, first, we have to check in Redis for data, if data is not available in Redis then we have to make a query in the database.

For that, we have to write middleware that checks the requested data in Redis.

Middleware:

const isCached = (req, res, next) => {
  const { id } = req.params;
  //First check in Redis
  client.get(id, (err, data) => {
    if (err) {
      console.log(err);
    }
    if (data) {
      const reponse = JSON.parse(data);
      return res.status(200).json(reponse);
    }
    next();
  });
};

In the above middleware, we used get() method to retrieve existing data from Redis. get(id, callback()).

Here we parsed string back to the object.

Now use this middleware on get request:

app.get("/api/notes/:id", isCached, (req, res, next) => {
  const { id } = req.params;
  Note.findById(id, (err, note) => {
    if (err) {
      return res.status(404).json(err);
    }
    return res.status(200).json({
      note: note,
    });
  });
});

First time retrieves data. It took 11ms

Next, we retried to get data, It took 5ms

Code

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const redis = require('redis');

const app = express();

app.use(bodyParser.json());

//Redis connection
var client = redis.createClient({
  host: "eu1-capital-cattle-31290.upstash.io",
  port: "31290",
  password: "YOUR_REDIS_PASSWORD",
});
client.on("error", function (err) {
  throw err;
});

//MongoDB connection
mongoose.connect('mongodb://localhost:27017/', {
    dbName: 'notes',
    useNewUrlParser: true,
    useUnifiedTopology: true
}, err => err ? console.log(err) : console.log('Connected to database'));

//Mongoose Model
const NoteSchema = new mongoose.Schema({
    title: String,
    note: String
});

const Note = mongoose.model('Note', NoteSchema);

//Create notes
app.post('/api/notes', (req, res, next) => {

    const { title, note } = req.body;

    const _note = new Note({
        title: title,
        note: note
    });

    _note.save((err, note) => {
        if (err) {
            return res.status(404).json(err);
        }

        //Store in Redis
        client.setex(note.id, 60, JSON.stringify(note), (err, reply) => {
            if (err) {
                console.log(err);
            }
            console.log(reply);
        });

        return res.status(201).json({
            message: 'Note has been saved',
            note: note
        });
    })

});

const isCached = (req, res, next) => {

    const { id } = req.params;

    //First check in Redis
    client.get(id, (err, data) => {
        if (err) {
            console.log(err);
        }
        if (data) {
            const reponse = JSON.parse(data);
            return res.status(200).json(reponse);
        }
        next();
    });
}

app.get('/api/notes/:id', isCached, (req, res, next) => {

    const { id } = req.params;

    Note.findById(id, (err, note) => {
        if (err) {
            return res.status(404).json(err);
        }
        return res.status(200).json({
            note: note
        });
    });
});

app.listen(3000, () => console.log('Server running at port 3000'));

Check out Upstash for production: https://upstash.com/

How I can extract words from strings using regular expressions?

Prathamesh More — Tue, 24 Nov 2020 09:11:43 +0000

I have searched on the internet but I don't get any solution. I just confused.

I have this string

("type": "Person" AND ("specialFields.email": "prathameshmore@gmail.com" OR "specialFields.address": "Jaysingpur"))

How can I extract data from like this

[
  '(',
  '"type": "Person"',
  'AND',
  '(',
  '"specialFields.email": "prathameshmore@gmail"',
  'OR',
  '"specialFields.address": "Jaysingpur"',
  ')',
  ')'
]

Please anyone can help with it.

Implement Protected Routes in React.js

Prathamesh More — Sun, 16 Aug 2020 17:06:07 +0000

We are going to start our project as always using npx create-react-app protected-routes.

Install react-router-dom for routing functionality:

npm i react-router-dom

Now, we will remove the boilerplate code from App.js and create basic routes in our App.js file as following.

As you can see above in code, we created / and /secret, public, and secret routes respectively.

But /secret route still accessible to anyone i.e unauthorized user, Now we have to protect this route.

Now we will create a state hook to hold login status and function to change state in memory.

Basically we will do this in App.js to keep all things simple.

Next, create a generalized component that will accept props as authentication status, the path of the component to be rendered, log out function reference, and actual component to render.

In the above code, we destructing props, which are important for our functionality and return <Route /> component as per authentication status. If the user is not logged in we will redirect to the homepage.

Now create Secret.js for secret component i.e page and import with withRouter(Component)

Updated App.js at the end.

Here, we created a state and some useful functions for authentication.


import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
  Link,
} from "react-router-dom";

import ProtectedRoute from "./ProtectedRoute";
import Secret from "./Secret";

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact>
            {isAuthenticated ? (
              <Redirect to="/secret" />
            ) : (
              <div>
                <h1>Homepage</h1>
                <Link to="/secret">Go to secret</Link>
                <br></br>
                <button onClick={login}>Log in</button>
              </div>
            )}
          </Route>
          <ProtectedRoute
            isAuthenticated={isAuthenticated}
            path="/secret"
            logout={logout}
            component={Secret}
          />
          <Route path="*">
            <div>404 Not found </div>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Output:

Source code: https://github.com/pprathameshmore/protected-routes-react

Stay safe!

Looking for an entry-level job as a Backend Developer or Full Stack Web Developer in India and Europe.

http://pprathameshmore.github.io/

👩🏼‍💻 Docker for Beginners - By Beginner 👨🏼‍💻

Prathamesh More — Mon, 15 Jun 2020 04:08:54 +0000

Hello world,

I have been learning Docker 🐳. I wanted to share some basics command to get started as a developer, I hope you know the basics about What is docker, containers or virtualization?

I am using Windows 10 2004 Update 🐱‍👓, this update comes with WSL2. In this tutorial, I am using Ubuntu on WSL2.

Information ℹ

Show all commands



$ docker

Docker version



$ docker version

Show information like number of containers



$ docker info

Containers ⛴

Create and run a container in foreground



docker container run -it -p 80:80 nginx

Create and run a container in background



$ docker container run -d -p 80:80 nginx

Running container

Naming containers



$ docker container run -d -p 80:80 --name nginx-proxy nginx

List running containers



$ docker container ls

List all containers



$ docker container ls -a

Stop container



$ docker container stop [ID]

Stop all containers



$ docker stop $(docker ps -aq)

Remove container (Can't remove running container)



$ docker container rm [ID]

Remove running container



$ docker container rm -f [ID]

Remove multiple containers



$ docker container rm [ID] [ID] [ID]

Remove all containers



$ docker rm $(docker ps -aq)

Images 📸

List the all images we have downloaded



$ docker images

Pull new image from docker hub



$ docker pull [IMAGE_NAME]

Remove image or images



$ docker image rm [IMAGE]
$ docker rmi $(docker images -a -q)

Note: Any suggestion?

Happy coding

Looking for an entry-level job as Backend Developer or Full Stack Web Developer

http://pprathameshmore.github.io/

Private Tuition Management Web app helping students during COVID-19

Prathamesh More — Wed, 20 May 2020 06:50:04 +0000

My Final Project

In this lockdown, I developed a web app for computer tuition organizations. So this organization can move from traditional paper-based registration to digital-based, I build an end to end institute management product. I build an exam system for students. So students can prepare for exams right from home, solving practice exams portal during this lockdown. http://tny.fail/github-tuition-app http://tny.fail/spark

Features:

Admin:

Admin can add new admissions.
Manage admissions, sort by date, or alphabets.
Update existing admission easily.
Print fee receipt, installments in PDF.
View detailed information of a student.
Add new courses.
Manage courses.
Create a question bank for courses.
Create exams for courses.
An exam can be created using adding manual questions or picking random questions from a question bank of that subject.
Each question bank consists of a particular topic of that subject.
Get questions by topic.
Questions details can be updated or changed to other topics of that subject or removed easily with clean card-based UI.
Manage exams like updating, removing.
See the results for a particular exam of the subject.
See scored marks by the student for a particular student.
Each student gets a randomized question list.
Handle user enquires.
Mobile-friendly responsive UI.

Student

Students can see question banks for exam practice.
Students can be an attempt to practice exam which is MCQ based.

Security:

All passwords are hashed.
Every sensitive information like phone number, address, etc. of student encrypted using a 32-bit asymmetric key and stored in the database.
Every critical and sensitive information taking forms are protected against Cross-site Request Forgery (CSRF) attack.

Demo Link

https://spark-classes-app.herokuapp.com/

Link to Code

https://github.com/pprathameshmore/tuition-management-freelance-project

How I built it (what's the stack? did I run into issues or discover something new along the way?)

Frontend: It is server-side rendered pages
HTML5, CSS3, JavaScript - Primary

Other libs:
JQuery, Bootstrap, SweetAlert2, Moment.js

Font scripts:
Font Awesome, Google Font API

Backend:
Programming language
Node.js

Framework:
Express.js

Web server:
Express.js

Database:
MongoDB

Cache:
Redis

Additional Thoughts / Feelings / Stories

I feel proud of this project because this gonna use in real-world helping students.

Build COVID19 SMS Tracker using Twilio + NodeJS

Prathamesh More — Wed, 20 May 2020 06:21:37 +0000

Let’s get started,

Install the required packages

npm install --save express twilio axios

We will be using an external REST API to get COVID19 Cases.

https://api.covid19api.com/

First, get the latest COVID19 cases for India using Axios.


const covidINdata = await axios.get('https://api.covid19api.com/live/country/india/status/confirmed');

const latestData = covidINdata.data;

//API returns an array which contains all snapshots of cases. We will use the latest, which means the last element of the array.

const data = latestData[latestData.length - 1];

//Now configure, Twilio SMS API - Signup for Twilio, and get Account ID and API KEY.

const ACCOUNT_ID = "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
const API_KEY = "your_auth_token";
const client = new twilio(ACCOUNT_ID, API_KEY);
Create body and send SMS,
client.api.messages.create({
        body: data, //This is SMS body, returned from API
        to: 'your_mobile_number',
        from: +12569789527
      }).then(data => {
        return res.status(200).send('SMS has been sent' + data);
      }).catch(error => {
        return res.status(404).send(error);
      });
}

Code:
https://github.com/pprathameshmore/Corona-SMS-Tracker

Answer: How to use sweetalert in nodejs?

Prathamesh More — Wed, 15 Jan 2020 13:41:59 +0000

Jan 11 '20

Here you can do using EJS

var express = require('express');
var router = express.Router();
router.post('/add', function(req, res, next) {
   res.status(201).render('new', { isAdded : true } );
});

In HTML side

<% if (isAdded) { %>
 <script>
  Swal.fire(
     'Good job!',
     'Data saved',
     'success'
 )
</script>
<% } %>

Open Full Answer