DEV Community: prajyu

Tik Tok Clone using next js.

prajyu — Sat, 06 Aug 2022 07:00:00 +0000

A full stack tiktok clone project build using nextjs.

This is not a fully finished project it's just a demonstration.

Clone, fork, edit do whatever you need.

Source Code : github

Working APP: APP

Let me know what you think of this project 🙂.

How to make a URL shortner.

prajyu — Fri, 22 Jul 2022 09:04:00 +0000

In this project you will learn how to build an API using express.js, how to connect it to a backend and how to handle http requests

fork or clone this repository for reference
 

NPM packages used

dependencies

cors
crc
express
mongodb
url

dev dependencies ( npm i ${package_name}--save-dev )

dotenv
nodemon

Initialize project

Initialize an npm project npm init -y and create api.js file
 

Build the Server

  
Install and import dependencies

Install all the dependencies given above. dev depedencies is optional.

      - nodemon is used to automatically update the server file aka api.js
      - dotenv is used to load environment variables into the file
  
2. Import dependencies into api.js

const express = require("express");
const cors = require("cors");
const { crc32 } = require("crc");
const { MongoClient } = require("mongodb");
const { URL } = require("url");

 
** Start the server **

1. Make the express app instance using this line of code

const app = express();

 
2. Make the server able to recieve json files on POST requests

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

 
3. Enable CORS on the server. This helps you in controlling access to the server from different addresses more about it here

app.use(cors());

 
4. Make the server listen on a port

app.listen(process.env.PORT || 3030);

process.env.PORT helps in deployment

Now you have a working server 🎉🎉. But it doesn't do anything right now. So lets fix that...
 

Connect your server to mongoDB

If you don't know how to get started mongodb locally. Here's a link to get you started

We use npm package monodb to connect to database

const dbName = "dbName";

let collection = null // Global Variable

let main = async () => {
  let url = "mongodb://localhost:27017";
  const client = new MongoClient(url);
  await client.connect();
  const db = client.db(dbName);
  collection = db.collection("urls");
  const deleteResult = await collection.deleteMany({});
  // deletes all entry after each restart
};

And call the function main()

Now your server is connected to your databse.
 

Link Shortner Function

We are going to be using CRC32 hash algorithm to shrink the URLS. This is where crc package comes into play.

let createUrl = (url) => {
  let shortenedUrl = crc32(url).toString(16);
  return shortenedUrl;
};

This function reduces your URL to a 8 character string.
 

Create and Read from database

We are going to be making a collection with a pair like

{   url:'original URL,   shortenedUrl:'shrinked URL of the absolute URL }
 

Add the URL to databse

let addUrl = async (url, shortenedUrl) => {
  const insertResult = await collection.insertOne({ shortenedUrl, url });
  return insertResult;
};

Find pair from databse

let findUrl = async (shortenedUrl) => {
  const findResult = await collection.find({ shortenedUrl }).toArray();
  return findResult;
};

Add routes to your API

Shrink URL

To shrink URL's we need to create a POST request in api.js

app.post("/shrink", async (req, res) => {
  ...
});

After we defined the route. We need to process the incoming requests.

Get the URL from the body of the post request and shrink it using our earlier function.

let { url } = req.body;
let shortenedUrl = createUrl(url);

 
Next we check if the shortenedUrl is already in our database using findUrl() function. If we get a hit we return the shortenedUrl or move to next part.

let result = await findUrl(shortenedUrl);
if (result.length >= 1) return res.json({ shortenedUrl });

 
If the shortenedUrl doesn't exist we add it to the database with the structure defined earlier above and send back the shortenedUrl.

let status = await addUrl(url, shortenedUrl);
if (status?.acknowledged) return res.json({ shortenedUrl });
else return res.json({ error: true }); // Not to make the server crash

 
'/shrink' route in one snippet

app.post("/shrink", async (req, res) => {
  let { url } = req.body;
  let shortenedUrl = createUrl(url);
  let result = await findUrl(shortenedUrl);
  if (result.length >= 1) return res.json({ shortenedUrl });
  let status = await addUrl(url, shortenedUrl);
  if (status?.acknowledged) return res.json({ shortenedUrl });
  else return res.json({ error: true });
});

Strecth URL

To stretch URL we are going to define a GET route

First we define the route in api.js

app.get("/s/:shortUrl", async (req, res) => {
  ...
});

 
The :shortUrl in the route section capsules all the section after '/s/' into a variable.

First we check if the url is in the database or not. If it's in the database we redirect the user to the URL or we send a 404 message

let { shortUrl } = req.params;
let result = await findUrl(shortUrl);
if (result.length > 0) return res.redirect(result[0]?.url);
else res.json({ 404: "no URL found" });

 
'/s/:shortUrl' route in one snippet

app.get("/s/:shortUrl", async (req, res) => {
  let { shortUrl } = req.params;
  let result = await findUrl(shortUrl);
  if (result.length > 0) return res.redirect(result[0]?.url);
  else res.json({ 404: "no URL found" });
});

And voila you have a working link shortner 🎉🎉🎊
Here's a working link shortner shrinkinglinks

Portfolio Project

prajyu — Sat, 16 Jul 2022 09:47:17 +0000

Hey people, I'm trying to build my portfolio website and this what i have so far Portfolio. If you have any suggestion or ideas write it in the comment section and let me know. (and who knows it may be inspiration for other dev's out there)

Conway's Game Of Life

prajyu — Wed, 13 Jul 2022 15:17:41 +0000

The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970

Wikipedia

Basically it runs on just two rules :-

Cell with less than two or more than three neighbours dies
Cell with two or three neighbours survives to next generation

Here's a neat working Life

! Made this just for small screens.

If the page is not working try cloning the repo and running it locally GITHUB

Hang Man in vanilla JavaScript

prajyu — Sun, 15 May 2022 17:05:55 +0000

Hang Man

Classic HangMan project coded in vanilla js.

No libraries used in this little fun project.

You can check this out here

Source Code on GitHub Repo

Clone and run it locally to access full feature

Share your thoughts...

A NETFLIX clone build using react js and tmdb API

prajyu — Sat, 14 May 2022 09:11:22 +0000

NETFLIX

A react js frontend clone project using TMDB API

API endpoints used are :
Originals: /discover/tv?api_key=${API_KEY}&language=en-US,
Trending: /trending/all/week?api_key=${API_KEY}&language=en-US,
TopRated: /movie/top_rated?api_key=${API_KEY}&language=en-US,
Action: /discover/movie?api_key=${API_KEY}&with_genres=28,
Comedy: /discover/movie?api_key=${API_KEY}&with_genres=35,
Horror: /discover/movie?api_key=${API_KEY}&with_genres=27,
Romance: /discover/movie?api_key=${API_KEY}&with_genres=10749,
Documentaries: /discover/movie?api_key=${API_KEY}&with_genres=99

For more information and code ...

checkout my github repo Netflix Clone

Face Scan project to socialize

prajyu — Fri, 13 May 2022 15:56:10 +0000

An innovative project which scans yours or anyone else's face identifies them.

Built to help people socialize more

Build using React js and node

Face Scan