Creating GitHub Wrap with n8n, Cloudflare and Cloudinary

Sam Brace: [00:00:00] Welcome to DevJams. This is where we talk with developers that are using Cloudinary in their projects, maybe in interesting ways, inspiring ways, or just ways that we’ve never seen before. And of course, this will help people like you, hopefully that are thinking about their next websites or next mobile apps or next software projects, and thinking about ways to help manage and deliver media in some of the ways that our guests are showing in these episodes.

My name is Sam Brace. I am a Director of Customer Education here at Cloudinary and joinning me for every DevJams episode is Becky Peltz, who is our curriculum program manager for developer education at Cloudinary. Becky, nice to have you back.

Becky Peltz: Hey Sam, it’s great to be here. I think this is a really fun episode.

I know when I saw this come across, [00:01:00] I had to immediately do my own GitHub wrap. So I can’t wait to see what it’s going to look like when we talk with Harshil about it.

Sam Brace: Absolutely, and Harshil, he was working for n8n at the time, and we’ll talk more about where he’s at later, but when he built this project called GitHub wrap, it was a way to really show off all the amazing work that as a developer, that you’re putting into GitHub, but to summarize it into a yearly report and to really do it in a fun way to show off all of the great work that you’re doing, all of the repositories you’ve created, maybe all the pull requests you’ve done and,

we’re really inspired by this because one, you see companies that have done similar things like Spotify, where they’ve created their Spotify wrapped project to show all the different music you’ve listened to and the artists you’ve learned about and started listening to more over a course of the year.

Sometimes it’s embarrassing. Sometimes it’s helping you to realize [00:02:00] how much you enjoy that product and that person, but in the same way, I think the GitHub wrap project had a very similar flare to it. And what Harshil has pulled off, it’s fantastic. And of course, all the media that is associated is done with Cloudinary, which we are very, very excited to see.

Becky Peltz: Yes, and I haven’t seen n8n used, and I’m really looking forward to seeing that, because we are all getting into low code now. Even as developers, we are looking at the low code as a good solution.

Sam Brace: Absolutely. So let’s get into it. Let’s go and meet Harshil and take a look at his GitHub wrap project.

And then stick around at the very end. Me and Becky will give you some key takeaways that we felt were important from this episode for you to be successful as a developer if you decide to take on any of the learnings that are found in this episode, so see you then. Harshil, welcome to the show!

Harshil Agrawal: Thank you so much for having me.

Sam Brace: So Harshil, we’re excited to talk to you about the [00:03:00] project that you developed: GitHub Wrap. We’re excited to be able to talk about lots of other things that are associated with the project, but I really wanted just to get to know you for a little bit here, cause I think you’re doing some really cool things.

Obviously other people are noticing out in the tech sphere. So tell us a little bit about your role at n8n and what you’re doing as a developer advocate there.

Harshil Agrawal: So I work in the developer relations team at n8n, where I get to talk about automation and low code and also help the community to get started with their automation journey.

I do a lot of things at n8n, but one of my favorite thing is being lazy, because it helps me, you know, be more productive, find solutions to things that I kind of don’t like, and then share with the community.

Sam Brace: And I think that’s a great thing to be able to talk about because one of the things that it happens with automation, right, is you kind of want to automate things that you don’t want to have to manually do, things that might feel repetitive, as you’re pointing out.

If you’re saying you’re lazy, I don’t think you’re lazy by the way. [00:04:00] But if things that make you feel like, oh, I don’t want to have to do this perpetually, automation is a really good functionality for that. And it seems like a lot of the things that you’re focusing on with this program, with this project, it is really tied to automation.

So talk to me more about that. Why is that exciting? Why is that something that developers should be caring more and more about?

Harshil Agrawal: So a lot of times I have noticed, we as humans, we don’t realize that we are doing a lot of same things again and again, and wasting our time on that, which can eventually be done by a machine.

But we are like, okay, it’s just going to take me a couple of minutes to do it, and I’m going to do it. And eventually we end up wasting a lot more time than just a couple of minutes. That, accumulates all together and we don’t realize it. And that’s where, you know, I feel automation, not just for developers, but for everyone out there is really helpful.

Becky Peltz: Hey, can I say something here, because you’re not the first good developer I’ve heard this week say they were lazy. I think this is a good quality. And I think it goes [00:05:00] hand in hand with automation. You know, we’re going to make things so that we don’t have to do the same thing over, but the other really key thing is that we’re lazy and we’re prone to error.

And so if you are doing things manually, there’s going to be lots of error. Whereas with automation, you can fine tune it and get it so that it’s going to work good for everybody every time. And I see that in your app too.

Harshil Agrawal: Exactly, yeah.

Sam Brace: So Harshil, some of the things like, let’s just, before we get into the project, what are some things that you’ve automated?

I’m interested. Like where, where is this taking you? This automation journey?

Harshil Agrawal: One of the cool things that I automated was clearing my inbox. So I have subscribed to a lot of newsletters and my inbox was a mess. So I created an automation where it gets the WebView version of those newsletters, adds it to my Notion.

And then, you know, just deletes it, that email. Now my inbox looks good, a bit good, but my Notion is just going on.

Sam Brace: And I think [00:06:00] this is a helpful advice for like anybody. That’s not like, you know, regardless of who we are, email’s a problem, right? Like we’re always struggling with that inbox zero, or trying to make sure that it’s clean.

