hanthienhai/Pckd

The most ⚡️ analytics-intensive 💪 self-hostable 🔗 URL shortener, with an amazing UI 😍 | Free Bitly alternative

More than just a URL Shortener 😎
Explore the docs »

Design file on Figma · Report Bug · Request Feature

💁 About The Project

 

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

(back to top)

📸 Screenshots

Here is a sneak peek of the application and it's visuals 😍:

Dashboard Page
Login	Signup
Account Page	Reset Password
Home Page

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

(back to top)

🤗 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.

(back to top)

😲 Built With (Tech Stack)

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

• React JS ⚛️ - For the frontend of the app
• Apollo GraphQL Server v3 🕸️ - For querying the backend from the frontend efficiently
• GraphQL Template By Mohit 🧩 - Boilerplate Template used for initializing the backend
• Prisma 💿 - The ORM used for the app
• Any 😨 relational or non-relational database that Prisma supports
• Redux 🗺️ w/ Redux Toolkit - For handling states across the application

(back to top)

🤯 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:

• NodeJS 14+ and NPM
• A supported database system

And that's it

(back to top)

💾 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

(back to top)

🤩 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).

(back to top)

📐 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

(back to top)

👋 Reach Out

You can reach out to Mohit Yadav, the main creator of the app (for now) at mail (mohit@mohityadav.codes), Twitter or Discord

If you Have any questions

So I can keep on going

Awesome projects

(back to top)

😋 License

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

(back to top)

😊 Acknowledgments

• Parth Jadhav for ideas and support
• Respective Google Font Creators
• AR Shakir - Inspiration for dashboard UI design

(back to top)

🥰 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