DEV Community: Samarth Jajoo

Flappy Bird, in a new, super easy game framework 🐦

Samarth Jajoo — Sat, 24 Aug 2019 08:04:20 +0000

Make flappy bird with Python Play

Flappy bird is one of the classics - and as you'll see, super easy to create, especially when you use the Python Play library developed at repl.it!

If you haven't played flappy bird before, try it out on flappybird.io!

🎓 So, how exactly does flappy bird work?

There are two objects which matter in the game - the bird and the pipes. In the demo above, the bird is the yellow circle, while the pipes are the blue rectangles.

The bird remains in the same x position for the entire game, but can move up when the player presses a key, and continues to fall due to gravity.

The pipes are two rectangles with a gap between them - the bird needs to get through the pipes without touching them.

🛣️ Get started

Let's begin by forking repl.it/@jajoosam/play-start - Which is just a python environment with the play dependency installed.

Let's start off creating flappy bird by creating a yellow circle to represent the bird:

bird = play.new_circle(
    color='yellow',
    x=play.screen.left + 100,
    y=play.screen.top - 40,
    radius=30,
)

Running that code will result in a yellow circle, close to the top left corner of the screen with a radius of 30:

🌎 Physics is... easy!

We want our bird to be affected by gravity, and bounce back up when it falls to the bottom of the screen. So let's create a whole physics engine to do that!

lol jk, just add this one line to your code: bird.start_physics()

yep, that's it. really!

If you run your code now, you'd see a yellow circle falling down, and bouncing back up! We want to be able to make our bird flap though - make it jump when we want to.

We can use play.repeat_forever to run a function every frame of our game - and in this case, if the up arrow key is pressed, our bird's y coordinate increases by 7.5

@play.repeat_forever
def do():
    if play.key_is_pressed('up'):
        bird.y += 7.5

🚬 Let's roll the pipes

We're going to create pipes in sets of two, for blocking our birds - and store all of them in a list.

Near the top of your code, add a new line to create this empty list.

boxes = []

We want the two pipes we generate each time to have different height, and a gap in the middle. We also want to generate the next pair of pipes after a random duration, to make the game more unpredictable.

It'll be very useful for us to use python play's random_number function here.

# Returns a integer between 300 and 500
play.random_number(lowest=300, highest=500)

# Returns a float between 1.0 and 3.0
play.random_number(1.0, 4.0)

Add this entire block of code, just before play.start_program()

@play.repeat_forever
async def block():

    # height of the top block
    top = play.random_number(lowest=300, highest=500)
    # height of the bottom block
    bottom = play.random_number(lowest=300, highest=500)

    # creating the top box of width 50, emerging from behind the current screen
    boxes.append(play.new_box(color="blue", y=play.screen.top,
                              x=play.screen.right+50, width=50, height=top))

    # creating the bottom box of width 50, emerging from behind the current screen
    boxes.append(play.new_box(color="blue", y=play.screen.bottom,
                              x=play.screen.right+50, width=50, height=bottom))

    # creating the next box after a random duration between 1 and 4 seconds
    await play.timer(seconds=play.random_number(1.0, 4.0))

This code is inside an async function - which is why we can use the await keyword to delay each call by a particular duration, with play.timer - this lets us create new boxes at an interval!

With play.new_box - we create a new pipe and then append it to the boxes list too. Try playing around with the parameters we supply to this function. they should be understandable!

But if you run the code now, you'll notice that everything is the same as before 😕

🖥️ Bring the pipes to the screen

Since all our pipes are in the same boxes list, we can move all of them pretty easily, by looping over the list.

Adding this block to your code, under def do(): makes the boxes move through the screen!

for box in boxes:
        # make the box move to the left
        box.x -= 1

This is what you should see when you hit run!

🤔 But... when do you lose?!

I'm really going to sell you on python play by explaining how we can detect collisions.

bird.is_touching(box) - that's it. No cap 🧢

In our same loop, where we're moving the pipes to the left, just add this condition block:

if bird.is_touching(box):
            box.color = "red"

If the bird ever touches the pipe, it's color shall be red!

Also add this block in the loop:

if(box.x < (play.screen.left-50)):
            boxes.remove(box)
            box.remove()

We're just preventing memory leaks with this - if our pipe is out of the screen, let's just remove it!

🔮 Things to hack on