You’re not getting all of the spam, all of the newsletters, all of the things that, you know, that somewhat create clutter. So yeah, that’s an excellent idea for automation for sure. So obviously also you’re a developer, you’re on a developer relations team for the company that you work for. Talk to me also about your journey as being a developer, because obviously being a developer advocate, you’re probably catching people within different points of your journey.

Yeah. What was your journey like?

Harshil Agrawal: So, very early in my school days, as I got attracted to the technology space and I was like, I want to do something in here. And as I got to dive deeper into it, I got interested more and more, and I started learning on my own. And after I completed my high school, I came across freeCodeCamp which became my source of learning for web development.

And I still, you know, whenever someone asks [00:07:00] me about, “Hey, where should I get started?”, I always suggest them to just go ahead and or take a courses on freeCodeCamp, because they’re completely free. But apart from that, it’s structured so well. And they also have really amazing community around the world that is always ready to help you out.

So that’s how I got started into development, and while I was in university, I tried to dabble around with different technologies. So I did a bit of work at Android, machine learning, and Blockchain, just to get an idea of where my interest lies. And that’s a quick summary of my developer journey, I guess.

Sam Brace: So looking at something like that, because I think you’ve touched on a lot of really interesting points, like online learning, obviously. That’s how you learned, you didn’t go to like a formal school. You don’t have a computer science degree. You did this through freeCodeCamp.

So what are your recommendations there? Like as somebody that, you’re talking developers all the time, like, is that going to be a place where you find a lot of people are going to, should they be [00:08:00] investing into that? Also, was there any places where you were going for online learning where you’re just like this, this isn’t super helpful?

Any advice for our developer community there?

Harshil Agrawal: Yeah. Just one thing to correct. I have a formal degree in computer engineering, but I believe that, you know, whatever I learned in my university, I am not actually using that. What I’m using currently is, you know, everything that I’ve learned online.

So even though I have a degree over there, I still call myself as a self taught developer, because everything I have learned I believe is from the internet. But coming back to your question, it depends, you know, what the people want to learn. If it’s, you know, something kind of web development, I always ask them to get into freeCodeCamp because that is the place

I started with, and it really helped me a lot. Then the other platform that I used was Codecademy. They also had really good courses around JavaScript, which helped me learn about that. And while I was dabbling with Android and machine learning, I think I

went through a few courses by [00:09:00] Udacity.

So that’s another platform there, you know, people can learn about this. But what I have learned from my experience is you cannot learn anything just by following the tutorials or reading articles, you would have to go ahead and create something on your own. That’s when the actual learning happens.

Becky Peltz: Yeah, it is kind of one of the fun things about coding is that you can go off and do your own project, something nobody’s ever done before and in the process, learn something new and then turn around and teach it. Because I know that you are a teacher, you have many avenues for teaching. Do you want to share some of that?

Harshil Agrawal: Sure. So earlier last year, I think I was playing around, with n8n and Twitch and I was like, huh, I do live streams. I don’t want to tweet every time I go live, so I know there is, there has to be a possible way to automatically do that. And while I was researching into that, I learned, okay, so Twitch has an integration, which I can leverage and [00:10:00] create an automation workflow.

I did that and I wrote about it so that other people can use it. And I get feedback from people like, Hey, thank you for writing this. It’s helping us with our streaming. And we also want to see how we can extend this. So I kind of experiment on my own, build stuff, and then write about it.

So that’s kind of my process of teaching.

Becky Peltz: So we love problems, huh? Because that’s a good, a way to get a solution.

Harshil Agrawal: Exactly.

Sam Brace: Also once again, proving you can automate all the things, right. So very good job. Yeah.

Harshil Agrawal: I told you I’m lazy.

Sam Brace: Now one thing that I wanted to ask you about, because a lot of the things that we’re going to be talking around workflows and automations tied to your projects, it is tied to this concept of no code or low code.

I know that you mentioned that even a little bit earlier. Kind of unpackage that for us, because I think this is the first time we’ve really discussed no code or low code products at all in our DevJams overall program. So let’s introduce that a [00:11:00] little bit for our audience, cause it’s still kind an area that I think there’s a lot of ambiguity about.

There’s some questions about like, is this low code? Is this not low code? So what, what are your feelings about it?

Harshil Agrawal: Sure. I would say that we have been in the low code ecosystem for a while now. Because WordPress has made it easy. It has taken a lot of abstractions out there. So I think that was, that was the first part, you know, where low codes started, but people didn’t realize it at that point of time because there was still a lot of coding involved.

But if you look at it, from just take an overview of it, it actually abstracted a lot of code from the user endpoint. So the user just had to go ahead, you know, just play around with the blocks in WordPress and then they had a website ready. So that’s where I feel, you know, the journey of low-code started and low-code, and no-code actually

is the ability where, you know, people get the abstraction of the code. So they don’t have to go ahead and write the code by themselves. That’s basically what no code does, but [00:12:00] with low code, it makes it more flexible. So, okay. You don’t want to write a code? That’s completely fine. Here is the abstraction.

If you want to write the code, if you want to extend the functionality of the project or the product, you can go ahead and write some code at this particular stage. So that is what is the major difference, I think between low code and no code and I have seen developers are now getting more adapted towards low code technology as well, because it provides you an abstraction.

It saves you a lot of time of writing that code again and again, why would you write a code when someone has already done that? Right? It does not make sense. And that’s what low code is trying to solve.

Becky Peltz: I kind of see it, like building up to that, the whole sandbox technology where there’s lots of code snippets out there.

So if I want to write code, I do not start from scratch. I go Google somebody else doing it, grab their stuff, and then I start changing. But now to have it more formalized, you know, and present it as this is good low code, no code. It will [00:13:00] be a great starting place. I think it helps everybody.

