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.

Used stack

Frontend:

• React
• React Router
• Vite
• TypeScript
• Google Maps Places API

Backend:

• Node.js
• Express
• Playwright
• Google Gemini AI

Project structure

The project is structured in the following way:

Frontend:

• index.html: HTML file for the app. Contains the script to load the Google Maps API.
• server.cjs: Node.js server that runs the app on production.
• src/main.tsx: Entry point of the app. Contains the root component of the app, the router and the React Query client.
• src/App.tsx: Main component of the app. Contains the routes for the app.
• src/components: Contains the components of the app.
• src/components/MainPage.tsx: The landing page of the app. Contains a start form to begin car searching.
• src/components/GMPAutocompleteInput.tsx: Component for the Google Maps Autocomplete API to allow user to search and select from a list of cities or zipcodes.
• src/components/NotFound.tsx: Component for the 404 page of the app.
• src/components/Marketplace/index.tsx: The main page of the marketplace. Contains a sidebar with all the filters and a list of the filtered cars.
• src/components/Marketplace/FiltersSidebar.tsx: Component for the sidebar with all the filters such as seller type, vehicle type, price range, location, etc.
• src/components/MarketPlace/SortControls.tsx: Component for the sort controls. Contains a dropdown to choose the sort order and a checkbox to reverse the sort order.
• src/components/MarketPlace/CarList.tsx: Component for the list of the filtered cars.
• src/components/MarketPlace/CarItem.tsx: Component for each car item in the list. Contains a card with a brief information about the car such as image, title, price, mileage and location.
• src/components/MarketPlace/CLCarElement.tsx and src/components/MarketPlace/FBCarElement.tsx: Components with the complete car information scraped from Craigslist or Facebook respectively. You can get additional information by clicking on the "Get tips by Claude AI" button to see if the car is worth buying.
• src/components/MarketPlace/AITips.tsx: Component to show additional information about the car provied by Gemini, the Google AI model.
• src/interfaces folder: Contains the interfaces for the frontend.
• src/services/cars.ts: Contains the functions to fetch the cars from the different sources.
• src/utils/parseLocation.ts: Contains the function to parse the location from the Google Maps API response. Useful to give the correct format to the request depending on the source.
• src/utils/parseState.ts: Contains the mapping between the state name and the state abbreviation.

Backend:

• src/index.ts: Entry point of the backend. Starts the server.
• src/routes/carRoutes.ts: Contains the routes for the app. Description of each route can be found in this file.
• src/services/carService.ts: Contains the functions to fetch the cars from the different sources and merge and sort them in a single list.
• src/services/aiService.ts: Contains the function to get the tips from Claude AI.
• src/utils/AnthropicClient.ts: Starts the Claude AI client.
• src/utils/cleanObject.ts: Contains the function to clean the object from the null or undefined values.
• src/utils/clFiltersParser.ts and src/utils/fbFiltersParser.ts: Contains the functions to convert the default filters to the format required by the Craigslist and Facebook filters.
• src/utils/craigslistScraper.ts and src/utils/facebookScraper.ts: Contains the functions to scrape the Craigslist and Facebook car elements.
• src/utils/CLCarItemScraper.ts and src/utils/FBCarItemScraper.ts: Contains the functions to individually scrape the selected Craigslist or Facebook car.
• src/utils/stateMap.ts: Contains the mapping between the state name and the state abbreviation.
• src/interfaces folder: Contains the interfaces for the backend.

Installation

To install the project, follow these steps:

1. Clone the repositories:

git clone https://github.com/eams1798/best-car-deals
git clone https://github.com/eams1798/best-car-deals_backend

2. Install the dependencies. I recommend using yarn:

cd best-car-deals
yarn install

cd ../best-car-deals_backend
yarn install
yarn playwright install
yarn playwright install-deps chromium

3. Create a Google Cloud account, start a new project and get a Maps API key. You can follow the steps listed here. You will need a Billing account to use all the Google APIs.
4. Now go to https://ai.google.dev/ and follow the steps to get a new API key for Gemini.
5. On the root of the backend directory, create a .env file with the following variable:

GEMINI_API_KEY=YOUR_GEMINI_API_KEY

6. On the root of the frontend directory, create a .env file with the following variable:

VITE_GOOGLE_MAPS_API_KEY=YOUR_GOOGLE_MAPS_API_KEY

7. Use yarn dev on each directory if you want to run them locally, or yarn start if you want to run them on production mode.

How to use the app (click on the images to open the video)

1. Using the main page to start searching for cars with basic filters.

2. Clicking on a car to view all the information about the car, and using the AI feature for tips.

3. Using the sort controls and the reverse checkbox.

4. Using the filters sidebar.

Deployment

On each repo, there is another branch called "production". You can use those versions to deploy the app. Just change the script deploy on each package.json file, rewriting the user root and server IP address 185.28.22.245 by one that you own, then run yarn deploy on each repo.

Current issues

Unfortunately, there are some problems while scraping data from Facebook when doing it on production due to Meta restrictions. So, the production app will only work with Craigslist scraper. You can still use it without this restriction on development mode. I'll change the Facebook scraper service soon.