GithubHelp home page GithubHelp logo

salimi-my / url-shortener Goto Github PK

View Code? Open in Web Editor NEW
10.0 1.0 2.0 1.99 MB

URL Shortener is an app to shorten URLs created using NextJS. Users can create custom keyword short link and view statistics or analytics of the links.

Home Page: https://url.salimi.my

CSS 2.64% TypeScript 95.93% JavaScript 1.43%
clerk mysql nextjs planetscale prisma shadcn-ui tailwindcss typescript zustand

url-shortener's Introduction

URL Shortener is an app to shorten URLs and generate short links created using NextJS. URL Shortener allows users to create a custom keyword shortened link making it easy to share and viewing analytics of that link.

Simple URL shortener tool

  • Custom keyword for short URL slug
  • Statistics / analytics of links
  • Light / dark / system mode
  • Authentication using Clerk
  • PostgreSQL, Neon & Prisma for database
  • Zustand for state management
  • Hosted in Vercel

Tech/framework used

  • Next.js 13 App Dir
  • Shadcn/ui
  • Clerk
  • Tailwind CSS
  • TypeScript
  • PostgreSQL
  • Neon
  • Prisma
  • Zustand
  • Vercel

Starting the project

Open the .env.example and fill in your Database URL & Clerk Auth Configurations then save it as .env the run the following command:

npm install
npx prisma db push
npx prisma generate
npm run dev

Demo

The app is hosted on Vercel. Click here to visit.
Direct link: https://url.salimi.my

Screenshots

Sign in

Sign in

Sign up

Sign up

Dashboard

Dashboard

Listing

Listing

Create short URL

Create short URL

Short URL details

Create short URL

Profile

Profile

Mini sidebar

Mini sidebar

Dark mode

Dark mode

url-shortener's People

Contributors

salimi-my avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

url-shortener's Issues

need google map api

very nice project, but it cannot display the country in map; it throw an error says that need a google map api in console

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.