Sam Brace: Now, one thing that I wanted to ask you about with that is, so I think there’s a misconception that I’ve definitely seen in the low code, no code discussions where for like, as we’re pointing out very clearly with what you’ve said, what Becky just added on.

It’s where no code to low code tools are used by developers. And I have seen it where like people are saying, well, low code and no code should be used by people that don’t know how to code. It’s a way for them to use this tool. And I disagree with that. So it sounds like you do as well. Am I right about that Harshil?

Harshil Agrawal: Yeah. Yeah, I agree with that because, we as developers, we are also humans, right? We also want to find solutions that make our lives easier. If it’s a product that is no code or low code, why do we discriminate it against it? If it’s making our life easier, right. I feel we should be open and see if it’s working for us. If it’s not working, then that’s a different thing.

Sam Brace: No, absolutely. Absolutely.

Becky Peltz: I noticed that you got into the NoCode [00:14:00] November event. So can you talk about that a little? Like how, what kind of projects and what you did there?

Harshil Agrawal: So the NoCode November event was a one month long hackathon, which was organized by Typedream. That Typedream is again a no code automation platform to build websites, but they organized this event and involves participating organization with them.

And I really like that event, because you got to build a project and not just build a project, but you also had to, you know, share it with the world. So oftentimes at hackathon, we see people build a project and it stays within the hackathon community and does not get out. But with that, they had a strict rule.

You have to publish it on Twitter or, you know, launch it on Product Hunt, which kind of attracted me to be a part of it. And the other thing is they were offering free credits up to for certain tools. And I was like, I want to try out these tools. I want to try it out, so I might [00:15:00] just participate and get those coupons.

Becky Peltz: Yes. There’s nothing like a free tool to get you going.

Sam Brace: I love what you just said Harshil because like you’re saying, like, it’s so easy to get these products up and running. You just have to use product time. I mean, obviously you can get this things out there and I’m just, I’m thinking back to like, you know, 20 years ago and we have to

spin up Rackspace servers and all this stuff. Like it’s so easy to get projects out nowadays. So I, I’m so excited that we’re at a stage of innovation, which you’re obviously a part of, and you’re able to get things out through hackathons and get things built out so easily. It’s great to see where things are ultimately going.

So thanks for being a part of all of that and giving people all these ideas on how they can get their projects up and going too. One thing I wanted to ask about is your specific project. When I saw this being talked about on blogs, when I saw it popping up on Twitter, I was like, oh, this is such a fantastic idea.

Because as a developer, you’re developing so many different projects, you’re doing so many commits. You’re [00:16:00] doing so many pull requests over the year. How do you summarize all of that work in a way? And you did that with this GitHub wrap project. And I just, I thought it was genius. So tell me more about it.

Why did you decide to go down the path of building this thing out?

Harshil Agrawal: Yeah, I’ll be honest. It wasn’t an original idea. This idea was inspired by Spotify Wrap. So if you have used Spotify, you might have got those notifications from Spotify at the end of the year. Like, hey, here is your wrap, which summarizes your listening habits.

I never have tried out Spotify wrap because I believe if I tried it out, it is going to influence my listening habit and, you know, I might be influenced in some way, but I was like, but this is a cool idea, right? I get to summarize what I have done in the year and share it with the people. So it’s like, why not take this and, you know, do something around the open source because being an open source contributor, I always like to talk about open source and encourage people to do that.

So I went ahead and, you know, [00:17:00] tried to look up at a couple of projects and there were already a few of them similar to GitHub Wrap. So I was like, huh, do I want to reinvent the wheel? Do I want to create it on my own and do that. But then I was like, these projects are amazing, but they are build with code.

Why not go ahead and challenge myself to build it using low code tools and see how that goes. And that’s how the project was born.

Becky Peltz: I think it’s a great idea. I know when you’re a developer, it’s important to put on your resume or somehow share your work. And a lot of hiring managers look at your GitHub record, you know, how active is this person or whatever if you’re in GitLab.

But the thing is, this gives you like an instant summary, and it’s a link that you can share. And I mean, it just satisfies so many features that help you to share your work.

Harshil Agrawal: Yeah, exactly. One of my colleagues gave me the same feedback. Like he, he really loved the project and we were brainstorming more ideas on what we can do on top of this.

And this is the exact same [00:18:00] idea that he shared with me.

Sam Brace: Yeah, I gotta tell you, I think you’re onto something Harshil. Like I’m a Spotify user, and I have to tell you, Spotify Wrap influenced my music listening completely. So you’re on to something here. I’m like, uh oh, I’m listening to too much of that.

That’s a little embarrassing. So yeah, I get that completely, but in the same sense, because they do such a great job of summarizing all the content and it’s literally just, you know, pulling data and compiling it. Very much, like what you’re doing with your project. It is where it helps you to reflect and say like, oh, wow, I really did do a lot this year.

Or maybe I should have done more. So I think there’s lots of ways this can be used. I think Becky’s definitely onto something where being able to provide an instant result for hiring purposes or contract purposes. But I mean, I think the use cases for what you’ve developed are endless for the overall developer community, especially those that are doing open source contributions that you have been doing.

So, kudos to you, even before we show people the project. I’m excited [00:19:00] to get this thing up and going. So, Harshil, do you want to show this thing off? Walk us through it a little bit.

Harshil Agrawal: Sure. I’m excited to show this, so let’s see if I can grab it.

Becky Peltz: Right.

Sam Brace: Perfect.

