DEV Community: mehan

Creating a url shortener in nodejs

mehan — Sat, 02 Jul 2022 08:02:09 +0000

Today we want to make a url shortener in nodejs. This project won't use a database to save the data, All the data will be saved in JSON file.

first of all, make sure you have installed nodejs. You can use nvm(Node version manager) to install it if you're using Linux.

Let's make the folder we want to code in there:

mkdir url-short
cd url-short

We can make a public/ directory to put out HTML and CSS files in there. So:

mkdir public/

And we will make a index.html in public/:

<!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>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <form action="/" method="post">
        <h1>Link shortener</h1>
        <input type="text" name="origUrl" id="">
        <button type="submit">shorten</button>
    </form>
</body>
</html>

and index.css again in public/:

body{
    background-color: #00796B;
}
h1{
    color: #fff;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
input{
    width: 70%;
    height: 2em;
    border: none;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    color: #000;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 50px;
    margin-top:50px;
}
button{
    background-color: #1A237E;
    color: #fff;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    border: 0;
    border-radius: 50px;
    width: 70px;
    height: 40px;
}

And now we will install npm package we need:

npm i express

So We make a db.json in the root:

{links:[]}

We will add urls to this later.
and index.js in the root:

const express = require("express")
const app = express()
const process = require("process")
const fs = require("fs")
const port = process.env.PORT || 4000


app.use(express.json())
app.use(express.urlencoded({ extended: true }))
// load html and css in public folder
app.use(express.static("public"))
app.get("/", (req, res) => { res.sendFile("index.html") })

Ok So we know that index.html will send a post request to / containing original Url and we can get the data from db.json and chack if we have saved this url earlier:

app.post("/", (req, res) => {
    let newJson=JSON.parse(fs.readFileSync("./db.json"))
    const {origUrl} = req.body;
    // check if url isn't in json
    newJson.links.forEach(element => {
        if (element.url===origUrl) {
            res.send(`<h1>Your shorted link is http://localhost:${port}/${element.id}</h1>`)
        }

But what if we haven't? We can make a id and store it json:

    // make the short id and put it in db.json
    let id = Math.random() * 10000000;
    id=Math.floor(id)
    // push to json
    newJson.links.push({
        id:id,
        url:origUrl
    })
    fs.writeFileSync("./db.json",JSON.stringify(newJson))
    res.send(`<h1>Your short url is: http://localhost:${port}/${id}</h1>`)
})

Ok, So we saved the id with the original url. But if the user went to that id we must redirect the user to original url:

app.get("/:id",(req,res)=>{
    // redirect
    const id=req.params.id
    let newJson=JSON.parse(fs.readFileSync("./db.json"))
    let link=newJson.links.find(link=>link.id==id)
    if(link){
        res.redirect(link.url)
    }
    else{
        res.send("no link found")
    }
})
app.listen(port, () => console.log(`app listening on port ${port}!`))

And so it works
demo :

user-images.githubusercontent.com

Also I have uploaded the code in github: link

Meet DevToken: a cryptocurrency to sponsor open source developers

mehan — Thu, 09 Sep 2021 14:30:40 +0000

Do you know what is one of the biggest problems for open-source developers? yeah, It's earning money.

They can earn money with supports but how? You may say with github sponsors but unfortunately, a lot of developers cannot use this project.

so how we can support developers?

cryptocurrency is the future money, right? so we can use cryptocurrencies like Bitcoin to support developers but isn't making a Token just for this work better?
So I made DevToken to solve this problem.

What is DevToken

DevToken is an ERC-20 Token that is for supporting developers.

Why DevToken ?

because DevToken is open-source and You can use metamask as wallet

Wallets & excanges

wallets : You can use metamask after deploying the contract.
exchange : You can use pancakeswap ## Support us The contract has not been deployed yet. Deploying and creating a liquid pool in pancakeswap will take 30$ - 70$, so please support us. ETH : 0x978042555F0cB41BDF76E1676eD2CA648dCc1ef6

consultation

In this article , I showed you what is DevToken . You can find the source code in here github
I hope you liked this article :) .

Tired from react ? What about this library ?

mehan — Sun, 01 Aug 2021 15:18:40 +0000

React is perfect for beginners because you can write JSX in that and the magic happens . you don't even need to refresh browser ! .
but although it's good for beginners , It becomes to big problem for intermediates and advances , because You should install a lot of dependencies and It isn't fast enough .
So that's why that I made Panix.js .

rendering

panix can render a simple h1 that contains "hello world" in 7-18 ms . so the syntax is like this:

mount(node(tag , attributes , children) , parent)

node function , is a function that returns an object contains tag and etc.
tag : should be an string like "h1" or "div"
attribute: should be an object like {id:"main"}
children : can be string or an array that contains more nodes like [node("h1",null,"hello"), node("h1",null,"goodbye")
parent : the html element that the new element is going to insert in it .

unmounting

you can unmount with unmount function :

let el = mount(node("h1" , null , "hello"),document.body)
unmount(el)

updating

sometimes you need to update something in an element . update function is here for this :

let el = mount(node("h1" , null , "hello"),document.body)
update(el , node("h1" , null , "goodbye"))

interesting thing that update function will automatically insert new node inside the old node parent .
this is how does update works:

last words

this articles helped me a lot to understand virtual dom and code them . also the github repo is available here please star it and if you contribute