A URL shortener website and PWA build with vercel serverless cloud function, MongoDB and nodeJS

Overview

❤️ lenk.cf

A URL shortner made using NodeJS, MongoDB and Vercel serverless function. This project also includes a serverless API. With the help of this API we can Integreate the URL shortner with basic static (HTML/CSS/JS ) websites. This website can also serve as a Progresive Web Application (PWA) where you can install this website as a normal Application on your PC or Phone.

 

Tech Stack

Client: HTML, SCSS, JS, Bootstrap, Materialize

Server: Node,TS, MongDB, Vercel Serveless function.

🎦 Screenshots

 

App Screenshot

 

 

💻 Requirements

  • NodeJS
  • MongoDB (Atlas)
  • Vercel CLI

 

🌐 Deployment

To get this poject running, firstly install vercel CLI on your PC with the following command.

  npm i -g vercel

Secondly, goto MongoDB and configure a MongoDB Atlas cluter running, Setup the MongoDB clutter and copy the URI for NodeJS application.

After the MongoDB setup is done clone this project and install the packages.

  git clone https://github.com/adithyapaib/lenk.cf
  cd lenk.cf
  npm i

create .env file in the root folder and create variable DB and paste your MongoDB URI

 DB = YOUR_URI_WITHOUT_QUOTES

After everthing is installed to locally deploy this project type

 vercel dev

Login with your Vercel account and your all set for Local Deployment on.

 localhost:3000

For web Deployment on Vercel use

 vercel deploy

 

💢 API Reference

 

API Index

  localhost:300/api/
Type File Description
string index.js Displays info about API

 

Redirect to original URL

  localhost:300/${shortId}
Parameter File Description
ShortId redirect.js Required ID of item to redirect

 

Register a new URL

 localhost:300/p/
Parameter File Description
url p.js Required url of main URL. Responds with a random shortID.

 

List all the URL's in the Database

  localhost:300/all
Parameter File Description
all.js Displays all the URL's in the database.

   

Register a custom ShortId

  localhost:300/custom/<shortIDLength>_<shortId><original_url>
Parameter File Description
<shortIDLength>_<shortId><original_url> custom.js Checks if the shortID is taken, return true if shortID is unique else return false if there exits any conflict shortID

Example

Parameter File Example
<shortIDLength>_<shortId><original_url> custom.js http://localhost:3000/3_adihttps://github.com/adithyapaib

 

If the link dosen't exits in Database

  localhost:300/404
Parameter File Description
/404 404.html 404 Page

 

🛰 Environment Variables

To run this project, you will need to add the following environment variables to your .env file

DB = YOUR_MONGOURI

 

🌐 Domains

Other domains to this project.

https://4543.ml

https://urml.ml

 

🚦 Acknowledgements

  • Dont forget to 🙋🏼‍♂️Follow me on Github and Star this Repo

 

📑 License

MIT

 

You might also like...

📱 Free to use static generated website template for your mobile app

📱 Free to use static generated website template for your mobile app

Mobile App Landing Page Template 📱 Free to use static generated landing page template for your mobile app 💡 Features Mobile App Landing Page Templat

Dec 30, 2022

Make a cool summer-themed portfolio website.

Make a cool summer-themed portfolio website.

Summer Hacks 🌞 📅 7th - 9th May'21 | 📍 Online, GitHub Welcome to Summer Hacks powered by SOA Code Room About Summer Hacks 🌻 Summer Hacks is the fir

Oct 10, 2022

A lightweight and modular front-end framework for developing fast and powerful web interfaces

A lightweight and modular front-end framework for developing fast and powerful web interfaces

UIkit UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. Homepage - Learn more about UIkit @getui

Jan 8, 2023

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Dec 26, 2022

🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Dec 24, 2022

A modern static resume template and theme. Powered by Jekyll and GitHub pages.

A modern static resume template and theme. Powered by Jekyll and GitHub pages.

modern-resume-theme A modern simple static resume template and theme. Powered by Jekyll and GitHub pages. Host your own resume on GitHub for free! Vie

Dec 31, 2022

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Jan 1, 2023

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Install | Documentation | Releases | Contributing Foundation is the most advanced responsive front-end framework in the world. Quickly go from prototy

Jan 4, 2023

Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Jan 3, 2023
Owner
Adithya Pai B
Front-End Developer | Open-Source Enthusiast
Adithya Pai B
Automatically convert those LESS file which is not using less function to CSS.

less-2-css Automatically convert those .less file which is not using less function to .css. Why Less is a powerful CSS pre-processor, but it also very

UmiJS 14 May 24, 2022
Native wrapper for Xbox Cloud Gaming (xbox.com/play) made with Electron

Xbox Cloud Gaming wrapper Simple native Electron wrapper for Xbox Cloud Gaming (xbox.com/play) Features Windows / Mac (intel/Apple Silicon) / Linux(?)

null 34 Dec 28, 2022
cloud-yblog是在yblog的基础上利用SpringCloud+SpringCloud alibaba开发的分布式微服务的博客系统,并会大量借鉴之前的不足之处进行优化升级,此项目将作为大学生活中最后一个大型项目,将会不断的更新,谢谢支持!

cloud-yblog cloud-yblog是yblog的微服务版本,是一个基于SpringCloud分布式微服务架构开发的博客系统   cloud-yblog是基于SpringCloud+springCloud alibaba分布式微服务框架开发的博客:博文管理、统计图表、接口监控、访问记录、附

youzhengjie 177 Jan 13, 2022
The fastest way to build beautiful Electron apps using simple HTML and CSS

Photon UI toolkit for building desktop apps with Electron. Getting started Clone the repo with git clone https://github.com/connors/photon.git Read th

Connor Sears 9.9k Dec 29, 2022
A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

Roman Nurik 21 Oct 9, 2022
Author styles collocated in JS, pull them out into static CSS on build. No runtime dependency.

Author styles collocated in JS, pull them out into static CSS on build. No runtime dependency. the big idea: I like to author styles collocated with c

Siddharth Kshetrapal 90 Sep 11, 2022
A Github Pages template for nonprofits seeking a starter website. Includes online donations and newsletter signup.

A Free Website Template for Nonprofits We want to help introduce the nonprofit community to the powerful world of open source development. Just follow

SmarterGiving 98 Dec 16, 2022
A pure html and css library for dark mode in your website.

Dark Mode A pure html and css library for dark mode in your website. Features It has a smooth setting and also it changes via system settings aswell.

null 1 Jan 6, 2022
A website designed as a template for Real Estate Events and Conferences.

A website designed as a template for Real Estate Events and Conferences. Users can showcase live countdown until event, event characteristics, Speakers and Organizational leadership Showcase and design is responsive. Built with HTML/CSS/JavaScript.

Steve 17 Nov 28, 2022
A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

Start Bootstrap 327 Dec 18, 2022