Harshil Agrawal: Yes. So this is the website for, low code land slash GitHub Wrap. This is kind of a very simple UI and I’m surprised that people really love the UI because it’s very simple. And I am not a designer. So for me, I was like so happy when you know, people say to me like, hey, this is something that we love.

This is the wonderful UI.

Becky Peltz: I like the simple UI myself, if it’s to the point. And I think everybody should put that Product Hunt and tweet on their app. So that’s a good idea. I know it was to satisfy your experience in the hackathon, but it’s a good idea.

Harshil Agrawal: The tweet idea was a bit different and I am going to jump into it, but let me just quickly show over here.

So a user, [00:20:00] they can enter, their GitHub username, click on Wrap It. Some automation is going to run behind the scenes on n8n. It is going to generate this wonderful image, which gives you all these stats that you have. So it gives you the number of commits that you created, the number of issues that you created, pull requests, new repos, all that you have done in just one year.

Becky Peltz: Yeah, it’s just a really nice clean summary and it introduces you to the person visually, as well as the work they’re doing.

Harshil Agrawal: Exactly. I’m just going to talk a bit about the tweet button, because that was something interesting and I think might be relevant to what is going on nowadays. When I created the idea was like, okay, this is wonderful.

This is up and running, but how can people share this? Because if people don’t get to share this, I might not be able to reach out to a lot of people. So that forces an interesting challenge that I faced. And I’m talking about this, because if you talk about Wordle, the game [00:21:00] that is kind of popular right now, right?

Yeah. So it has this feature of sharing it on Twitter and that’s how I think it got a lot of more popularity. And every project out there, I think, you know, if you have that feature that you can share what is being done on that project, I think it can help you get more traction over there.

So if I click on tweet, it creates a wonderful tweet, and it will generate image. For me, it does not generate an image, because I did a lot of testing. And in the case, it still uses the old data that it has, but will generate a beautiful image with the link so that people could easily go to the link and get it on the website as well.

Sam Brace: That’s one of the big powers of what Spotify Wrap did was that they made it super shareable. Take that image and you can put it on Facebook and Twitter and Instagram and all these things. So like, you’re onto something here because, well, I don’t necessarily think that sharing off your GitHub pull requests and commits on [00:22:00] Instagram stories is going to be the best thing to do.

But in the same sense, I think what you’ve done here, you’re having an instant tweet option. You’re picking up on the best things about what Spotify did with a wrap project and making it for this developer purpose. So once again, that’s fantastic. Really, really smart move on your part.

Harshil Agrawal: Thank you.

Becky Peltz: I also like your URL, low code land. It’s got kind a cool jazz vibe to it.

Sam Brace: So let’s walk through the workflow. How do you get this to actually all take place?

Harshil Agrawal: All right. So there are two workflows that are running behind the scenes and the first workflow is the workflow that would generate the HTML page that is shown to the user. Now, I am using a WebHook node, which would listen to this incoming request, process that request,

and then output something. Now the wonderful thing in this webhook [00:23:00] is you can send the response as a binary file as text or as JSON and you can even send an HTML file or just the HTML code, which I didn’t do until last summer. And when I knew, I was like this is amazing. So I can have kind of a whole website running on n8n.

It would be the entry point for that. So basically creating a whole web server with n8n. So whenever a request comes in, I set some information, such as the title, the description, the URL, and the username. And again, the og URL is the Open Graph URL. Now these are all the information that goes into the meta tags, which helps you creating those SEO tags and make this more searchable on the internet.

Becky Peltz: Just to be clear. This is your product, the n8n right? This is, yeah, this is the automation product, so that you can set up logic [00:24:00] with your web hooks and the data that’s being generated. Yeah. But it seems too, because you can generate HTML that it’s almost like a web server.

Harshil Agrawal: Exactly. So over here, if you see. I have hardly any code, all the code that I have, it’s just for the HTML pages, and I am using just the code nodes of n8n here to interact with different services and create the code for my project. Now I am next checking.

You know, if the username is present or not, because now the user might want to, you know, just go to the landing page of the website. So if they want to go to the landing page, this is the HTML code for that. Now, as I said, I’m just writing the HTML code. But apart from that, all that is, you know, being done by n8n.

So I’m using the HTML code over here and then returning back to the user. But if the incoming request contains the username, now we want to do something. We want to get the user’s information [00:25:00] from some place. We want to generate that image and then we want to return that image. And this is what the other workflow does.

So if there is a user name, we run another workflow, which would make a call to that workflow. So over here, this is the workflow that does all the processing. So again, this is a webhook node because it is listening to the incoming request from the previous workflow. We are passing on the username.

So in GraphQL node, I am querying the GitHub GraphQL API to fetch the information, passing on the username that is coming in from the webhook node, getting all the information that we need, like the comments that they made, the repositories that they created, the issues that they opened and stuff like that. And then we are passing on this information to the next nodes.

We’re not going to go into a lot of details with all this nodes but what is happening next is we are creating [00:26:00] the profile image for the user. So one thing that I kind of ran into an issue was I had the information, now how do I create that dynamically? I tried out a lot of different base, a lot of different designs, but none of them satisfied what I was looking for.

And then I eventually ended up using Cloudinary. So I am making a call to the Cloudinary URL and passing all the information that I get from the previous node. So we can see the commits, the pull requests, the issues, and everything. And this is using the transformation of Cloudinary. So this then gives me the template image returned with all this information.

