DEV Community: Pranjal Jain

atlashackathon22 Hiring Application

Pranjal Jain — Sat, 12 Nov 2022 05:00:00 +0000

What I built

An application for applying for jobs, The portal is for both employers and job applicants. In my portal there can be be status updates on jobs. Where applicants upload all the details like education, experience & certifications. And also employers will be able to check all the applicant details, change status of the applications and much more. There is also a chat feature available which I have used with third party service.

Category Submission

Choose Your Own Adventure
Think Outside the JS Box

App Link

Github Repo

Screenshots

Apart from the screenshot, here is a link to the demo video.
Demo Video

Description

This application is build on Flutter as a native mobile for both android and IOS, the backend for the app is made in ExpressJS with multiple libraries to debug APIs. The UI of the application is very basic as it’s not not prioritised at the moment. And then I created comphrensive APIs for doing multiple database operations.

In express JS, mondodb Package is used, where I am running mongoDB queries like this

MongoClient.connect(uri, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})
    .then((client) => {
        client
            .db('Hirect')
            .collection('Users')
            .find({ email: email, password: password })
            .toArray((err, results) => {
                err && res.status(400).json({ error: err, status: 0 });
                if (results.length != 1)
                    res.status(401).json({ status: 0, message: 'User not found' });
                else res.status(200).json(results);
            });
        return client;
    })
    .catch((error) => {
        res.status(500).json({ status: 'ERROR', err: error });
        console.error(error);
    });

SignUp (Auth.js)

MongoClient.connect(uri, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})
    .then((client) => {
        client
            .db('Hirect')
            .collection('Users')
            .find({ email: email })
            .toArray((err, results) => {
                if (results.length === 1) {
                    res.status(100).json({ status: 0, message: 'Email already found' });
                } else {
                    client
                        .db('Hirect')
                        .collection('Users')
                        .insertOne(data)
                        .then((e) => {
                            res.status(200).json({
                                status: 1,
                                message: 'User Registered',
                                res: { ...e, ...data },
                            });
                        });
                }
            });

        return client;
    })
    .catch((error) => {
        res.status(500).json({ status: 'ERROR', err: error });
        console.error(error);
    });

Here you can see, As I dont want multiple users I first check for user then I move forward with creating one, And here the user is being created with initial fields which are required so that the application does not break.

To update I am using addToSet feature of MongoDB

I learned a lot about CRUD operations of mongoDB and the ton of features I am provided with it.

Updating Jobs (jobs.js)

client
    .db('Hirect')
    .collection('Users')
    .updateOne({ email }, { $addToSet: { jobPosts: { ...jobDetails, jobID } } })
    .then((e) => {
        res
            .status(200)
            .json({ status: 'SUCCESS', res: e, email, jobDetails, jobID });
    });

Link to Source Code

Github Repo

Permissive License

MIT

Background

As I am pursuing masters in computer science, I found that the current portals miss few things, which I tried to incorporate in the application like status update on applications, job posting rating and reviews and few other features. The app has a lot of features which are hard to document is such short time. I would suggest to explore the app and find out for yourself. The best thing about it is There is no need for a previous database. You can just run the backend server. and then run the app and the data will be created then and there. MongoDB Rocks!

How I built it

As it was a very comphrensive application. I created APIs using ExpressJS. There I have used a modular approach where I divided endpoints in multiple modules which had there own multiple function which were in turn performing mongoDB operations.

Atlas hackathon submission (Refactored waffles)

Pranjal Jain — Mon, 27 Dec 2021 11:22:07 +0000

Overview

Hosted at refactoredwaffles.pranjaljain.me
For this project I used Next.js & MongoDB, here both the tools I have used gives a preference to performance, And have made the web application super fast and powerful. In this project I have created Front end using HTML/CSS Components & Backend using JS which can be found in the pages/api directory in the GitHub repo of the application. All the keys were passed as environment variables and the application was deployed on Vercel using the same environment variables.

Submission Category:

E-Commerce Creation

Link to Code

pranjaljain0 / refactored-waffle

Refactored Waffle

Overview

Hosted at refactoredwaffles.pranjaljain.me For this project I used Next.js & MongoDB, here both the tools I have used gives a preference to performance, And have made the web application super fast and powerful. In this project I have created Front end using HTML/CSS Components & Backend using JS which can be found in the pages/api directory in the GitHub repo of the application. All the keys were passed as environment variables and the application was deployed on Vercel using the same environment variables.

