Car Merged Marketplace

This app is a marketplace showing cars from different sources (i.e. Facebook, Craigslist, etc.) using some given filters to bring you the best deal. You can also try the AI ​​feature to get more information about the car you are interested in.

Inspiration

I just wanted to make the process of searching for a used car to buy less complicated. I have gone to different websites to check out car deals at some point, and it turns out that some have better cars than others, and others have cheaper prices. Such searching can get overwhelming if I have no idea whether the car I am interested in is right for me or not.

That's when I decided to do this project. The app should be able to offer a more comfortable experience when searching for cars by combining data obtained from different portals in one place. Also, with the one-click AI tool, you can read a recommendation about the selected car and make a decision whether it is worth buying that model or not (you will still have to manually check it with a mechanic anyway).

But not only was this the only reason for creating the project, but also to keep my programming skills up to date, learning several things along the way.

How I built it

First I had the idea in my mind, then I started structuring the way I would have the web application. So:

1. I designed a preview of how the frontend would look like.
2. I set Facebook and Craigslist as the initial marketplaces to start my project
3. Because the application has an option to filter cars by year, make, model, price, etc., and sort them by other criteria as well, I researched how the Facebook and Craigslist filters worked.
4. I created a list of general filters, which the backend would then change depending on the scraping service being requested at the time (Facebook or Craigslist)
5. I studied how web scrapers worked.
6. I tested them by running scraping scripts to get cars filtered by each marketplace.
7. I built the backend with Express. I placed a POST /api/cars endpoint to retrieve cars as indicated in the sent JSON.
8. Back on the frontend, I used the Google Maps Places API to retrieve city names, which will also be sent as a filter to the backend. A parser was created for the cities, since they will be read differently depending on whether you use the scraper on Facebook or Craigslist.
9. I started the frontend-backend integration.
10. The application does not directly redirect to the url of a selected car, but rather it previously retrieves the detailed information of that car, and shows it to you in a preview. This information will be used later.
11. I studied how the integration of AI models with NodeJS works. It was relatively simple, and I learned something new about APIs.
12. I integrated AI models into my project. The prompt will ask for detailed information about the car model, which comes from the component mentioned in point 10.

Challenges I ran into

Because I am not an employee of Meta or Craigslist, the scraping process is quite time-consuming. One of the tasks that takes the longest to complete is "find the location sent by the client", simulating a manual process, since the way of handling city names in both sources is not publicly accessible. Facebook has its own generated IDs for cities and Craigslist uses main cities as a reference to place them in the subdomain, and from there redirect to the exact location requested by the client.

What I learned

What I consider to be the most valuable thing I have learned in this exercise is how to send a data stream in pieces from the backend to the frontend. This way, you would not have to wait for the request to complete to show a message to the user, but you can build the visible response little by little while the request is being completed. In this exercise it was useful to show the AI's advice as it was being generated.

What's next for Car Merged Marketplace

Replacing the Facebook Marketplace scraper with another website, due to unrepairable problems that occurred in the production environment: Facebook does not allow scraping in this environment, and any attempt will be denied. It only works in the development environment.

Built With

• express.js
• gemini-ai-api
• google-maps-places-api
• node.js
• playwright
• react
• typescript