But while I was building this, I realized there is one thing that was missing and that was, adding the avatar of the user on the profile image. So if I show you over here, now everyone likes to, you know, have a picture of themselves on stuff like this. It makes it feel more [00:27:00] personalized.

And I ran into a couple of issues when I was doing this, and I was like, huh, I don’t want to ship it without adding this particular feature. So what can I do? So I got back to my team, and I was like discussing with them hey, this is the limitation that I’ve run into. What can I do? And they suggested me of using the added image node in n8n, which is a node that allows you to manipulate images and work with them.

So I use the added image node, which resizes the avatar image, crops them into a circle, and then we append it to the image that is written by Cloudinary. And then this image is finally returned to n8n so that’s kind of the whole summary of this workflow.

Becky Peltz: So if I understand, you’re using Cloudinary to create a text image using the transformations.

Harshil Agrawal: Yes, exactly. So, all the text that is coming in, like the issue numbers, the commit numbers and everything is using Cloudinary.

Becky Peltz: Yeah, because once [00:28:00] it’s in text form, it kind of is easier to just plop it down on a HTML page. That’s really a neat idea rather than sitting around and messing with CSS and stuff.

Sam Brace: Yeah. What I noticed that, because like when I was looking at the transformations, you had all of these various overlays that you’re doing, and you also had it where you were colorizing it. So like, if I look at that, I can see co_rgb, that’s a RGB value that’s here. Yeah.

Yeah. You’re using X and Y coordinates to determine where things should be laid out within the card. And then from there, you’re even defining the font and font sizes all from there, but it’s all being done, through Cloudinary transformations. It’s very slick what you’re doing.

Harshil Agrawal: Yeah. And I really loved the transformation dashboard because

I was playing around with it and I saw, okay, so they also provide an URL for that. So, you know, I took this URL, figured out what are the dynamic values and just changed those. So it really helped me, not to just waste a lot of time in trying out and [00:29:00] digging too much into it, on the dashboard, play around with it, get the URL and just use it.

Sam Brace: When I like what you’re showing here, because as I’m seeing, you’re pulling from the JSON to be able to say it, like suddenly, like the JSON is acting as the variable in this case. Like whatever we’re getting from a JSON commits line, this is what’s going to be published on this part of the card. And I think that’s one thing that sometimes Cloudinary users get stuck on is they don’t think like, what are all the applicability options when it comes to using overlays and text based overlays, like what you’ve done. They think it has to be statically written in where you’re proving very easily,

you can pull from something that has lots of variable aspects to it, like a JSON file. So this is excellent work Harshil. I’m very, very impressed.

Becky Peltz: And you mentioned that you’re using the GitHub GraphQL. Can you talk a little about that? How that helps you out?

Harshil Agrawal: Sure. So I have the GraphQL Explorer open for GitHub. Now, I’m just going to give a brief introduction about what GraphQL is, because I [00:30:00] believe for a lot of people, GraphQL is still very new.

So, traditionally, if you want to get information from an API, we mainly use the rest API for that particular service. Now there are a couple of problems with the rest API. First of all, each endpoint, you know, returns only some sort of information. So like, just say, I want to get the username and the avatar URL.

I might have to hit the user endpoint, but if I want to get the information about the commit, I might have to hit the commit endpoint for the rest API. Now, if I took that approach, I would be making a lot of API calls to the GitHub endpoint, right. And I never wanted to do that.

It would be just insane to do that because of all the incoming traffics that I had on my server. What GraphQL helped me do is make one single request. And in that request, I could define what information I need, and GraphQL in that one, single request would give me the information. So over here, this is just one single request.

And I am asking for the [00:31:00] information that I need, like the commit, the user, the Twitter username, their name, that avatar URL, and all that is just being sent back with just one API call.

Becky Peltz: So it’s kind of like if, for people that use SQL or various querying language, it’s kind of like, you can make a query out of a combination of APIs.

You’re not stuck pulling in every API and sorting through all their data and trying to match it up with some other API data.

Sam Brace: Becky, goodness gracious. That was like the best explanation I’ve ever heard of GraphQL, like being able to break that down in that way. Cause like coming from a bad base administration background and some of the things that I’ve done, like being like, oh yeah, there’s a lot of commonality to GraphQL and SQL.

Wow. I say a light bulb just went off in my brain when you said that. Hopefully that happened for one other listener or a viewer of this program. So good job guys. Very, very helpful. One thing I want to ask you about here, so I know or maybe I’m getting a vibe here that [00:32:00] CloudFlare is involved with this project in some way.

Talk to me about why you would be using CloudFlare with the project like this. Obviously they’re an amazing provider when it comes to CDNs and other things that they do, but how are they involved in this project?

Harshil Agrawal: Yeah. So one of the main challenges was to hide this particular URL. Like if there is a project that people want to use, they don’t want to have such a long URL.

And I wanted to find a way to have a proxy between the main URL that I want to use and my n8n webhook URL. So that’s where CloudFlare helped me. The other thing was, once I was trying out and testing out the project, I realized that a lot of time people, sometimes they would just

add at the rate symbol as well with the username. So not just Harshil1712, but @Harshil1712. Now that is not a valid username. So I wanted to also filter that out. I could have done that in n8n as well, but it would have added [00:33:00] more nodes, and I didn’t wanted to do that.

So I took a look at CloudFlare and I was like, okay. So with CloudFlare, I can divert the traffic to the URL that I want. And I can also handle such use cases or such edge cases where people, if they are trying to use anything apart from this particular thing, they’re going to get this particular page.

