DEV Community: Nitin Singh

Bookmyflight : A web app that helps you find cheap flights and book them based on your budget.

Nitin Singh — Thu, 23 May 2024 20:59:47 +0000

Currently working on a full fledged Flight booking website using Amadeus API.
Progress so far :-
Done with user register , login and logout part. The backend is written in nodejs and express. I have used mongodb for the database.
All the toast messages you see are coming from the server. I have also used JWT , generated access token and refresh token using it, and saved it in user browser cookie. But I don't know how to use this access token or refresh token , like now after login I don't have to call backend again , so how i will get to know when the access token expires??
Will figure it out , after moving deep in the project ( first time using jwt).
On logout , user cookies get deleted.
I have also added Flight search component , I don't know this full white bg looks good or not , will soon improve the bg. First tried gray , but it looked ugly.
I have never used such a large and complicated API before. Every request requires headers and parameters, and I have to generate a new access token whenever the old one expires. It's been a real challenge!

I want to share some of the problems I faced and how I solved them:

The API doesn’t accept city names directly, instead it takes the city airport code, known as the IATA code. For example, for Delhi, it is DEL. So, when a user types a city name like Ranchi, behind the scenes I had to convert it to the IATA code, IXR. To achieve this, I used another Amadeus API endpoint that fetches this data and stores it in a state variable, which is then passed in the params.

  const handleFromInputSearch = async (value)=>{
    setFrom(value)
    const headers = {'Authorization' :`Bearer ${accessToken}`}
    const params = {'subType':'CITY,AIRPORT' , 'keyword':`${value}`}
    try {
      const airportData = await axios.get('https://test.api.amadeus.com/v1/reference-data/locations', {headers , params})
      setAirportData(airportData?.data?.data)
      setDepartureAirport(airportData?.data?.data[0]?.iataCode)
      console.log(airportData?.data?.data[0]?.iataCode)
    } catch (error) {
      console.log('Error fetching airport data' , error)
    } 
  }

The date format required by the API is year-month-day, but the component from which the user selects the date is in month-date-year format. Therefore, I reformatted the date to match the API expectations.

  const formatDate = (date) => {
    const year = date?.year
    const month = date?.month < 10 ? `0${date?.month}` : date?.month
    const day = date?.day < 10 ? `0${date?.day}` : date?.day

    return `${year}-${month}-${day}`
  }

When flight data is fetched from the API, the format of the total travel duration is different, like PT20H55M. This means that the total travel duration is 20 hours and 55 minutes. As you can see, this is not a human readable format. So, I wrote a function to convert this data into a human readable format. I took help from Stackoverflow and Chatgpt because this was a problem I faced for the first time.

  const formatTotalTravelDuration = (duration) => {
    // Match the duration string against the regular expression pattern
    const match = duration.match(/PT(\d+H)?(\d+M)?/)

    // Extract hours and minutes from the matched groups
    const hours = match[1] ? match[1].replace('H', '') : '0'
    const minutes = match[2] ? match[2].replace('M', '') : '0'

    // Construct the human-readable format by combining hours and minutes
    return `${hours}h ${minutes}m`.trim()
  }

There is a similar problem with the flight timing, which is in this format: 2024-05-30T22:15:00. A bit uncomfortable to read, right? I wrote a function to transform this into a human-readable format.

  const formatTiming = (dateTime) => {
    // Extract the time part from the datetime string
    const timePart = dateTime.split('T')[1]

    // Match the time part against the regular expression pattern
    const match = timePart.match(/(\d+):(\d+):(\d+)/)

    // Extract hours and minutes from the matched groups
    const hours = match && match[1] ? match[1] : '0'
    const minutes = match && match[2] ? match[2] : '0'

    // Construct the human-readable format by combining hours and minutes
    return `${hours}:${minutes}`.trim()
  }

The airline name you see on the card component is not the way it was sent from the API. I received an airline code from the API, like for Air India, which is AI. So, how will the user know which airline it is? To resolve this issue, I used another Amadeus API endpoint that provides the airline name according to the airline code sent in the parameter.

  useEffect(() => {
    const fetchData = async () => {
      try {
        const headers = { 'Authorization': `Bearer ${accessToken}` };
        const params = { 'airlineCodes': `${airLine}` };
        const response = await axios.get('https://test.api.amadeus.com/v1/reference-data/airlines?airlineCodes', { params, headers });
        setAirlineName(response?.data?.data[0]?.businessName);
      } catch (error) {
        console.log("error fetching airlines name ", error);
      }
    };

    fetchData();
  }, [airLine]);

So many more features to add, optimization is needed, improvement in UI, and many more things. My main goal in choosing this project was to get good hands on experience with a large and complex API, and luckily, there is not a single tutorial, YouTube video, or blog for this API. So, everything you see I have done by reading docs and using the hit and trial method. You wouldn't believe how many many many times I tried to generate an access token perfectly.

Another challenging thing I can think of now is the payment for booking, like how the payment will be executed and confirmed.

Github repo : https://github.com/nitintwt/bookmyflight

Let's see how it goes.

Client Side Rendering VS Server Side Rendering

Nitin Singh — Thu, 08 Feb 2024 19:50:03 +0000

SSR vs CSR :-

Our browser only understands HTML, CSS, and JavaScript. All the code we write, all the frameworks, libraries, and everything else, are ultimately converted into HTML, CSS, and JavaScript because that is what our browser can understand.

Now, let's examine client-side rendering. When we deploy our website code, it is saved on a server. Whenever we request a web page, the server sends the entire code bundle, which includes HTML, CSS, and JavaScript.
This code bundle is then rendered in our own browser, and the page is shown to us. The gap between the request and the rendered page is a few milliseconds or sometimes even seconds. This delay is not great for SEO.