Use pixel art of a bird instead of the yellow circle 👨‍🎨
Restart the game when the bird touches the pipe ☠️
Add power-ups to the game 💪
Add a live score to the screen 💯

Be sure to put down any questions or improvements down in the comments 💬

And here's all the code for you to go over again - I've annotated it for you too 😄

An ML app you can build with JS, and without the math 🙈

Samarth Jajoo — Tue, 11 Jun 2019 22:26:33 +0000

Demo ⏯️ Code 👨‍💻 Video Walkthrough 🎦

Machine Learning is a super cool way to build AI apps - but I won't lie, it is a lot of math. Luckily, thanks to ml5.js - we don't need to spend months understanding ML, we can apply it and develop some cool uses in our app within just a few hours 😄

This is a guide to build a feature extractor - something that can get a video stream from your webcam and predict what it sees, once it is trained with a little bit of data - just like in the video above!

🍴 Forking the frontend

I don't want to waste too much of your time with the frontend I used for this app - I think it'd be much better if I skipped right to the JavaScript, and logic.

You should fork this repl - https://repl.it/@jajoosam/feature-extractor-start - so that you have the HTML already there! It's essentially just a few divs for holding the video and some other text, along with some buttons to control our app!

I've commented everything (except the CSS 😛) - so you should be able to go through the frontend and understand the basic layout of the app in a few minutes. Once you're done, head over to script.js

✏️ Declaring the variables

We're going to have quite a few variables to declare, so the first thing we're going to do is create them.

Our app is going to have a lot of functions, and it's important that all of them can access the variables - which is why we shall declare right at the start of our code

var featureExtractor, classifier, video, loss, redCount, blueCount;

redCount = blueCount = 0;

I'll give you an overview of what these are for, but you'll understand them much better as we continue building our app.

featureExtractor and classifier are variables we're going to store and initialize machine learning models in.

video is where we're storing the webcam stream, while loss lets us know the progress of how far our on feature extractor has been trained.

Finally, blueCount and redCount are counters for how many images there are in each category - and we initalize both of them with a value of 0, in the next line.

🛠️ The `setup()`

setup() is a function which shall fire up as soon as our code is ready to run. Bacause of using p5.js, our code is pretty readable and easy to understand here.

function setup() {
    // Tells p5 to not automatically create a canvas element.
  noCanvas();

    // Starts capturing a video feed from the webcam
  video = createCapture(VIDEO);

    // Puts the video stream into the div in our html, with ID `video`
  video.parent('video'); 

    // Initializes a feature extractor, yet to be trained - from ml5.js
  featureExtractor = ml5.featureExtractor('MobileNet');
  classifier = featureExtractor.classification(video);

    // What we're doing next - setting up buttons!
  setupButtons();
}

This code goes in your script.js file right after you declare variables - essentially, it gets a video stream and displays it on our page, inside a div with the ID video. We also make some functions using the ml5.js library here, and pass the captured video as a parameter - you'll see what we do with these soon, but there's still a little more setup left!

As you can see, at the end of setup(), we call setupButtons() - the function we're going to make next. Here, we're adding event listeners to buttons in our HTML - so we can run functions when they're clicked.

Here's all the code we write for the setupButtons() function 👇

// A function to create the buttons
function setupButtons() {

  buttonA = select('#red');
    buttonB = select('#blue');


    
      buttonA.mousePressed(function() {
         redCount++;
        classifier.addImage('red');
        select('#redCount').html(redCount);
      });


     
      buttonB.mousePressed(function() {
         blueCount++;
        classifier.addImage('blue');
        select('#blueCount').html(blueCount);
      });
    
  train = select('#train');
  train.mousePressed(function() {
    classifier.train(function(lossValue) {

    // This is where we're actually training our model

      if (lossValue) {
        loss = lossValue;
        select('#info').html('Loss: ' + loss);
      } else {
        select('#info').html('Done Training! Final Loss: ' + loss);
                select('#train').style("display", "none");
                select('#predict').style("display", "inline");
      }
    });
  });

  // Predict Button
  buttonPredict = select('#predict');
  buttonPredict.mousePressed(classify);
}

That's the largest art of our app, and I'm going to break it up into several parts to make it easier to explain!

🧙‍♂️bUt wHaT Do tHeSe bUtToNs dO?!?!?!

DON'T PANIC.

Let's start off with this block:

buttonA = select('#red');
buttonB = select('#blue');    

