Taranveer
Singh
Fullstack Developer
CONTACT ME

About Me

I am a doting problem solver with predictable consistency. I have built frontend projects (using React) and backend projects (using C# .NET MVC). Coming from a background in customer service, I am used to diagnosing and fixing problems while documenting my steps. No matter what role I am assigned, I am a reliable contributor for the team. I ask questions that eliminate ambiguity and I take it upon myself personally to deliver work that I take pride in.
View LinkedIn Download Resume

LEARN LOG GLIMPSES

23
October

How I saved $25/month with caching

First Iteration: When a user would visit “Above Average”  the frontend would directly make API calls to the API service. I was on a paid tier of $25/month. I'd get 300 API calls per minute. My app's API calls were being made in 2 stages:Firstly, I'd get the list of all stocks that constitute the Nasdaq stock index. Then, I'd loop through these stock symbols, and make an API call for each stock to get the stock's historical prices. These calls totalled to 103 on each client visit. With 300 API calls/minute, 3 quick reloads could exhaust my limits.Second Iteration:  The first issue I noticed was that my API key, stored as an environment variable, was getting exposed in the network requests in the browser. No matter how I stored my API key, if the frontend was making these API calls, the API key would get exposed. So I made a proxy API server using Express. Meaning, now my frontend would make calls to my backend, my backend would relay the requests to the API service and in turn, relay the responses to the frontend. This way, the API key never had to live in my frontend and hence, was now secure. I added a CORS policy in my server that only allowed the frontend's domain to send requests to the proxy server.Third Iteration: Finally, the $25 charge started feeling alot every month given that my app was only working with “End of Day” data. In simple terms, the data would only change once a day. So I explored different solutions. I first thought of implementing client side local storage and it'd be simple but then, 3 unique client visits (3 * 103 API calls) would still exhaust my API calls limit (300 calls per minute). So the solution had to be in the proxy server. Some good google searches and a few hours later, I incorporated in-memory caching in my proxy server using “Node-Cache”.Now, if the frontend client made a request to the server and there'd be a cache miss (cache not found), the API service would be called, and the cache would be updated. The next time a client would make a request, there would be a cache hit on the server and the cache is what the server would respond with. The API service would not be called in this case.  This enabled me to switch to the free tier which allowed me 250 API calls per day. Thanks to the caching, it was no longer a problem. So that was my experience! From tiptoeing with 300 calls/minute to free usage with 250 calls/day It was now unexplainably exciting to refresh my app 30 times in a minute and not have my dry humour error show up. It's quite empowering to actually save $$ (albeit a low amount) due to knowing a thing or two.

Edited 184 days ago

4
February

How event loop powers asynchronous operations in javascript

The event loop is a mechanism that continuously checks the message queue for pending events and executes them in a specific order. It is fundamental to JavaScript's ability to handle asynchronous tasks without freezing the entire program.Let's consider all the moving pieces:Thread of execution: JavaScript is single-threaded, meaning it has only one main thread of execution. This thread handles the execution of the program's code.Call Stack: The call stack keeps track of the currently executing functions. When a function is called, it is added to the top of the stack and is then treated as the first priority function that needs to be resolved by the thread. When a function completes, it is removed from the stack.Message Queue: The message queue holds a queue of messages that each correspond to a callback function. Event Loop: The event loop is a continuous orchestrator that checks the call stack and the message queue. The event loop waits till the call stack is empty (no more functions to execute). Whenever that happens, the event loop then looks at the message queue. If there are any messages, the event loop pushes the callback function to the call stack, and then the task of executing that function is in the core domain of JavaScript.This cycle repeats continuously, allowing JavaScript to handle asynchronous tasks without blocking the main thread. The event loop ensures that the program remains responsive to user interactions and other events, providing a smooth and efficient execution environment.

Edited 447 days ago

17
January

How I implemented error handling in Turbo Tickets

As my capstone project Turbo Tickets grew in functionality, I knew that the scope for errors was also increasing. As a result, error handling became of utmost importance. I achieved that by implementing 3 layers that could catch errors.By default, I had the option to return `NotFound()` in catch blocks but that did not feel too intentional. I designed custom error pages or “views” in my MVC app that corresponded to specific errors.Next, I had to add logic to redirect the viewers to these error pages. Service Layer: I implemented a service layer interface that had all the databse querying methods. So any query exception in this layer, could cause errors for the users. I added try catch blocks here and in the catch blocks, I'd throw an exception so that the code execution would go back to the code that was calling the service method.Controller: Service Layer Error: In my controller actions, I again had try/catch blocks and an exception thrown in the service layer, would then throw an exception in my controller method too, triggering the catch block in my controller method. In these catch blocks, I would redirect the viewer to a Generic Error page.Access Denied Error: I also have logic in my methods which checks whether the logged in user is authorized to make the request. If not, there's no exception thrown but the user is redirected to a page showing an “Access Denied” error.Null Check Error: Finally, I also added checks for any integral data having a null value. If such values are found to be null, I'd redirect the viewer to an error page. Only if the object would have non null data, would the viewer be directed to the corresponding view.MiddleWare: Lastly, I also have a middleware method that takes in a parameter representing the http request/response object. The method waits for the request to be resolved. If the response's status code is 404, the user is redirected to a “not found” error view. This would be helpful if a user requested a url that doesn't correspond to a valid controller action. If the response's status code is 500, the user is redirected to a “generic” error.With great functionalities, come great responsibilities to handle errors and I only considered the project complete once I implemented the error handling to my satisfaction. 

Edited 465 days ago

C# .NET MVC Projects

A full stack issue tracker app built with ASP.NET MVC, C#, and SQL

Explore

A log of my technical learnings throughout my coding journey.

Explore

An address book to keep track of all your contacts and email them.

Explore

React Projects

Solo Project: A momentum investing site that uses a proxy API server to fetch the stocks' data.

Explore

Pair Project: A movie listing site that uses API calls to fetch the movies' data.

Explore

Group Project: A product listing site for upcycled climbing ropes.

Explore

Javascript Challenges

Some small vanilla Javascript apps that you can quickly browse through.

All apps have a section named The Code for code explanations.

Check if a word reads the same backwards as it does forward.

Learn More

The famous coding challenge of fizzbuzz with "stinging" UX requirements.

Learn More

A mortgage calculator to assist you with your payments

Learn More

An event tracker with local storage.

Learn More

An API consuming app displaying necessary info about popular movies.

Learn More

An app that takes a user input and reverses the entered string.

Learn More

What I Use

I have built websites from the ground up. Bootstrap makes it easy to quickly implement common layouts and elements that add finesse to an app. To tweak those template stylings and to fill in any gaps, I don't shy away from diving deep into CSS either.

Vanilla Javascript is the bread and butter of client-side web development and my mother tongue when it comes to coding. I am also well versed with the React framework. I utilize React whenever I anticipate intricate user interactions, state changes and resulting re-renders. I effectively use React Hooks to keep the UI in sync with the app state.

I utilized functional programming for my frontend apps, striving to make my functions pure. I can use both Jest and Mocha to ensure code reliability through unit testing. Additionally, I integrated end-to-end testing into my React apps using Cypress to validate functionality and user experience.

I have used C# to build my backend apps. I rely on the .NET framework to add to the efficiency of building solutions as well. You can explore my capstone projects here.

CRUD operations are essentially why we pay for internet. An app can go from being "impressive" to "usable" by allowing information exchange and persisting data. I have implemented PostgresQL in all my capstone projects.

I can efficiently use Git's version control both from IDE and from the CLI. I've worked on intense team projects in which I coded in separate git branches and made PR's for code reviews that were then merged into the main branch.

Get In Touch

    OR