Submission Category

E-Commerce Creation

Additional Resources / Info

Pages and links:

Home

Waffle Listing

Individual waffle

The apis which I have created for this project you can check the code for them in the public/api folder. Click here

Also there are multiple components which are created and reused inside the application which you can checkout in the Components folder

…

View on GitHub

Additional Resources / Info

Pages and links:
Home
Waffle Listing
Individual waffle
Contact Us

Also there are multiple components which are created and reused inside the application.

This project is made using Next.js & MongoDB.

Home page

Waffle listing

Individual Waffle page

Search

this search functionality is implemented using MongoDB Atlas search. Where mongoDB created an index to the items present in the collection. And then that helped implementing the search functionality.

Contact Us

Changelog

7th Jan 2022 - Added cart item counter on Nav

Fin

This was the first time when I used all the tools provided by MongoDB. Initially it took me a while to understand all the tools like Triggers, Functions etc. But as soon as i implemented the first one. It was a game changer, Then i realised that it can help in so much of database automation. For example, In this project I used a trigger which was looking for an insertion event on orders collection. As soon as there were insertions on the collection It would run a function which would reduce the quantity of the things which were purchased from the available quantity. And another was to email the receipt as soon as there is a new order. This would reduce a good amount of work on the middleware part. And can be handled more precisely as it has direct contact with the data on MongoDB Realm.

Run creat-react-app with HTTPS

Pranjal Jain — Sun, 27 Jun 2021 13:19:00 +0000

Introduction

In current days we host websites on Vercel and Netlify and we are automatically assigned a generated SSL to provide with Secured connection(HTTPS), but in the development period we are unaware of the process to run it with HTTPS and we miss out on some testing which works only on HTTPS like google apis, etc.

Steps

Configure creat-react-app project to handle https
Generate SSL Certificates for localhost
Add certificates to the project
Trust certificate in browser
Run the project secured

Configure creat-react-app project to handle https

Add a file .env in the root directory of the project with the line

HTTPS=true

Generate SSL Certificates for localhost

Follow this article to generate a SSL certificate for localhost. and place the certificates in the root directory.

Generate an SSL Certificate With the Root Certificate for localhost

Pranjal Jain ・ Jun 24 '21

#security #webdev #webassembly

after following this article you must have 8 new files in your directory, which are

rootCA.key
rootCA.pem
rootCA.srl
server.crt
server.csr
server.csr.cnf
server.key
v3.ext

Add certificates to the project

in the .env file add these two properties and there paths.

SSL_CRT_FILE=server.crt
SSL_KEY_FILE=server.key

Here you will be using the server.crt as your certificate file & server.key as your key for certificate.

Trust certificate in browser

Follow this article to trust the certificate on your browser

Run the project secured

Hence you have HTTPS enabled for your project.

If you're stuck anywhere do leave a comment.

Follow me on Twitter at Twitter/pranjaljain0
Follow me on Github at github/pranjaljain0

Happy Hacking!

Generate an SSL Certificate With the Root Certificate for localhost

Pranjal Jain — Thu, 24 Jun 2021 21:02:08 +0000

The root certificate is trusted now. Let’s issue an SSL certificate to support our local domains — myexample.com, sub.myexample.com, myexample1.com, and localhost for testing.

Create a new OpenSSL configuration file server.csr.cnf so the configurations details can be used while generating the certificate.

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C=IN
ST=MP
L=INDORE
O=Tech Forum
OU=Marketing
emailAddress=admin@pranjaljain.me
CN = localhost

Create a v3.ext file with a list of local SAN domains:

authorityKeyIdentifier=keyid,issuer
basicConstraints=CA:FALSE
keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
subjectAltName = @alt_names
[alt_names]
DNS.1 = localhost

Create a private key and certificate-signing request (CSR) for the localhost certificate.

openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config server.csr.cnf

This private key is stored on server.key.
Let’s issue a certificate via the root SSL certificate and the CSR created earlier.

openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext

When it says Enter passphrase for rootCA.key, enter the passphrase used while generating the root key.
The output certificate is stored in a file called server.crt.