buttonA.mousePressed(function() {
    redCount++;
    classifier.addImage('red');
    select('#redCount').html(redCount);
});

buttonB.mousePressed(function() {
    blueCount++;
    classifier.addImage('blue');
    select('#blueCount').html(blueCount);
});

buttonA and buttonB are nothing but the two different buttons we have in our app!

With .mousePressed() we're defining what happens when any of these buttons are pressed - which is:

Increase the count by 1, using the ++ operator
Capture the current frame from the webcam videom and add it to the classifier, with classifier.addImage()
Update the count on our app by changing the button's text, with .html()

Next up, we have this whole block - where we train the classifer itself:

train = select('#train');
  train.mousePressed(function() {
    classifier.train(function(lossValue) {

            // This is where we're actually training our model

      if (lossValue) {
        loss = lossValue;
        select('#info').html('Loss: ' + loss);
      } else {
        select('#info').html('Done Training! Final Loss: ' + loss);
                select('#train').style("display", "none");
                select('#predict').style("display", "inline");
      }
    });
  });

When the Train 🚋 button on our app is pressed, we call classifier.train() - and with each iteration, the function we supply there is called - which is why we see the Loss value keep changing.

When the Loss value is 0, then we hid the Train 🚋 button, and show the previously hidden Predict 🔮 button!

The last 2 lines of the setupButtons() function are about the predict button:

buttonPredict = select('#predict');
buttonPredict.mousePressed(classify);

It seems like we're calling this classify function - which is what we're going to build next!

Keep going, we're almost done 💯

🔮 Predictions, and showing results

Our classifier() function is pretty straightforward - this is all we do:

function classify() {
  classifier.classify(gotResults);
}

We're just telling the ml5 classifier to classify the current frame in either of the categories (🔴 or 🔵), and send the results to the gotResults function - which brings us to the final part of our app!

As long as the classifier doesn't send us an error, we change the entire page's background color to either red or blue - and then call classify() again, which keeps our code running forever, and the predictions keep coming!

function gotResults(err, result) {
  if (err) {
    console.log(err);
  }
    select("body").style("background", result);
  classify();
}

That's all the code we have to write to build the example feature extractor. I highly recommend going through the final code so that you can see how everything fits together well - I know there are quite a few functions too keep track of, but I've commented everything to make it easier 😅

Now go ahead, try it out! Here are some things I did to see if the feature extractor would work (it did!) 👇

Keep my head in the left in 🔴, and right in 🔵
Make a ✌️ in 🔴, and a ✋ in 🔵
Wear different colored 👕s in 🔴 and 🔵

Let me know other cool things it worked with 👀

✨ okay, but what do I MAKE with this?

There are SOOOOO MANY THINGS you could do! A feature extractor gives you the ability to add this whole other, mysterious way of controlling, and getting input in your app!

Here are a few ideas 💡

A gesture controlled game, right in the browser 🎮
A mood tracker - leave the tab open all day, and train it with different face expressions 🤔
Build your own hotdog or not app 🌭
Build an app which only lets you message others with gestures 💬

👨‍🏫 what else is there?

ml5.js can do crazy things! You can integrate image classification into your own app like I did, find similar words which fit into a text, get a precise skeleton of human bodies and even transfer the styles in images - look at what my picture looks like, when composed with the style of a cool painting 🖌️

You should take a look at the many examples on the ml5.js website - or take a look at Dan Shiffman's videos on ml5.js, he covers loads of things you can do with it - and explains everything with a ton of energy. I highly recommend watching his videos on the Coding Train YouTube!

If you have any questions, feel free to ping me on twitter, or leave something in the comments :)

Show DEV: colorSpace - smart background removal with canvas 🖼️

Samarth Jajoo — Fri, 25 Jan 2019 17:28:16 +0000

Hey all you DEVs!

Just a couple weeks ago, I built colorSpace in a few hours - It was a fun idea I wanted to explore, not even being sure if it was possible at all!

It turned out to be possible, and actually even accurate!

My idea was pretty straightforward - usually, an image with a background has one dominant color to remove. Because of shadows and lighting angles - this color won't remain the exact same across all its pixels, but maybe it'd be possible to measure color similarity somehow 🤔

I googled it - and saw a few stack overflow posts asking the same question, and learned that it was fairly trivial to get the euclidian distance between colors, since they're usually represented in a three axis system eg. R, G, B H, S, L
Y, I, Q - there are some more listed here