So that is what was happening with that. So I can also quickly show you the CloudFlare worker code that I am using. So most of this is the boiler plate code that I got from the CloudFlare documentation. So over here, we have a regular expression, which checks if someone is using the at the rate symbol and down below. I set in the handle request function, what is happening is, please have a parameter that is none.

So if nothing is passed, this parameter gets added to the URL, gets back to n8n and n8n says, okay, nothing is passed. And [00:34:00] it sends up the landing page to the user. Over here, you can see that we are checking, you know, if they have added the @ symbol or not and stuff like that. And then we are simply sending all that content that was returned from n8n to the user.

Sam Brace: But also this is very clean JavaScript code.

Becky Peltz: Kind of looks like a Lambda function. And so they’re letting us put Lambda functions out on the CDN, it looks like. Is that correct?

Harshil Agrawal: Exactly. I think that’s kind of a good way to explain CloudFlare workers.

Becky Peltz: Yes, sorry to interrupt Sam. It is really clean code.

It’s very easy to read. So basically you get line 25 and you get a none, your n8n will just send out your home landing page. Yeah. Yeah. Just render that HTML. Otherwise, it’ll go in and process it and put together what you need to get an actual wrap. So, that’s [00:35:00] really neat.

You have many levels in this application, but always very small amounts of code, which is nice. Exactly. Like a page worth.

Harshil Agrawal: And as I said, they already had the code on the documentation page. So all I had to do was make some changes here and there to adapt it to my use case. It was mainly copying and pasting.

Becky Peltz: And as I recall reading this, you did this all for free. Like every piece of this is. Yeah, that’s really cool.

Sam Brace: Also, I mean, that points back to what I was saying earlier, too. You didn’t have to spin up servers, you didn’t have to worry about all of that. Like it’s where a lot of this seems to have been done, because if I know this correctly, you’re using actually the free plan of Cloudinary to get this done, which is pretty awesome that you’re able to get it done without having to spend a single dime on that aspect, which proves once again, our peers at Cloudinary are hopefully generous with the application of this, but with something like CloudFlare, am I correct also that you can use [00:36:00] everything that you were showing with CloudFlare also on their free tier?

Harshil Agrawal: Yeah. If I’m not wrong, they allow you to have two worker script per project for free. I just needed one worker script to handle this. So still using CloudFlare for free, haven’t paid a single dime.

Sam Brace: Oh, gosh, I gotta say Becky, hopefully you’re agreeing with me on this one, but that’s pretty amazing. Like the fact that you can spin up such a helpful project, not have to spend a dime other than just, you know, your time, obviously Harshil is worth something, but in the same sense, you didn’t have to put actual, like monetary dollars, cents, coins to anything.

So this is great. I’m really inspired by this.

Becky Peltz: I think the fact that you’re using code that has been shared to you by, you know, the companies that produced it, it’s sort of tested in that sense. So you don’t have to spend a lot of time writing tests and things like that. Here’s what works, if you use it, it’s going to work for you.

Sam Brace: So, one thing I wanted ask you Harshil, [00:37:00] so whenever I’ve done development projects, when Becky’s on them, probably you too, there’s always a roadblock. There’s something that you didn’t anticipate. And I know you touched upon some of those things, like when you were saying like someone using the at symbol inside of their GitHub and like that’s probably not something you were like, oh yeah, I already have a plan for that.

It’s probably things you, you figured out during the development project and people testing it. But what are some like major roadblocks that you feel like people might face with any of the technology that we’ve talked about here today? And maybe some details on how you overcame it.

Harshil Agrawal: So one of the major roadblock that, I faced was when the project started getting a lot of traction on Twitter.

Few folks from the security community started playing around with it and not in a good way. And they started tweeting and I was freaked. I was like, it’s a weekend project. I didn’t, you know, take security measures, because I wasn’t expecting it to get so much traction. And now you [00:38:00] are doing this to me.

I’m like, I don’t know what to do. I am not someone who has done a lot of work in the security space, so how do I solve this? That was one of the major roadblocks and I freaked so much. I called up my friend who is well-versed in the security space. I’m like, you need to help me out.

I don’t know what should I do? Unfortunately, he wasn’t available. So for 24 hours, I was just reading on the internet, trying to find out a solution. And then I came across this CloudFlare, where you can have firewall rules. So you can set up rules without writing anything. So just telling CloudFlare, okay, if a request contains maybe this thing in the URL, block it. If a request is coming from this particular IP address, block it. And that saved me from, I think, a lot of other malicious requests that were coming in. Even if today I check the logs, I see a lot of people are trying to, you know, attack the website, but because I have those rules in there, it saves me a lot.

So that was one of the [00:39:00] most terrifying challenges that I had.

Becky Peltz: It’s pretty unsettling when people are going after your stuff. I mean, even if you are not taking it personally, you know, it’s still is like, what are they going to do to me? You know? And where will this all end? So it sounds like you were able to create a firewall with CloudFlare, and you didn’t have to pay for that either I bet, huh. Exactly. Yeah. That’s pretty nice. But you still had to figure out all of the things that you wanted to block. It sounds like that took some time to, yeah.

Harshil Agrawal: It did. So the process was just going to the log and understanding what was the repetitive things that people were doing.

What were the IP addresses that were making the same request again and again. And that’s kind of how I started doing it. And then I found a pattern and using that pattern, I created a firewall rule that now stops or blocks all those requests.

Sam Brace: Now, one thing that I’m also thinking of, because I’ve had this also in development projects and also [00:40:00] just other projects I’ve done that have nothing to do with development, but sometimes you don’t anticipate how popular something will be. So like, obviously something like this, like you know, there’s a lot of people that are developers. There’s a lot of developers that use GitHub. They probably would love to try something like this out.