If you're stuck anywhere do leave a comment.

Follow me on Twitter at Twitter/pranjaljain0
Follow me on Github at github/pranjaljain0

Happy Hacking!

Priority loading in Reactjs

Pranjal Jain — Sat, 13 Feb 2021 20:01:13 +0000

When we start to create applications, We don't realize the importance of priority loading. But as we start to push out production applications, then the importance of priority loading is understood.

So what is priority loading?

In simple words...
When we want some components of our application to load before other components to reduce the initial loading time.
So when we create a react application. we often use a lot of external libraries for multiple applications. And oftentimes we overlook the size those libraries added to our application.

** But how do we find the size of those libraries? **
For this purpose, we have a very simple tool which is known as Bundlephobia
Bundlephobia is an amazing tool that helps us to determine the complete size of our package, Not only that it has a filter to show us which package is taking the most time to load. What makes it even more amazing is that we just need to upload our package.json file to get the results.

For example...
In my portfolio website pranjaljain.tech

Here you can see I have 16 packages in my Application.
And the package which takes the most time is react-particle-js.

upon scrolling down you can see the total of how much time your complete package will if it tries to load your application on emerging 3G.

Now the main question is how to prioritize packages?

Well that can be easily achieved by Loadable components
Read more on their GitHub.

gregberge / loadable-components

The recommended Code Splitting library for React ✂️✨

So by using Loadable components we can select the packages which we want to load after the content is loaded.

Let's get started

First thing first...
Import Loadable Component to your React JS where you want to prioritize loading.



import loadable from "@loadable/component";

And then add your component which you want to load after the content.



const ComponentName = loadable(() => import("./ComponentJsFileLocation"));

And then use that component normally like any other React Component.

And it would make the component load after the content.

If you're stuck anywhere do leave a comment.
Follow me on Twitter at Twitter/pranjaljain0
Follow me on Github at github/pranjaljain0
Happy Hacking!

My Portfolio 🤵

Pranjal Jain — Tue, 02 Feb 2021 15:50:18 +0000

Hello fellow devs and creators🙋‍♂️
Hello everyone! This is my portfolio which was made a few months ago.
I used React JS ⚙ & SCSS 🎨

Why am I sharing this🤔:

The purpose of this post is to get some feedback, as I am a beginner in the front-end (web-dev) environment!
Let me know what you guys think and what can be improved📈!

pranjaljain.tech

pranjaljain0 / portfolio-react

A portfolio website built with react js

The FizzBuzz problem

Pranjal Jain — Fri, 29 Jan 2021 08:06:39 +0000

There is a very popular problem around the space known as the FizzBuzz problem. In this problem what we have to do is we have to loop through 1 to n. and wherever we encounter an integer divisible by 3 we need to print Fizz, And whenever we encounter an integer divisible by 5 we need to print Buzz & and “FizzBuzz” if an integer is divisible by both 3 and 5. FizzBuzz is a very simple programming task, used in software developer job interviews, to determine whether the job candidate can actually write code. It was invented by Imran Ghory, and popularized by Jeff Atwood.

So what makes it a good problem...

That is if the programmer writes

def FizzBuzz():
    for i in range(1, 100):
        if i == 0:
            continue
        elif i % 15 == 0:
            print('FizzBuzz')
        elif i % 5 == 0:
            print('Buzz')
        elif i % 3 == 0:
            print('Fizz')
        else:
            print(i)

This does the job of printing the solution. But here is a catch...

The Modulo operator (%) is a heavy operator & works in a different way. if we are saying i % 15 it will denote it as i % 5 && i % 3. Hence, if we are performing i % 15 in the FizzBuzz program we are performing the i % 5 operation twice.

So to deal with this some programmers approach this problem in a different way.

Their approach is

def FizzBuzz():
    f = False
    d = ""
    for i in range(1, 10000):
        if i % 3 == 0:
            d += 'Fizz'
            f = True
        if i % 5 == 0:
            d += 'Buzz'
            f = True
        if f != True:
            print(i)
        else:
            print(d)
            d = ""
            f = False

Here they only check for i % 3 & i % 5 only once and add the string 'Fizz' & 'Buzz' to an empty string. And at the end, it just prints either the number or the final string.

This approach reduces the processing time, but it does increase memory consumption.

