ashish
devlog

devlog

Introducing Ponsor: Getting sponsored made easy with widgets!

Introducing Ponsor: Getting sponsored made easy with widgets!

ponsor lets you create widget to add all your sponsor links on your sites!

ashish's photo
ashish
ยทJul 29, 2022ยท

5 min read

Table of contents

Introduction

Ponsor (short for sponsor) is an open source and free tool created to let everyone - let it be a student, a developer, a designer or anyone to let others visiting their websites find a way to support them. Getting sponsored shouldn't be hard and that's the goal of ponsor. Through the use of a single widget it lets you showcase all your links where people can support/sponsor you!

Inspiration

I have been working on open source since last 1 year and lately I found the need for getting supported financially, I was using github's inbuilt feature for getting sponsored on my repositories but not a lot of people actually visit the source code repository of the sites I make, I wanted a way to let people see all the ways they can support me and my work. Buymeacoffee and GitHub Sponsors and some others have their own widgets that you can embed on your websites, but adding tons of script tag for a simple work didn't seem feasible to me. This is how I decided to build ponsor, it's a tool I expect a lot of people to benefit from!

Features

Auth Support

Ponsor uses auth (Google and GitHub) to save your widget to remote database made using Planetscale and keep the widget in sync with your changes. Ponsor has a dedicated dashboard for users to create widgets and it's as easy as filling a form!

ss1

Customizability

You can customize a lot of stuff in your widget from heading to links, ponsor allows you to add links from 7 different common services used by people to get sponsored -

Support for more services will be added soon, feel free to open an issue in the repository to request for a new service! Here is a working demonstration of the app ๐Ÿ‘‡

ponsor.gif

Live Preview

Ponsor lets you preview your widget in real time to allow you to create the best widget for you. The Preview is a perfect copy of the original widget so you get to see how it's going to look before you are ready to embed it in your sites. The above gif demonstrates this as well.

Walkthrough

  • Head over to the website ponsor.vercel.app.
  • You will need to sign in the app using either Google or GitHub, choose the one you like and click on sign in, Once you are signed in, the homepage will look something like this ๐Ÿ‘‡

ss2

  • Simply click on the Get Started button, it will redirect you to your dashboard.
  • Follow this video to create your very first widget ๐Ÿ‘‡
  • You can edit your widget the same way you created it, make sure you save your widget every time you make an edit to keep the dashboard and widget in sync.

Tech Stack

A lot of different tech and soft wares were used to create Ponsor, here is a list of the tech I used -

This project wouldn't have been possible without the existence of these wonderful libraries/frameworks/tools/soft wares.

Challenges

Creating one to many relations in database

I'm very new to backend stuff, and struggled to figure out how to create one to many relations in database from user to widgets to links. But after some research I figured out how to do it, moreover using Prisma with Planetscale was the best experience ever. Here's a part of my prisma schema file I used -

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  widget        Widget?
}

model Widget {
  id      Int     @id @default(autoincrement())
  name    String
  heading String
  avatar  String
  User    User?   @relation(fields: [userId], references: [id])
  userId  String? @unique
  links   Link[]
}

model Link {
  id       Int     @id @default(autoincrement())
  url      String
  title    String
  type     String
  Widget   Widget? @relation(fields: [widgetId], references: [id])
  widgetId Int?
}

Creating embeddable widgets

This was the toughest of all the challenges I faced while building the app, I wanted an easier but efficient way to embed the widgets on sites using script tags, I researched about this for days and then after finally talking with some other developers who had built similar sites, I was able to figure out a way using Iframes.

The embed file creates a DOM and adds a button element to the site (used to trigger the embed panel) which then appends an Iframe containing a static page with the button. The similar concept is used for the widget panel. Thanks to @zernonia for helping me figure this out.

Customizability and Editability

Adding customizability and editability to the widget was one of the toughest challenge, I spent hours correcting the Prisma query until I found a better method.

Development

The source code for the whole app is available on GitHub, please have a look at the README file to read about contributing guidelines and instructions to run the app locally.

Conclusion

Thank you so much for reading the article, thanks to hashnode and planetscale for giving me the opportunity to work on this wonderful project, I hope that this app will have a positive impact on the developer ecosystem, looking forward to everyone's feedbacks!

ย 
Share this