Project Banner

More than just a URL Shortener ๐Ÿ˜Ž Explore the docs ยป

Design file on Figma ยท Report Bug ยท Request Feature

๐Ÿ’ About The Project

Project Banner ย 

Pckd is a full-customizable, open source, free-to-use, usable-design-focued, tracking-intensive URL Shortener with awesome features, and supports:

  • Creating short urls (we call them ๐Ÿ”— pckds) from long ones with, or without an account

  • Customize back-halfs on every ๐Ÿ”— pckd

  • Deploy to custom ๐Ÿ”Œ URL and Infrastructure ๐Ÿ’ฟ

  • Track ๐Ÿ•ต๏ธโ€โ™‚๏ธ each and every click on a ๐Ÿ”— pckd, and retrieve

    • ๐ŸŒ IP address (Spoof-resistant)
    • ๐Ÿ•ธ๏ธ ISP Name
    • ๐Ÿ—บ๏ธ IP-Location
    • ๐Ÿ’ป Device details like OS Version and Device Model
    • ๐ŸชŸ Browser Name and including version

    It’s Just crazy how powerful it is! ๐Ÿคฏ

  • Edit links after they’re created

  • Custom Loading/Redirecting Screen ๐Ÿ’ฏ

  • [On Roadmap!] Quick Redirections in 150ms! ๐Ÿ˜ฑ

  • Fast, Reliable and Secure ๐Ÿ”

  • Secret Storage ๐Ÿ‘ฎ and handling using ๐Ÿ’ป environment variables

  • Built on Modern and Well-used Technologies like React, GraphQL & NodeJS

  • Use your own DBMS ๐Ÿฅณ. Pckd is compatible with MySQL, PostgreSQL, MongoDB and many more

This project was created to be the most powerful URL shortener for the public, so no wonder it’s so feature-rich

๐Ÿ“ธ Screenshots

Here is a sneak peek of the application and it’s visuals ๐Ÿ˜:

Dashboard Page

Dashboard Page

Login Screen

Login

Signup

Signup

Account Page

Account Page

Reset Password Screen

Reset Password

Home Page

Home Page

Want to create your own iteration? View the designs on Figma

๐Ÿค— Motivation

After looking at all the aka.ms links out there which flood windows, along with the numerous time saving been prompted to buy premium plans from bit.ly while shortening my URLs, the decision of having a personal URL shortener hosted on a custom domain for free caught wind. Starting out by looking at GitHub for a JavaScript-based URL shortener, no one stood out and had minimal features. So, I decided to create my own URL shortener along with the help of a few friends, and got what this repository contains.

๐Ÿ˜ฒ Built With (Tech Stack)

The following technologies were involved in the making of this project.

๐Ÿคฏ Quick Start Guide

To get started with having your own instance of Pckd, follow the steps described in the following section

NOTE: Here are the DETAILED INSTRUCTIONS

๐ŸŒ‚ Prerequisites

You will need these to be already installed:

And that’s it

๐Ÿ’พ Installation

Follow these steps to get started with your own instance of Pckd

  1. Clone the repo and cd to the folder base of this repo
  2. Run command npm run init to install all the dependencies, and initialize environment files in both folders
  3. Obtain a free API key from IP Registry (for IP address tracking info lookups)
  4. Create a database named pckd in your chosen DBMS and note down the connection Username and Password
  5. Manually go to both the client and server folder and fill in the values in the .env file
  6. Open the server/prisma/schema.prisma file and replace postgresql with your chosen db name.
  7. Return to base directory, and run npm run db-init to sync database with schema.
  8. To test if everything’s working, run npm run dev and test the app
  9. To promote to production, run npm run build-client and then npm start

If you have any problems following the steps, here are the detailed instructions

๐Ÿคฉ Roadmap

This project is far from perfect, and we’ll reach there one day, or at least get close.

  • Add forgotten password-reset capabilities (issue #3)
  • Adding extra features such as enabling or disabling tracking on certain links (Issue #2)
  • Quick redirects using ExpressJS directly from the backend, without loading react and Redux (planned ~150ms)
  • Adding docker-compose supported quick installation

Known Issues:

  • Hit not registered if IP not provided

See the open issues for a full list of proposed features (and known issues).

๐Ÿ“ How it works

Here’s a diagram explaining exactly how everything fits into place

Here’s how everything fits into the scene

๐Ÿ™ƒ Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag “enhancement”. Don’t forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

๐Ÿ‘‹ Reach Out

You can reach out to Mohit Yadav, the main creator of the app (for now) at mail ([email protected]), Twitter or Discord

Join Discord Server

If you Have any questions

Buy me a coffee

So I can keep on going

Visit website

Awesome projects

๐Ÿ˜‹ License

Distributed under the MIT License. See LICENSE.md for more information.

๐Ÿ˜Š Acknowledgments

๐Ÿฅฐ Endnote

Just one last thing, if you have reached this far, why not consider giving a star to the repo like many incredible people already have. This keeps us going, and we love to see that people like our projects, and motivates us to make more of these. With that, thank you loads ๐Ÿ˜Š๐Ÿฅฐ

~ Mohit

GitHub

View Github