The final approach which is rare is...

def FizzBuzz():
    c3 = 0
    c5 = 0
    d = ""
    b = False
    for num in range(1, 10000):
        c3 += 1
        c5 += 1
        if c3 == 3:
            d += "fizz"
            c3 = 0
            b = True
        if c5 == 5:
            d += "buzz"
            c5 = 0
            b = True
        if b == True:
            print(d)
            d = ""
            b = False
        else:
            print(num)

Here in this approach, there are no (%) Modulo operators being used. hence it reduces the processing time of the code.

Testing

To test this theory I implemented the Pythons time function, and to my surprise. there was a drastic time difference between the first and the last code.

the timing results are as follows...

For 100 entries

First Version 0.0005862250000000027
Second Version 0.0002485049999999961
Third Version 0.001852885999999998

For 10000 entries

First Version 0.117162348
Second Version 0.188121156
Third Version 0.401831502

If you're stuck anywhere do leave a comment.
Follow me on Twitter at Twitter/pranjaljain0
Follow me on Github at github/pranjaljain0

Go to this gist for a complete code

Happy Hacking!

VPNs & How to make one?

Pranjal Jain — Wed, 13 Jan 2021 17:02:52 +0000

We have all heard the term VPN in our lives. Especially when we are living in the technology-rich era. But let me tell you how little we are aware of this sector of technology that, In a way, rip our privacy apart.

We all are aware of the big conglomerates create a log of every action we are taking while we surf their platform, And this is a big problem. In the current time, When we hear about privacy being a top priority of a user on the internet, We hear about people/corporations eavesdrop on the digital communication of their users. And to prevent these we switch to multiple solutions like Tor & VPNs.

If we talk about Tor, It is indeed a good solution to the previously discussed problem, Tor is free and open-source, And it is enabling anonymous communication by directing Internet traffic through a free, worldwide, volunteer overlay network. It does sound like tor can be a reliable solution to our problem. But there is a catch, Tor does provide a good cover on the internet, But the speed we get on Tor is comparatively very low, Hence making it less reliable.

Now, If we talk about VPNs, They are also a good solution to our problem, And they do provide good surfing speed, If we compare it to Tor. But then what is the problem here? So the problem here is Log. Almost all of the VPN services create a log of network traffic for individual, which directly contrasts to privacy. And that's not all, These logs are often shared with the Personalised advertisement providers to strengthen the user profile, And fill them with ads.

According to this article on pcmag

Seven VPN services that claim to never log user traffic have been found doing just that—and they leak that information on the internet, according to security researchers at vpnMentor.

(Credit: vpnMentor)

Each of the affected providers also claims to offer “no-log” VPN services, meaning detailed user traffic is supposedly never recorded. However, the exposed server indicates this was far from the truth. “In some cases, illicit sites were accessed from countries where viewing such content is an illegal and punishable activity,” vpnMentor said.

After all these, One thing is sure that, VPNs for different providers cannot be trusted.

So what do we do now?

Isn't it a great idea to create our own VPN?

won't we need expensive servers at multiple locations?
How about we give it a try and then come to some conclusions...

First step

As always the prerequisite

A Laptop
An Internet Connection
A Linode Account

That is indeed a tiny list.

Head over to Linode

Open the dashboard and click the "Add a Linode" Button to create a server.

While configuring the server
Keep in Mind

OS - Ubuntu 20.10
Region - Where you want your VPN to be located. I went with Newark, NJ
Linode plan - Nanode 1GB
Add a label to make it unique Mine was Wolfpack
Add a root password
Lastly enable the Private IP checkbox
And now just click create

Now if you look at the price, 5$/month not that expensive.

Once your Linode has booted up, Check your configuration

Copy the command to connect to the server
which would be like ssh root@xx.xx.xx.xx

And after copying this paste it to your terminal if you're on macOS or use putty if you're using windows.
Here I am using macOS to demonstrate.
After entering the SSH connect command the terminal would ask

The authenticity of host 'xx.xx.xx.xx (xx.xx.xx.xx)' can't be established. ECDSA key fingerprint is SHA256:bSw0bqbSw0bqbSw0bqbSw0bqkj4/OZ3OZ3dP+/e2e2M. Are you sure you want to continue connecting (yes/no/[fingerprint])?