On the other hand, in Server Side Rendering, when we request a web page, the entire code is first rendered on the server, and then , only HTML and sometimes a few JavaScript codes are sent to our browser. This HTML code is instantly shown on our screen,eliminating the delay between the request and the rendered page.

What's cool with Next.js is that you choose which part of your app renders on the server side and which on the client side. By default, everything is server rendered.If you want something on the client side, just write "use client" at the top of that file.

Here's a quick breakdown of server and client-side components:
Server:

Fetching data
Accessing the backend
API access, etc.

Client:

In actions like onClick, onChange, useState, useReducer, useEffect.
Involves browser-only APIs, hooks, React class components.

Explore React Navigation: A Guide to React Router

Nitin Singh — Mon, 01 Jan 2024 18:48:58 +0000

Why should you use React Router?
Check it out!

First, let's understand some terminology...

Routes: These are defined paths (URLs) that lead us to the components of your app, such as "/home," "/about," and "/login."

Router: It helps in matching the requested URL with the defined routes and renders the appropriate contents of the web page.

React Router helps users navigate through different pages of the web without reloading the entire page.

Your app is like home, components are your rooms, and React Router is like a map of your house, helping you navigate your house without moving you out of it.

React Router has two special components for navigation.

Link: The Link component is a basic navigation component that creates a hyperlink to navigate to a specific route.
NavLink: It is an extension of Link that provides a special feature called "active," allowing us to check whether the page is active or not using the isActive prop. You can style it accordingly.

For example, isActive will check if you are on the "/about” page. If you are on that page, it will turn orange; otherwise, it will change to gray.

Difference between Scripting and Programming Language.

Nitin Singh — Sat, 30 Dec 2023 19:57:24 +0000

I was going through important JS interview questions, and came across a topic , Difference between scripting and programming language.

Let's have a look into it :-

Before comparing we have to know about how your code gets executed:-
Our source code is written using human language that computers cannot understand, so this source code is converted into bytecode, which the computer can understand.

In between this conversion, there comes either of the two things: a compiler or an interpreter.
A compiler first optimize the entire code(source code to bytecode), and then it gets executed.
But in an interpreter, the code will run line by line, and at the same time, the lines will be converted into bytecode.

Now, the main difference between a programming and a scripting language lies in the use of a compiler or an interpreter.

A scripting language uses an interpreter for source code conversion, whereas a programming language uses a compiler. Every scripting language is a programming language, but not all programming languages are scripting languages.

Example:-
Scripting language: JavaScript, Python
Programming language: C, C++ , Java

But,but,but , here comes JIT compilation into play.
What is JIT??

Just in time compilation was added to JavaScript to improve code execution. The V8 JavaScript engine introduced it for the first time. So how does this work, and why was there a need for a it?
The use of interpreters in JavaScript made code execution slow because the code is executed line by line while converting it into bytecode.
However, a JIT compiler converts the JavaScript code into bytecode just before it is executed, this makes the execution faster. In simple words:- JIT compilation=Interpreter + Compiler.

Basic of useState hook in react.

Nitin Singh — Sat, 30 Dec 2023 19:56:37 +0000

The useState hook is used to update and display data on the web page. If a component has a value that is changeable , we use the useState hook to handle the change.

useState has a state variable and a function to update that variable.
The state variable holds some data of the component that can be changed.
The function is used to update the variable.

Example: const [count , setCount] = useState(1);
Here count is a variable that holds some data and setCount is a function that will update the variable(count) when needed. 1 is the default value we have given to the count.

Why we use useCallback hook in react ?

Nitin Singh — Sat, 30 Dec 2023 19:55:49 +0000

It took me a while to understand the purpose of the useCallback hook.

Let's take an example: imagine you're making your favorite dish, and you're using your favorite recipe for it. Now, whenever you make your favorite dish, you don't want to think about and rewrite the entire recipe each time. Instead, you make a photocopy of your favorite recipe and use it whenever needed. You only update the copy when you want to improve your recipe.

In React, components have functions, which are similar to the recipe for your food. These functions get recreated whenever the component is re-rendered, much like writing your recipe every time you make your favorite dish. This can make the process time-consuming.

useCallback(callback, [dependencies])

Here, the callback is a function that only gets recreated when there is a change in the dependencies. Otherwise, it memoize the function data if the function dependencies are not changed.

The main benefit of the useCallback hook is that it helps in avoiding unnecessary re-renders. This, in turn, aids in optimizing the performance of the webpage.

Context API: What and Why?

Nitin Singh — Sat, 30 Dec 2023 19:54:36 +0000

Wanted to share my learning related to Context API.

Before going into what Context API is, we need to understand why there was a need for it.

Let's take an example:

Imagine an web app with a homepage featuring a dashboard. The dashboard is divided into two parts: the left and right sides. The right side further divides into an upper and lower part, with a card component in the upper part.

In the card component, we require a title. Let's assume we are fetching data from an API, and the title comes from this API. The title, initially received from the API, first pass to the App component, then moves to the dashboard component, followed by the right side, and then progresses to the upper side component. Finally, it reaches the card component.

In this process, the data is passed through different components to reach its original destination. All these data pass-on are inefficient and not an optimized way of handling this.

To address this issue, we can create a global object that stores all the necessary data or the fetched data required by different components of the app.

This is where the Context API comes into play.

Think of the Context API as a global object where different data or Fetched data can be stored, and this data can then be directly accessed by specific components.

Using the Context API can make handling data and managing states in React apps simpler. This is especially helpful when different parts of your app need to use the same data.