That means we can use the distance formula, representing a color as a co-ordinate in the x, y and z axes (I had to google axis plural 😂)

From Brilliant

It comes down add up the squared difference, and finding its square root, i.e:

It'd be pretty simple to do this with RGB colors - but the RGB colorspace wasn't designed keeping the ΔE - or distance function in mind. This means that the euclidian distance between colors in the RGB space will not always correspond to the difference us humans see between the colors.

I DIDN'T give up yet though 😅 Turns out CIE (the W3C of the color world) designed the L*a*b colorspace to be perceptually uniform with human color vision - which means, an accurate and useful ΔE function 🚀

This is what the L*a*b colorspace looks like from the front

From here, it was just a bit of plug and play into JS! I reused the frontend from Santafy - a fun christmas project I'd built 🎅

I found the rgb-lab library which let me convert RGB to LAB, and back. I could also use the ΔE function right within this library!

The color-sampler library needed me to add jquery to the project, but I have no complaints - it works very well, and has a nice UI for color selection 👇

To summarize the code I wrote - It takes an image from visitors, and loads it up into a canvas. From there, a pixel is selected using the color sampler - and all pixels in the canvas are converted to the L*a*b colorspace, and compared to the selected pixel with the ΔE function - if any pixel's color falls within the treshold, the transparency for it is set to 100%

And all that happens in the canvas, completely on the frontend!

If you haven't already, you can try colorSpace here!

The code is fully open source, you can check it out and instantly fork it on this repl 👨‍💻

That's it - I'd love to hear your thoughts and feedback 😄

I'm a 15 year old maker 👨‍💻 For more cool things to make and to stay updated with my progress, sign up for my newsletter 📧

Build a WhatsApp Bot, fast ⚡

Samarth Jajoo — Sat, 12 Jan 2019 04:34:35 +0000

A few months ago, I'd started making chatbots on Telegram - I'd seen some APIs for WhatsApp but they were unoffical and there was a chance for getting your number blocked 📱 ❌

A while ago, I saw that Twilio had an official WhatsApp API. 30 minutes later, I made a Wikipedia bot on WhatsApp 👇

This is a tutorial to help you make a something like this, your own chatbots on WhatsApp - these bots are immediately available to over 2 billion users, and there are so many things possible 🎓

I can't wait to see what you make! Now, let's get started 🏃‍♂️

🔑 Accounts and Keys

First, Sign up for Twilio - it's free and you won't need a credit card 💳

Once you're done verifying your phone number, select Procuts > Programmable SMS and then continue to name your project.

Feel free to skip steps for adding teammates - you won't need that for now.

You must now take note of some authentication keys you'll need for building the WhatsApp bot 👇

The final step - setup your WhatsApp Sandbox here - choose any number, and join your sandbox following instructions on the page.

Aaaaaand you're done with credential setup! Don't worry, that was the toughest part of this tutorial 😛

🚀 Getting Started

So that we don't spend too much time on setup, I've created an environment (with repl.it!) you can use within your browser. Head over here, and wait for a couple of seconds to fork it.

Next, create a .env file - and put in your Account SID and Auth Token, on lines 1 and 2



SID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX # Account SID
KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX # Auth Token

You can see, this environment already has dependencies installed, and an express server set up. We still need to give Twilio a URL to send incoming messages to, though 🔗

Let's go back to the WhatsApp Sandbox, and put in a webhook URL for incoming messages.

This URL must be what you see on the preview panel of your repl.it project + /incoming

We can now finally read messages that are sent to the bot. Navigate to index.js and then add a simple console.log() in your webhook handler 👇



app.post('/incoming', (req, res) => {
  console.log(req.body)
});

When you send a message to your bot, you should be able to see something like this in your repl console 👨‍💻

Building an echo bot would look something like this, using twiml to write a message 👇



app.post('/incoming', (req, res) => {
    const twiml = new MessagingResponse();
    twiml.message(req.body.Body);
    res.writeHead(200, {'Content-Type': 'text/xml'});
  res.end(twiml.toString());
});

But, since we're actually trying to build a useful bot - let's use informative APIs!

🌐 Fetching Information

DuckDuckGo has an amazing, free instant answer API. It takes in a query and returns back a summary from WikiPedia and more.

A few examples 👉 WikiPedia, Macbook Air, Twilio

I spent some time creating a decent parser which usually returns information from this API. Try pasting this code in your repl.it project, and your console should have stuff about Trump in it 😛



