Breaking in

ACM — graVITas ‘23

28/08/2023–0258 hours

So I got into ACM Web Dev. Yay.

Yay is an understatement, hahahaha.

I remember the excitement and the rush I felt when I saw ACM web dev’s head send me the WhatsApp group chat invite link, and the conversation I had with him about “passion” and “not letting go what you want”. That guy is definitely one heck of a person, love the community I’ve gotten to know through VIT (not mentioning his name because idk what if this blog goes viral or something and he doesn’t want to be doxxed).

But anyways, I’d texted him a couple of weeks ago about wanting to join web dev, and he told me:

Sure. Cool. Cool cool cool cool cool.

I did the next most logical thing I could think of after this — googled “next js freecodecamp”. And oh boy, as I searched more and more about Next.js, I realized how screwed I really was. This framework isn’t like others — it’s well known for supporting server-side rendering, and capitalizes on the principles of ReactJS itself. It also is a framework which intertwines both frontend and backend into one, rather than having a disconnect between the two. It works on the basis of using React components exported from JS or Typescript (which was what we used at ACM), and relies heavily on folder structure for its functionalities. For example, all the API routes (which was our primary task) need to be inside the folder pages/api and will be treated as an API endpoint rather than a page.

The learning… Well, sort of

So I started a tutorial of sorts, but then pivoted to Node.js and then express and then what not. Lets just say I wasn’t the most committed to it. Static video tutorials were never my thing, anyways. So I just kept doing other stuff, and then after a couple of weeks, I decided to try my luck with the web dev head. Not the best of things to do, I know, honesty is the best policy and all — but I needed a hands on project with something at stake to actually learn (shrug). I did what I had to.

There were a few messages sent to see how updated I was with the web dev meetings they had.

And then I got the golden message.

:)

That’s all I’ll say.

:)

The work

I got GitHub access (which feels PHENOMENAL, by the way, being in the contributors list of a repo of this decently large scale), and then assigned myself my first issue.

Before I move on, massive thanks to Garv. He really helped me out with a lot of this, and also let me take the last available easy issue to learn the process.

Also, the way our head works is:

• He will create a list of issues on our repo.
• We have to assign ourselves the issues, first come first serve.
• We have to clone the repo on to our local machines, and work on the issues.
• Once we finish the work, and test it, we can commit the changes to our clone and create a pull request.
• In the pull request, we have to describe what are the sample requests, responses and error cases.
• Head will then check and approve our PR, and after all necessary suggestions are worked upon, he will merge it into the main repo.

Pretty neat and structured way of working, I must say. Really like it.

Anyways, the issue I had was:

Create team route #15

Which is basically an API route to create a team with the team name and team code provided by the user, perform necessary checks, and add it to the database.

The Database

This project uses prisma — a type-safe query builder for Node.js and Typescript. As usual, I had no clue what it was, so back I went to YouTube. Found a really good video by ‘Web Dev Simplified’, which really made things clear.

There was a schema set up, which showed the provider to be ‘postgresql’, which I did change in the end to sqlite, but it doesn’t really matter. I also studied the schema, which had models for user, team, questions etc. The 2 models I had to focus on were User and Team, because I had to create a team for a user.

After a while, though, I felt fairly well-acquainted with the db and it’s functioning, so I proceeded further.

The Code

Somehow, this was the easiest part.

I had a look at a few reference codes, the ‘profile’ and ‘join’ routes created by my colleagues, and pretty much figured everything out. All I had to do was import the API request related module from next (after installing all dependencies), and { prisma } schema/generation thingy from the db, and then export a default asynchronous function having the API call.

Coding the API call was probably the easiest task of them all, especially with Copilor being an absolute Godsend. I didn’t completely rely on it though, I was set on learning from this project. So I coded it myself, with hints from Copilot.

I first added a check to verify if rewuest method was correct, then a check to see if all the queries were present, then a check to see if team name and code clashed with any pre-existing in the db, and finally a check to verify if user exists and isn’t part of any pre-existing team.