Type 'Yes' and press enter/return

And after writing yes you will see root@localhost:~# in the terminal that means you're connected to the server.

Update

The first thing is to update the services and applications on the server. We can do that by using

apt-get update && apt-get upgrade -y

After the OS is updated. We can move to the next step which is setting up a new non-root user so that the server is secured.

We can do that by executing

useradd -G sudo -m wolf -s /bin/bash

And we can set a password using the command

passwd wolf

After typing the password twice, Your new user will be added.
Now open a new terminal to test your new user, Without closing the previous terminal window.
In the new terminal, Type

ssh wolf@xx.xx.xx.xx

Now it will ask for the password so enter the password which was set for the new non-root user(wolf).

And you should be connected to the server with the new user.
Don't yet disconnect the previous terminal window as it is logged in using the root user so if we face any problem we can use the previous terminal window to make changes.

Use your non-root user terminal as a default terminal, for now, keep the root terminal as a backup.

Now we will configure SSH to disable root login

In your terminal type to edit your SSH configuration file

sudo nano /etc/ssh/sshd_config

In the file look for #Port 22 and change it to Port 69
What this will do is, It will be hidden from the SSH scanners, Although it will enough for security.
Remember to remove the '#'

Now look for PermitRootLogin yes and change it to PermitRootLogin no

Now no one can log in to the server as the Root user, But using sudo Root privileges can be provided.

Installing OpenVPN

If we talk about this step
This could be a very long step
But This script makes the whole step very simple.

Nyr / openvpn-install

OpenVPN road warrior installer for Ubuntu, Debian, AlmaLinux, Rocky Linux, CentOS and Fedora

With this command, we download the script

wget https://git.io/vpn -O openvpn-install.sh

And we have the file openvpn-install.sh downloaded
And by running

sudo bash openvpn-install.sh

After running this command you will need to enter your password

And then you need to answer these question

Which IPv4 address should be used?
     1) 50.116.58.32
     2) 192.168.152.198
IPv4 address [1]: 1

Which protocol should OpenVPN use?
   1) UDP (recommended)
   2) TCP
Protocol [1]: 1

What port should OpenVPN listen to?
Port [1194]: 

Select a DNS server for the clients:
   1) Current system resolvers
   2) Google
   3) 1.1.1.1
   4) OpenDNS
   5) Quad9
   6) AdGuard
DNS server [1]: 3

Enter a name for the first client:
Name [client]: WolfpackVPN

OpenVPN installation is ready to begin.

And congratulations

The client configuration is available in: /root/WolfpackVPN.ovpn

Just remember to keep the answer choices similar, You can change the Name for the first client. And set the DNS you want.

Now we move the file from the root directory to the main directory with the command.

sudo mv /root/WolfpackVPN.ovpn .

now we need to download the WolfpackVPN.ovpn file to our machine. We can do this by using sftp service.

Open a new terminal and type

sftp wolf@xx.xx.xx.xx

After entering your password you will be connected to the sftp server. Now with this command, you will get the file on your macOS.

get WolfpackVPN.ovpn

Once you've downloaded the file on your macOS. Download Tunnelblick on mac from Tunnelblick
Set it up

You will find the file with the Tunnelblick symbol

And on importing it to Tunnelblick and then connecting to it you will see this window.

Viola! You're connected to your OWN VPN server.

And doing a quick speed test...

We can see that we are getting a decent speed of 21 Mbps Download and 24 Mbps Upload & we can see we are connected to Server(s) New York, US | Newark, US
Hence our VPN Works with a good speed that too at 5$.

If you're stuck anywhere do leave a comment.
Happy Hacking!

Creating a very simple URL Shortner using Express & Firebase.

Pranjal Jain — Wed, 21 Oct 2020 07:31:24 +0000

Often we want to share links to a website to other platforms, But the links are too long.

If I talk about this blog.
The link will be something like...

https://dev.to/pranjaljain0/creating-a-very-simple-url-shortner-using-express...

Which is already occupying 77 characters when it can occupy around 10 characters.

Lets get started

Prerequisit

Nodejs
Firebase Account

Packages

Step 1

Creating a project directory

The first step would be to create a project directory and cd into that directory.

mkdir urlshortner && cd urlshortner