var base = 'https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q=';
var query = 'Donald Trump';

request(base + query, function (error, response, body) {
    body = JSON.parse(body)    
    if(body["Abstract"] == ""){
        body["Abstract"]= body["RelatedTopics"][0]["Text"]
      }   
    var msg = body["Heading"]+"\n\n"+body["Abstract"];
  console.log(msg)
  });

Pretty straight forward, right? 😄

🛠️ Putting it all together

To make our actual bot, all we need to do is get the query from our request - which we can get as req.body.Body - and use twmil to send across the data we collected in msg



app.post('/incoming', (req, res) => {
    const twiml = new MessagingResponse();
    var base = 'https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q=';
    var query = req.body.Body;

    request(base + query, function (error, response, body) {
        body = JSON.parse(body)  

        if(body["Abstract"] == ""){
            body["Abstract"]= body["RelatedTopics"][0]["Text"]
          }   

        var msg = twiml.message(body["Heading"]+"\n\n"+body["Abstract"]);
            res.writeHead(200, {'Content-Type': 'text/xml'});
          res.end(twiml.toString());
      });

});

You now have a fully functionaing WhatsApp bot! Send anything you want to know about your bot 🤖 and you should see it respond super fast 💬 ⚡

Adding welcome messages and a little formatting is quite simple, look at the final repl to see how I did it 👨‍💻

🔗 Sharing the bot

For others to use this bot, they'll need to join your sandbox first - and send a message just like you did earlier 👉 join <two-words>

You can create links with this text too - For example this link lets you join my bot 👇



https://wa.me/14155238886?text=join ultramarine-tapir

14155238886 is my bot's number, while ultramarine-tapir is the sandbox phrase.

⚡ What's next?

Now that you know how to build a bot on WhatsApp, try sending notifications to yourself, and building more useful tools! Twilio has loads of other mediums to message through too!

All code for my WikiBot is on Github ⬇️

jajoosam / wikibot

A WikiPedia bot for WhatsApp

WhatsApp WikiBot

\ ゜o゜)ノ

View on GitHub

I'm a 15 year old maker 👨‍💻 For more cool things to make and to stay updated with my progress, sign up for my newsletter 📧

How I went from not knowing how to code to shipping 9 projects in 9 months — all before my 15th birthday

Samarth Jajoo — Thu, 23 Aug 2018 14:30:57 +0000

Hi dev community! I published this on the freecodecamp medium a few months ago, just joined thus community and am reposting!

I’ve been making (a lot of) things for about a year now. Most of my time is spent hacking, building, and learning.

This is the story of how I got started coding. I’ll share how I overcame the challenges of procrastinating and being lost, and how I built nine apps in nine months and discovered what I love doing.

How reading got me into tech

It all started with reading books. I really enjoy reading, so I got my Dad to buy me a Kindle — and I loved it! I used it for about an hour every day for the first six months or so. I even wrote a review for it, which got published by a local newspaper 📰

The 11 year old me had a few ideas to make the Kindle cooler, so I wrote an email to JEFF BEZOS. THIS EMAIL:

How did I know Jeff Bezos’ email? I didn’t. I just tried googling but wasn’t sure what it would be, so I put in all the combinations of jeff and bezos and his initials that I could think of.

One of them must have gone through, because about two months later, my mom got a call asking for me. I had put her phone number in the email.

This was the conversation I remember having:

Amazon Guy (A): Hi, is this Samarth?
Me: Yes this is Samarth. Samarth is my name. You can also call me Sam.
A: Great, I’m name of amazon guy! Sam, you had written an email to Jeff Bezos a while ago, I’m calling to talk to you about that. We would love to hear your ideas about Amazon and Kindle — and it would be great to have you over to our Chennai Office, where we make Kindle and more devices.

At this point, I’m confused about if this is real or if someone is joking with me.

Me: Let me put you on hold for a minute.

Mutes phone, goes to parents. Tells them what happened. They say continue talking.

Me: Wow that would be amazing! Can you give me a few more details?
A: Sure, we’re ready to have you and your parents over whenever you can come this month, and we will book your tickets and your stay. You’ll be coming over to our office, and you can look at some cool new stuff we’re building and even meet the team to share your ideas.

Now I’m sure this is fake, it couldn’t be real… right?!

Me: That sounds great! Can I talk this over with my parents and get back to you?
A: Sure — I’ve written an email to you, just reply back.