If all these conditions were met, I created a new team using prisma.team.create() and connected the members field to the user that had the registration number of the user who was passing the query.

Was pretty straightforward.

The Testing

This has to be the most difficult part of it all.

I had absolutely 0 clue on how to test.

I’ll keep it brief about all my problems.

First, Garv told me to download and use postman.

I did that — and tried running a live server using VSCode’s live server extension and sending an API request on postman. That didn’t work (obviously). Turns out, VSC’s extension would not have worked, I needed to run a local server using npm run dev instead.

Okay, done.

Get Manan Shah’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Now that resulted in a different set of errors.

Postman ran the API request, sure, but came up with another error (which I can’t completely recollect, but it was something db related).

After a lot of researching, I found out I had to first set up the prisma db as well, and migrate the current schema to make it work, using npx.

While doing that, I was getting clash errors, saying my env wasn’t set up properly, and that env was .sqlite but schema provider was postgres. I tried multimillion PnCs but couldn’t get it to work. Another error I was facing while migrating was that some pre-existing migration file was really screwing shit over and causing a repeat of a create function or something on the SQL query side of stuff, which really messed with stuff.

I ended up texting another senior, who really helped me out in 3 simple lines.

That’s all. And that’s exactly what I did next.

And voila, it worked.

Now, the next error I faced was — the API request generated an error telling me the registration number query was missing. And trust me — it wasn’t.

However, I solved this one pretty quick. Turns out, I had coded every request query as req.body.xyz instead of req.query.xyz and hence, as my request body was just always empty, it couldn’t read any registration number. On making the necessary changes, even this worked.

Onto the next error.

I now got a user doesn’t exist error. Of course, how stupid am I. I need to add my user to the db, otherwise it won’t pass the user check at all.

I created a query to add a user to the db before creating the team, but that caused an internal server error (500). On checking the console, it seemed to be an issue while creating the user — I couldn’t leave team field blank. That’s weird — when a new user is created, they shouldn’t be in any team. Team should be an optional field…

I had a guess that this wasn’t an issue on my end, but more about a schema error, so I just built up the courage and asked this on the official web dev group. And sure enough…

Pretty simple fix. There was also an issue where the updated schema wasn’t generating properly, but the ‘Web Dev Simplified’ video had covered that issue, so fixed it real quick.

And then, the golden moment, after a whole weekend of working on this tiny issue:

Team created successfully! The API runs

It worked. The route worked. Massive W.

The Pull Request

I performed all final tests to check every error case, and then closed my project.

In the evening, Garv helped me create my first PR, and I officially finished the first web dev task assigned to me.

My first PR!

Issues fixed in this PR: #15

NOTE: Updated schema to make team and teamId optional in the User model.

API Endpoint: /api/team/create
Methods allowed: POST

Request Sample:

http://localhost:3000/api/team/create?registrationNumber=22BCE0618&teamName=Manan's%20Team&teamCode=2Z9DM

Response Sample:

{
    "message": "Team created successfully",
    "team": {
        "id": "cllt3qs060005h46wxuipkplp",
        "name": "Manan's Team",
        "code": "2Z9DM",
        "createdAt": "2023-08-27T07:01:22.374Z",
        "updatedAt": "2023-08-27T07:01:22.374Z"
    }
}

Error Cases:

If using any other method except POST
Status: 405

{
    message: "Missing registration number"
}

If any query parameters (registrationNumber, teamName, teamCode) missing
Status: 400

{
    message: "Missing registration number" 
}

{
    message: "Missing team name" 
}

{
    message: "Missing team code" 
}

If team code is already taken
Status: 403

{
    message: "Team code already exists" 

If team name is already taken
Status: 403

{
    message: "Team name already exists" 
}

If user doesn’t exist
Status: 404

{
    message: "User not found" 
}

If user already belongs to a team
Status: 400

{
    message: "User already in a team" 
}

Internal Error
Status: 500

{
    message: "Something went wrong while creating a team (Internal Server Error)" 
}

Well yea, that’s about it.

Such a simple task took so long, but what a nice learning experience.

Looking forward to the coming tasks.

Seeya.