Build Bitly URL Shortener Clone Using Node.js Express EJS MySQL

npm init -y

npm i express

npm i mysql

npm i shortid

npm i ejs

index.js

const express = require("express");
const shortid = require("shortid");
const mysql = require("mysql");
const app = express();
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
app.use(express.urlencoded({ extended: false }));

const db = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "url_shortener"
});

db.connect(err => {
    if(err) {
        console.log("Error connecting to DB");
        return;
    }
    console.log("Connceted to DB");
});

function getLinks(req,res){
    db.query("SELECT * FROM url ORDER BY ID DESC",(error,results) => {
        if(error){
            res.render('home',{result:[]})
        }
        else{
            console.log(results)
            res.render('home',{results:results})
        }
    })
}

app.get("/", (req, res) => {
    getLinks(req,res)
});

app.post("/shorturl", (req, res) => {
    const fullUrl = req.body.fullUrl;
    if (!fullUrl) {
        return res.sendStatus(404);
    }
    db.query('SELECT * FROM `url` WHERE `fullUrl` = ?', [fullUrl], (error, results) => {
        if (error) {
            console.log(error);
            return res.sendStatus(404);
        }

        if (results.length === 0) {
            const short = shortid.generate();
            const url = { fullUrl: req.body.fullUrl, shortUrl: short, counts: 1 };
            db.query('INSERT INTO `url` SET ?', url, (err, res) => {
                if (err) {
                    console.log("Error creating table");
                    return;
                }
            });
            getLinks(req,res)
        } else {
            const _short = results[0].shortUrl;
            const _counts = results[0].counts;
            db.query('UPDATE `url` SET `counts` = ? WHERE `shortUrl` = ?', [_counts + 1, _short], (err, res) => {
                if (err) {
                    console.log("Error updating table");
                    return;
                }
            });
            getLinks(req,res)
        }
    });
});


app.get("/:shortUrl", (req, res) => {
    db.query('SELECT * FROM `url` WHERE `shortUrl` = ?', [req.params.shortUrl], (error, results) => {
        if (error) {
            return res.sendStatus(404);
        }

        if (results.length === 0) {
            res.render("error");
        } else {
            res.redirect(results[0].fullUrl);
        }
    });
});


app.listen(3000);

Now create a folder named public and inside it make a css folder and inside it make a home.css file. After that, copy/paste the below code into it.

home.css

.container {
    width: 50%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

h2 {
    margin: 0;
}

p {
    max-width: 350px;
}

input[type="url"] {
    height: 28px;
    width: 250px;
    padding-left: 8px;
    border-radius: 4px;
    border: 1px solid #000;
}

input[type="submit"] {
    padding: 10px 20px;
    color: #fff;
    background-color: #349ded;
    border: none;
    border-radius: 4px;
    margin-left: 5px;
}

input[type="submit"]:hover {
    cursor: pointer;
    opacity: 0.85;
}

.span-link {
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #349ded;
    color: #fff;
}

.result-container {
    background-color: #dddcdc;
    padding: 10px;
    min-width: 200px;
    display: flex;
    justify-content: space-around;
}

a {
    text-decoration: none;
}

.copy-span:hover {
    cursor: pointer;
    opacity: 0.75;
}

And now make views folder inside the root directory and inside it make two files namely home.ejs and error.ejs

home.ejs

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/styles/home.css" />
</head>

<body>
    <div class="container">
        <h2>Bitly URL Shortener Clone</h2>
        <p>Convert long URL to shorter one with a single click. Its easy, simple and absolutely free!</p>
        <form action="/shortUrl" method="post">
            <div class="form-group">
                <input class="form-control" type="url" placeholder="Enter the URL" name="fullUrl" required />
            </div>
            <div class="form-group">
                <input class="form-control" type="submit" value="Convert" />
            </div>
        </form>
        <%if(results){%>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>FullUrl</th>
                        <th>ShortUrl</th>
                        <th>Count</th>

                    </tr>
                <tbody>
                    <%results.forEach(result=> {%>
                        <tr>
                            <td>
                                <%=result.fullUrl%>
                            </td>
                            <td>
                                <span><a id="short-url" href="<%= `/${result.shortUrl}` %>" target="_blank"><%= result.shortUrl %></a></span>
                            </td>
                            <td>
                                <%=result.counts%>
                            </td>
                        </tr>
                        <%})%>
                </tbody>
                </thead>
            </table>
            <%}%>
    </div>
</body>
</html>

error.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error Page</title>
    <link rel="stylesheet" type="text/css" href="/styles/home.css" />
</head>
<body>
    <div class="container">
        <h2>URL Shortener</h2>
        <p>The URL you entered does not exist!</p>
        <br />
        <a href="/"><span class="span-link">Visit Home Page</span></a>
    </div>
</body>
</html>

Bitly URL Shortener Clone Screenshot

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.