I spent the next 30 minutes googling the guy’s name. I looked at different LinkedIn profiles to check if he actually worked at Amazon and if this was actually real. After realizing he really was, I was crazy excited.

Two weeks later, my parents and I visited Amazon’s Chennai office.

I met their team and I saw people at their office who had hacker type screens and were typing some stuff. When I asked the person who was giving me the tour, she said, “It’s Programming” and that they were doing it to make an app for Kindle. I knew what apps were, since the games I played on my iPad were apps, too.

That’s where I think it all started. I wanted to learn how to program to build my own apps.

Catching the programming bug

When I went back home, I googled programming. I got a list of like a million Python tutorials and other stuff that seemed really complex for me to start with. So I forgot about it, and went back to reading.

A year later, I realized that there were all these websites on the internet, and I wanted to make my own. So I googled how to do that, and went on to do a tutorial on codecademy.com. I built a small, quite ugly looking website. It was interesting — I had published something that I’d made, and the whole world could see it!

But I wanted my website to actually do something, and not just be an ugly looking word document on the internet. It turns out I had to learn this thing called JavaScript to make my website “interactive.” So, I googled How to learn Javascript and took all the courses I could find. All of them.

My dad probably spent thousands of rupees on these courses.

I learned loops and arrays and functions and recursions and scopes and loads of other concepts. But what I didn’t learn is what I actually took up coding for. — Making Something.

I think I got so obsessed with learning to code that I forgot why I took it up. When people asked me why I was learning to code, my reply was a terrible, boring because it's an important skill.

It took me more than a year to realize what I was doing, and that happened because of the amazing people I met online in different communities. 🌐

Remembering my “why”

The first community I joined was Hack Club— A group of high schoolers, just like me, who were coding! There were people in Hack Club who started their own coding clubs in schools to teach their peers how to code — but that’s not the part that really interested me.

Hack Club introduced me to this thing called “Shipping” — it means making something, and then sharing it for the world to see/use.Seems pretty straightforward, right? Lots of people in Hack club made their own small projects and then put them up on the #ship-it channel on Slack. They got great feedback and ideas about their apps. 👨‍💻

I joined another amazing community called Feathrd. Again, it was a bunch of student makers who were making some crazy things while being in school! There were people who had 1000s of stars on their Github Repos ⭐ and who had earned actual money from their apps. Wow!

I was super inspired — and then it hit me: I didn’t need to learn to code, what I needed to do was make something and ship it🛠️.

So, I spent three hours doing nothing but trying to come up with ideas about what to make. But I wasn’t able to come up with anything. I was blank.

Getting some inspiration

My first project came to me while I was looking to download a book and get some info about it . I wanted to build an interface to make it much easier and cleaner to do this.

You’d think (at least I thought) that it would be super easy to do, because I’d been “learning to code” for about a year. But it wasn’t.

I had no idea where to start. So I asked on the Slack channels of the communities I’d joined — HackClub and Feathrd. I learned that I needed to use this thing called an API to get data from book vendors, and that they would send me another thing called JSON.

I was super confused (even after googling!). Even though I was a little embarrassed, I asked for a deeper explanation on what those terms meant. Fortunately, people were super nice and helped me understand.

I’d just learned something really important: don’t be afraid to ask for help (once you’ve tried googling).

A week later, I had this terminal app ready, which downloaded a book to your computer! This was my first time shipping something 🚀 and I learned more in a week than I had learned in the entire past year! I had actually made something useful.

TL;DR: go make something instead of taking courses

After my first ship, I built a guide about to learning to code.

I continued to work on my terminal app. In the span of three months, it evolved into an actual web app! And that was when I got addicted to shipping.

After that, I shipped nine apps in the next nine months.

I never intended to make nine apps in nine months. There have been months where I haven’t made anything at all, and there have been weeks in which I’ve shipped multiple projects. That’s because I usually get my ideas by solving an immediate problem I have, or by looking at some cool tech that I quickly came up with a use case for (or both!).

Take Chhota for example — a URL shortener I made in a weekend. I wanted to shorten URLs with my own domain, but didn’t want to have to set up a whole server, or pay $99 to bit.ly. Chhota is a JS script that would fit in a tweet (even before 280 characters!) and shortens URLs by redirecting them to Google’s URL shortener.

For example: jajoosam.tech/#$mR2d becomes goo.gl/mR2d