Did you find like any issues, like in terms of like, oh, there’s too many requests coming in or, oh no, this is getting too big. Like anything like that happening with the project?

Harshil Agrawal: That’s a good question. I am an alumni for a program called GitHub Campus Experts. And I shared that program with my friends over there and the program manager, Juan Pa. He really liked the project and he tweeted about it and that’s how it kind of all started.

So, once he tweeted about it, it started getting more and more traction from the developer community. And then one fine day, GitHub also decided to tweet it from their official channel. And I, and that’s when I freaked out. I haven’t built this project to scale up. I’m not sure if it’s going to [00:41:00] scale or not, when it’s going to break.

So I was almost every 15 to 20 minutes, I was looking at my server logs. I was looking at the logs at Cloudinary to make sure that I have enough credit. I was looking at CloudFlare to see, you know, if anything is breaking over there. So that was a kind of interesting time that I had with the project when it got really popular.

And the major thing that I was worried about was, the expense that I might have at the end of the month when everything cools down and I was like, yeah, I’m going to have a terribly long invoice coming in for me.

Sam Brace: It’s such a good question. Like when you’re ever building any project is like, can this scale and am I ready for it to scale?

Right, and we deal with it all the time where like somewhat, like I remember we’ve had people that are using Cloudinary, and they get suddenly featured on Shark Tank or other these programs, like they’re these awesome startups. And then suddenly, they peak. And we’re like, we had no idea that we would have these overages or we’d have all these situations.

And of [00:42:00] course we take care of it. We help them out. But you’re absolutely right. Sometimes it’s unanticipatable based on what you have there, because that one tweet that one influencer that suddenly is like, this is a good idea. Boom, then everything catches fire and it is just like, they put gasoline all over it too.

So I’m glad to see that you had the concepts for it. Also, really glad to hear that even with a lot of influencing factors, you still didn’t have to pay any money, so good for you. Way to plan that out in as much as you possibly can.

Becky Peltz: It speaks to the cloud too, where you’ve got all these different pieces and they’re all doing

their chunks in the small way that they each do and put it all together and it still comes out free. That’s really good.

Harshil Agrawal: Exactly. I think I was also lucky enough because I had gathered a couple of extra credits for Cloudinary by doing the courses and, you know, following all the steps that they had.

And this route just helped me with getting the credit, which also helped me understand Cloudinary better because I [00:43:00] was playing around with Cloudinary. I often use it in a couple of projects, so it also gives me a good insight into the product.

Sam Brace: Wonderful. And I love that you’re using our courses.

That makes me happy. So, one thing I wanted to ask you, so obviously, you’re doing a lot of great work. This is just kind of a sample of the things that you are doing. As we pointed out, you’re contributing to lots of open source projects, you’re doing a lot of great work for your employer, but it’s also where. I would love for people to figure out ways to be part of that. Like, can we see all the great work that you Harshil are doing? Where are you really active? Where can people follow more about what you’re up?

Harshil Agrawal: So I am really active on Twitter and I’ll be honest.

I don’t always talk about tech stuff on Twitter. So be aware if you’re following me on Twitter, but but that’s the best place to get in touch with me, see what I am doing. And I also often share all my learnings on my website. So, if you want [00:44:00] to read about what I am doing, what I have learned recently, and if you want to learn that as well, you can always go to my website and that’s harshil.dev.

Becky Peltz: I like that you’re keeping track of bandwidth saved, all the things that could add up to cost you something.

Sam Brace: Perfect. And frankly, look at this, like your UI here. Once again, it’s simple, it’s minimal, but it’s so clean. Like I gotta tell you Harshil, you might find a way to get you involved with UX and UI one day.

Cause you’re doing a good job with everything you’ve been developing. This is as clean as I possibly can imagine for a personal blog, personal website, personal portfolio. So I’m impressed with that factor alone too. Becky, any final things that you wanted to ask Harshil before we let him go?

Becky Peltz: Well, the only thing I had asked is it would be fun for us to run it against one of our team members, run that project against that.

So if I could share my screen, we have a new team [00:45:00] member here, Jen Brissman. She was actually on our program last year and now she works here. So I’ve got Jen Brissman, and we’re going to wrap it for Jen, and see that she has been very active. She just learned to develop during the pandemic.

And she’s been working away here and working on new code for us, as well as going to be presenting. But anyway, I really appreciate the fact that we can see this so clearly, and I’m encouraging anybody who is working on GitHub to wrap it and share it. So I think it’s a really neat project.

Sam Brace: I agree completely, completely.

And I’d love to see all the great work that Jen on our team has been doing, you know, before Cloudinary, while at Cloudinary. So, and actually for Cloudinary now, too, so that’s awesome. So Harshil, keep up the good work and keep in touch. We can’t wait to show off the latest projects you’re working on, hopefully in a future program or if nothing else, we’ll make sure we tweet about it.

I [00:46:00] think you’re doing some pretty awesome stuff in the dev space right now.

Becky Peltz: Yeah. It’s really nice talking to you too. Very, very inspiring.

Harshil Agrawal: Thank you. Thank you so much for having me. It was wonderful talking to you all.

Sam Brace: Harshil is a wealth of information and honestly, very nice guy as well. I think this is a good, good conversation. Becky, when it comes to the key things that you felt were important from what we’ve learned from Harshil today, what stands top of my mind?

