JSONCrack Codebase Analysis - Part 6 - Lemonsqueezy integration
Tags: javascript, opensource, webdev, react
Published: 2024-01-10 21:37:21

[jsoncrack](https://jsoncrack.com/editor) is a popular opensource tool used to visualise json into a mindmap. It is built using Next.js.

We, at [TThroo](https://tthroo.com/), love open source and perform codebase analysis on popular repositories, document, and provide a detailed explanation of the codebase. This enables OSS enthusiasts to learn and contribute to open source projects, and we also apply these learnings in our projects.

In this part 6, we understand how [Lemonsqueezy](https://www.lemonsqueezy.com/) is used for payment subscription.

![pricing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29p7ndmee4ftn203o6yc.png)

[Pricing.tsx](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/pages/pricing.tsx#L162) in `src/pages/pricing.tsx` has `Upgrade` that redirects you to Lemonsqueezy checkout.

## Checkout

![Lemonsqueezy checkout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n32a0e0m7m43ch4ewa9d.png)

## Webhook listener

So, I could not figure out the webhook listener used to listen subscriptions created via this checkout in this codebase, I was hoping I could find an endpoint.

![webhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xme4j7ce9hs7goj953nw.png)

The idea is to listen to webhook events whenever there is a new subscription created and update the database record.

I will make sure to include this as part my next tutorial series where we build a product similar to jsoncrack.

But you get the idea now.

## Premium

`setSession` object used in [useFile](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/store/useUser.ts#L33) store calls `supabase.rpc("get_subscription_info")` to fetch the user data if they have paid for subscription and `premium` flag in the store.

rpc? [remote procedure call](https://supabase.com/docs/reference/javascript/rpc) from `Supabase` 

That's it, You now just have to call the following:

```
const premium = useUser(state => state.premium);
```

To find out if a user is a premium user and allow to user premium features.

## Conlusion

Lemonsqueezy makes it easy to handle subscriptions for SaaS. This was a brief overview of how jsoncrack handles payment subscription. 

We have `rpc`, `webhook` and `useUser` to reuse `premium` logic across the codebase.

This concludes our jsoncrack codebase analysis.

## What's next? 

I will create a tutorial that mainly uses the logic and design patterns used in this project. I am not a fan of copying exactly what is available in opensource codebases. I would rather build a unique application from sratch and apply the learnings. That's how you really learn. You APPLY :)

## What are we building next?

A simple application that uses the same tech stack as jsoncrack.

1. Next.js
2. Supabase
3. Monaco Editor
4. Lemonsqueezy
5. Reaflow

and yes, it will be opensource.

I will make all these tutorials available at [Practice Frontend](https://practicefrontend.tthroo.com/practice) after a significant to that website. That'll be opensource too.

If you have any questions or need help with your project, feel free to reach out to me at ram@tthroo.com