Then we would initialize node.js in the same directory.

npm init

This command prompts you for several things, such as the name and version of your application. For now, you can simply hit RETURN to accept the defaults for all of them.

Now install Express in the project directory and save it in the dependencies list.

npm install express --save

Step 2

creating a basic express application

In the second step, we would start by creating a basic express application.

First, let's create an index.js file in the directory.

touch index.js

And paste the following code into the index.js file.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

This will create a simple express application that will respond to a get request.

We can run and test the application by running node index.js and going to our browser and going to http://localhost:3000/. We should see Hello World! in the browser.

I will be using nodemon to execute the application as nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

Install nodemon with the following command

npm i nodemon

Adding CORS configuration to the application.

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

include cors package to the application

var cors = require("cors");

Also, add these lines to allow headers

app.all("/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

Now the application looks like this...

const express = require('express')
const app = express()
const cors = require("cors");
const port = 3000

app.all("/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

app.get('/', cors(), (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Step 3

Configuring the express application to receive URLs and generate a short version of them

Now we will start to configure the express application to receive URLs and generate a short version of them.

We need to add body-parser to parse POST body

const bodyParser = require("body-parser");

And we need to add these lines to tell the application that the POST body it will be receiving will be in JSON format.

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

We will be using POST request to get the URLs from the user.

The function will be

app.post('/url', cors(), async (req, res) => {
        var URL = req.body.url;
        const host = req.get('host');
        var generatedURL = await generateURL(host, URL)
        if (generatedURL != null)
            res.json(generatedURL)
        else
            res.sendStatus(500)
    });

Here we are getting the URL from the user using req.body.url and storing it in a URL variable and also getting the hostname using req.get('host') Which we are sending both the variables to a function generateURL(host, URL)

The function generateURL() is as follows.

async function generateURL(host, url) {

        var randStr = randomstring.generate({
            length: 5,
            charset: 'alphabetic'
        });

        var response = {
            url: url,
            short_url: host + "/" + randStr
        };

        return response
    }

What this function does is it takes generates a random string of 5 characters which are all alphabets, & store both the URL and a short version of the URL in a response variable in JSON format.

An example of the response which will be generated is...

{
url: "www.pranjaljain.tech",
short_url: "www.sho.rt/CYzAS"
}

As we can see that we return the response from the generateURL(). Now we need to store the response and the Generated string on the database so that it can be referred to later.

After adding the generateURL() function...

const express = require('express')
const app = express()
const cors = require("cors");
const port = 3000

app.all("/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

async function generateURL(host, url) {

        var randStr = randomstring.generate({
            length: 5,
            charset: 'alphabetic'
        });

        var response = {
            url: url,
            short_url: host + "/" + randStr
        };

        return response
    }

app.post('/url', cors(), async (req, res) => {
        var URL = req.body.url;
        const host = req.get('host');
        var generatedURL = await generateURL(host, URL)
        if (generatedURL != null)
            res.json(generatedURL)
        else
            res.sendStatus(500)
    });

app.get('/', cors(), (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

To add a URL we can run this command from our terminals

curl -H "Content-Type: application/json" -d '{"url":"{URL TO STORE}"}' http://localhost:3000/new

Step 4

Configuring firebase to work with our application.

Go to your Firebase Console

Create a new firebase project and name it anything you want.

Then click Continue on the second step and click Create Project on the final step.

Now go to Project settings from the gear icon on the left pane.

Click on the Service account tab and generate a new private key, You will have to download the configuration JSON file after generating the new key.

After downloading the configuration JSON file store it in the project directory inside the folder and name the folder secret.

Now we need to run the command npm i firebase-admin to install firebase-admin which will help us perform Firebase-related operations.

And we include it in our application using

var admin = require('firebase-admin');

Now we include the config file which we downloaded from the Firebase console.

var serviceAccount = require("./secret/config.json");

It is not the perfect way to use this file but it serves the purpose. The perfect way is to use it as ENVIROMENT_VARIABLE.

We then initialize the firebase application using this command which is provided in the firebase docs.

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://{YOUR_DB_NAME}.firebaseio.com"
});

Here you can see that we have passed the serviceAccount variable as the credentials to the app so the app knows which database it is talking to.

Now we create a function to store the URL to the database.

async function storePassword(id, response) {
        var db = admin.database();
        var ref = db.ref("restricted_access");
        ref.child("short_urls").child(id).set(response)
    }

Here we are providing the 5 characters as the ID or the key for the database the response JSON which we created before as the value completing a key-value pair.

Now we can successfully store the URL and shortened URL to the database with the ID as the key for reference.

The final application ut this step is...

const express = require('express')
const app = express()
const bodyParser = require("body-parser");
const cors = require("cors");
var admin = require('firebase-admin');
const port = 3000

var serviceAccount = require("./secret/config.json");


app.all("/*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: "https://{YOUR_DB_NAME}.firebaseio.com"
});

async function generateURL(host, url) {

    var randStr = randomstring.generate({
        length: 5,
        charset: 'alphabetic'
    });

    var response = {
        url: url,
        short_url: host + "/" + randStr
    };

    return response
}

async function storePassword(id, response) {
    var db = admin.database();
    var ref = db.ref("restricted_access");
    ref.child("short_urls").child(id).set(response)
}

app.post('/url', cors(), async (req, res) => {
    var URL = req.body.url;
    const host = req.get('host');
    var generatedURL = await generateURL(host, URL)
    if (generatedURL != null)
        res.json(generatedURL)
    else
        res.sendStatus(500)
});

app.get('/', cors(), (req, res) => {
    res.send('Hello World!')
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

And as you can see

This is how our data is being uploaded to the firebase database.

Step 5

Retrieve the data and redirect.

Now in the final step of our express application, We need to retrieve the data from the firebase database, Then we need to redirect the user whenever he visits our short URL.

First, we will take the URL parameter as input from the user with a get method.

app.get('/:short_url_id', cors(), async (req, res) => {
        console.log(req.params.short_url_id)
    });

Using this method we will get the ID from the user which we need to find in firebase.

now we will write a function to search firebase with the ID and redirect as the search is successful.

async function getUrl(urlID, res) {
        var db = admin.database();
        var ref = db.ref("restricted_access/short_urls/" + urlID);
        var data = {}
        ref.once("value", function (snapshot) {
            data = snapshot.val();
            res.redirect(data['url'])
        });

    }

In the function getUrl(urlID, res) We are passing urlID and response as the parameters so that as soon as the urlID matches with a key-value pair, It will use the response to redirect the user to the fetched URL.

The final code can be found on this GitHub repo

You can deploy it on Heroku at it will work.

Thank you for reading till here.
Follow me
Twitter
GitHub
Dev.to

An event that helped me get over Impostor Syndrome

Pranjal Jain — Sun, 18 Oct 2020 14:21:38 +0000

For the past seven years, DigitalOcean has hosted Hacktoberfest: a community-wide celebration of open source.

Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or a company of any size, you can help drive the growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

Every year in October, Digital Ocean and GitHub team up for an online event that celebrates open-source. Open-Source is one of the most growing areas in development these years. Also, it has made it possible for beginners to grow and develop their skills as a programmer/developer. On the brighter side, you get some really cool freebies as well! Let’s talk in detail about this event.

First and foremost, you need to register for Hacktoberfest, for that you need a GitHub account, if you don’t have one, chill we’ve got you covered. Go to this link and create an account for free!
Once your GitHub account is created, you can register for Hacktoberfest here! After registering for Hacktoberfest, you are officially a participant of Hacktoberfest! Now, you just need to start contributing to any projects out there on GitHub.

Here’s how –
First, learn about GitHub and pull requests if you don’t know about them.

Once, you have learned about pull requests and GitHub, you need to make 4 pull requests to any open-source projects which are a part of the Hacktoberfest topic. pull requests reported as spam or invalid would not be eligible.

After you make your pull requests, contribute by finding bugs and remove them, and finally pushing them into the repository. Also, you can check your progress on the Hacktoberfest website!

What I Learned From Hacktoberfest

Participating in Hacktoberfest 2020, Making 4+ pull requests made me realize that everything I've learned over the years is not going in vain, And when my first pull request got accepted, The feeling was amazing. I learned that no one is less, If provided with the right platform and right resources, Each individual can do miracles.

The event is a great opportunity to grow as a developer and improve your skills, also if you make 4 successful pull requests you are eligible to get a really cool T-Shirt.