I built my apps during weekends, or in the little free time I got after school. It wasn’t that hard to get ideas — I had no threshold for working on an idea.

My workflow was:

Get idea ⇒ Share Idea ⇒ Get Ideas about building idea ⇒ Build ⇒ Ship 🚀

Work in Progress

What actually helped me ship consistently was being a part of this community called WIP — Work in Progress 🚧. WIP is a community with some really, really cool makers and bootstrappers — who talk on a telegram group 💬 and keep track of their ship goals publicly.

I became active in WIP after I saw a request for an app from Pieter Levels (!!!)

Woof Wooferson = Pieter Levels

My response was to create an app built in 24 hours called Syncr.

To date, Syncr has gotten me almost a hundred dollars — thanks for the idea @levelsio 😄

Making it all public

I launched everything on Product Hunt,where I got some great feedback and usually quite a few upvotes. I’ve even reached the top five products a couple of times!

Getting shout-outs on Product Hunt was super motivating, as was being on top of Hacker News (which has happened twice 😉 )!

It feels really cool to build something that people like using — and even pay me for! But I create mostly for the fun of it. It feels like an achievement being on the front pages of Hacker News and Product Hunt, and there’s this great dopamine rush every time I ship on WIP.

And then the CEO of Fog Creek and glitch (!! — an amazing tool I’ve used to build almost all of my apps) tweeted at me:

Anil Dash

@anildash

This kid is killing it with his @Glitch apps. So fun to watch! twitter.com/jajoosam/statu…

10:59 AM - 04 May 2018

Samarth Jajoo @jajoosam
My 10th project on @ProductHunt, And 5th on the frontpage of Show HN! https://t.co/cifbPY2WrZ Wrish is a quick autosaving notepad ✏️⚡ which was built in 3 days. 🚧 Progress: https://t.co/9ldLDOuGuT 👨‍💻 Code at: https://t.co/eCnSt00m8i Hosted @glitch 🐟

4 35

As did NameCheap’s CEO:

Richard Kirkendall

@namecheapceo

@yesnoornext @jajoosam @jajoosam do you need a job? ;)

13:59 PM - 04 May 2018

0 13

That was really exciting!

I’ve had a little more than 80k users/visitors according to Google Analytics. The fact that 80,000 people across the world have seen something I’ve made makes me really happy :)

What I’ve learned

I’ve never worked on a project for too long — I’ve always built everything within three months, and most of my apps were built in a weekend or two. I was able to ship super quick because I was always working my way around problems, instead of really trying to address them. I’m a legit Hacker.

The database for all my projects (at this point) is a text file that I read from and write to. That’s what I knew how to do, and I’ve never had any proper sort of authentication on my apps. On the one hand, this is great. It allows me to hack my way around to ship super quickly and build an MVP to see what people think.

But that’s the thing — none of my projects have really moved beyond an MVP. There are two reasons for this:

I’m not patient, and am pretty addicted to shipping something new as soon as I can
I’m using an old toolbox, and I don’t solve problems but only temporarily work around them

Moving forward

I want to change this and build a real, finished product. I’m going to do that by continuing to make loads of MVPs while remaining focused on building a great product. I want it to be something for which I solve the problems and upgrade my toolbox of tech when I need to.

Some cool things I want to do in the future (soon!) are:

Build native mobile apps
Build a smart contract and see what the hype is about
Build hardware projects (I already have a few ideas!)
Build apps that look good 👀
Monetize, and get some nice MRR! 💵

Lessons learned

These are some of the key points I’ve learned (so far!) on this crazy coding journey:

Don’t forget the reason you’re doing something. For me, this was forgetting why I was learning to code. This is probably the reason there’s a two year gap between when I learned to code and when I started building things.
Courses don’t always work (for me at least — jajoosam.tech/code) I think the best way to learn is by making. Learn something by doing it.
Have a community which motivates and helps you, and in which you motivate + help others (WIP + feathrd + hackclub for me)
Document what you do WIP.chat/@jajoosam)
Not everything has to be structured and well built. It’s okay to hack something together and work around problems to build something quickly. (Not for everything though)

So here are the 9 projects!

In chronological order:

If you’d like to hear from me when I launch a new project, write a new story, or some other cool thing ;) — sign up here 👇

https://buttondown.email/jajoosam ✉️

Thanks Vidyadhar Sharma for reading drafts, and helping edit this story.