Mohammad Touseef Jamal

Full Stack Developer

Mohammad Touseef Jamal

Full Stack Developer

Cab Fare Predictor

Cab fare predictor is a web app built on the MERN stack. It predicts the cost of the ride based on the user's pickup and drop location along with pickup timing (morning or night).

The project's frontend and backend are built separately so that more features can be added easily in the future.

Features

Technologies & Packages

Backend - Node, Express, Yup, Mongoose, Bcrypt, cors, cookie-parser

Frontend - React, Formik, Yup, Axios, Zustand, React Router, lottie-react, geocoder, react-google-maps/api (package)

What I learned:

  • Reading documentation: While building this project, I understood that documentations play a vital role in properly understanding & using APIs or packages.

  • Large codebases: I thought, one needs to be very PRO to go through large codebases & understand the overall functionality of a package or API, but I was wrong. I had gone through the react-google-maps/api package codebase to understand direction rendering functionality in order to fix a bug occurring in my project.

  • Separate frontend & backend: Separating both ends helped me to understand how applications can be developed, managed & scaled on different ends easily.

Problem, Solution & Contribution (spent 20+ hours in 3 days):

  • Problem Statement

I faced a direction rendering issue ( i.e., how to clear previous routes) in react-google-maps/api package.

  • Inspection

I noticed that when I try to clear out the map's route, then, the route line color gets a little brighter. Then, I inspected the DOM of the map and I noticed that react’s re-rendering is generating the route line HTML more than one time. When I try to clear the route, then only one of those lines gets removed from DOM.

  • Solution

I had gone through the docs and codebase of API, tried to use memo & usecallback, but nothing worked for me. Finally, I had gone through an article where I learned that production build cuts of unexpected re-rendering that occurs in development build. So, I built & ran the production version of my app on local machine, and hence, the bug was solved.

  • Contributions

I approached my solution to the same issue that was listed by some other developer on the package.

https://github.com/JustFly1984/react-google-maps-api/issues/3077

GitHub Link 🔗

Deploy Link 🔗

Comments (0)