How a URL Shortener Works and How to Build One with Next.js

• validator.js

  23 22,549 7.0 JavaScript

  String validation

  

To keep the focus of this guide on building our chat app, I'll skip the steps in setting up certain dependencies, such as Tailwind CSS for styling, Nano ID for generating strings used to create a short URL version of an original URL and validator for implement URL validation.

• urlshortener

  1 - -

git clone https://github.com/chris-nwamba/urlshortener.git

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,281 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

To keep the focus of this guide on building our chat app, I'll skip the steps in setting up certain dependencies, such as Tailwind CSS for styling, Nano ID for generating strings used to create a short URL version of an original URL and validator for implement URL validation.

• React

  1,696 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

To follow this tutorial, you'll need an AWS account. If you don't have one, you can create an account here. This tutorial also assumes that you're familiar with the basics of both JavaScript/ES6 and React.

• Next.js

  2,046 120,572 10.0 JavaScript

  The React Framework

  

Run the following command from your preferred directory to clone a Next.js starter project that already includes these dependencies.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project