Becky Peltz: Well, there were so many things here, you know, I think it, the one thing is it’s a great little gift to developers, because it lets us quickly gather up all the data from GitHub about our own work and put it in a really nice little webpage that we can share. So it’s kind of like Harshil’s gift to us in a way.

Sam Brace: It’s one area that I almost wonder how deep this could go, because if I think about like very developer focused organizations, let’s say like Cloudinary, let’s say Stripe, like Twilio, and they were saying, we want to show [00:47:00] all of the amazing work, all the pull requests, all the repositories, all the things that our developers are doing.

Could we do this project and then create these beautiful reports off of it to be able to show off at work. So I think the legs that what Harshil has developed has a lot of opportunity. And I don’t think this is just for personal developers, I think it could even be done at the large enterprise level based on what we’re showing here, because there’s a lot of cool ways to show off the data.

Becky Peltz: Yeah. I mean, what if we could all put together something like that about our work for the entire year when it’s time to get a raise or something like that? So, yes, I think I could see a lot of extensions to this. It was also really fun to learn about low code and see how Harshil could kind of create these steps that pulled in different tools and services like Cloudinary.

So essentially it turned out that Wrap is a Cloudinary image hosted on a webpage. So that was really cool [00:48:00] to see that he thought of that and laid it out so nicely.

Sam Brace: I agree it, and I think that’s one thing that Harshil definitely showed is that yes, he was able to develop this, but he developed it as part of a low code offering.

So if someone wasn’t necessarily a developer, they could still maintain it and still work with the project. And I think that’s one area that, at least I’m seeing when it comes to the buzzword that is low code, the buzzword that is no code. There’s some misinterpretation to that because sometimes that means that low code is just meant for developers and or no code is just meant for marketers.

Low code is just meant for people that don’t like to code. I think it’s a missed concept because as we’re showing developers absolutely can use something that’s low code and no code where, because it has a user interface on it, it’s not necessarily bad by any means. So I love the fact that we’re using something that has very clear drag and droppable content.

It’s very [00:49:00] easy to see the flow of it. Harshil did a very good job with this, and I think more people should be embracing low code and no code tools, just like the ones that he was able to develop.

Becky Peltz: Yeah. Well I know I’m noticing companies all over are creating workflow products and they’re marketing them as workflow.

And they’re basically like this, so it is definitely a thing to keep an eye on. So, what about Harshil’s product got very popular and got even a little scary for him. He was getting called by GitHub because so many requests were coming in. I mean, is this a good thing?

Sam Brace: I think it is. I mean, back to my point.

Like if you’re popular, you’re going to be recognized by some of these larger companies. It might be able to help them to grow, but in the same sense, it shows that people really do want data and sometimes it’s not easy to come across it, or it’s not even something that comes top of mind, like, oh yeah, I remember I did work on that in February and it consumed a lot of time. Because you’re thinking about always what’s next, what’s right in front [00:50:00] of you and being able to combine all of that data into an easy retrospective like this.

I think it’s where, yeah, it makes sense why it was popular. It can make sense why people were using it and wanting it. Anything it’s only a good thing, but it’s also where it can be a double-edged sword, because it’s where if you create this just as a personal project for yourself, and there was no growth plan, obviously attached to that, you just wanted a fun way to visualize data, then yeah, it could come off a little bit crazy.

You’re like, oh, where is this coming from? I never expected everybody to want this, but I think Harshil definitely found a little bit of a disruptor here to get people to think about things in a different way.

Becky Peltz: Yeah and developers are now more into sharing on social media. I mean, Twitter is a huge place to find out things about what’s going on in the world of development.

So this is one thing that you can share about yourself in an easy way.

Sam Brace: Absolutely, absolutely. I mean, we see like at the end of the year, when Spotify comes out with their wrapped, you see tons of people putting on their Instagrams and [00:51:00] Twitter and saying like, these are all the songs I listened to, or this was the artist I’ve listened to the most.

Wouldn’t that be great, if we also saw this happening with Harshil’s project saying like, look at all the cool repos that I built over the year. Like that would be pretty slick, and of course, we got to talk to the guy that made it all. So that would be a really cool thing.

Becky Peltz: And, you know, hiring managers, look at that little chart that he’s got and if you’re applying for a job, you can run this anytime of the year and share it.

So it’s a neat little tool.

Sam Brace: And speaking of hiring managers, one thing that’s actually happened in the world of Harshil, which I love is while n8n, great company, and obviously we showed a lot of it in this episode, Harshil actually went on to go work for one of Cloudinary’s best technology partners:

Contentful. And they’re a fantastic company when it comes to the content management system side of things, especially for headless CMSs. So it’s to say, keep following what Harshil is doing, because he’s definitely making some waves in this space. And of course also can’t [00:52:00] say that our work that we’re doing is to plug a certain person or a certain program, but we also really enjoy the work that they’re doing at Contentful across the board.

So always a company to look at if this is something that you’ve never heard about before today. Excellent work Harshil, congratulations.

Becky Peltz: Congratulations.

Sam Brace: Excellent. So now that we’ve given the world, our key takeaways or things that we took away from this episode, Becky, we also of course want people to know that if you are happy with this episode, you had a good experience, then like and subscribe at all the places where we typically host all these DevJams podcasts.

That includes our Cloudinary Academy, but also on large platforms like Spotify, as well as Apple podcasts, Google podcasts, and many other places. So we hope that you had a great time. On behalf of everybody involved with this episode, as well as all of Cloudinary, thank you for listening to this episode of DevJams, and we [00:53:00] hope to see you at the next one.

Take care. Bye.