Skip to content

andre-mr/fipe-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🚘 Fipe UI

Alternate frontend for Fipe vehicle prices.

🔗 Open project hosted in AWS Amplify

📃 About the project

Clean interface for querying vehicle prices in the "Fipe Table".
It's a double scraping project, using backend to query table data and vehicle images from Google search engine.

🚧 Built with

🖥️ Basic usage

  • Select table period (month+year).
  • Select manufacturer.
  • Select in any order:
    • Vehicle model.
    • Vehicle year and variation.
  • After model choice, the year list is automatically filtered to match that model.
  • After year choice, the model list is automatically filtered to match only vehicles from that year.
  • Price is shown after all 4 choices done.
  • A Google image search is made with selections made, and the first result is shown.

⌨️ Notes for developers

👨‍💻 AWS

Github Actions wasn't made this time because of limitations to use Node modules, the Lambda build is updated manually using zip upload method. Not using paid domains, it's a dev project. 😉

👨‍💻 Fetch/Axios

Frontend (Amplify) is using Fetch API to call backend. Backend (AWS Lambda) is using Axios to get data from Fipe and Google Images.

👨‍💻 React/Vite/Tailwind/Typescript

This time I decided to consume Tailwind for styling and React instead of vanilla, using Vite as a modern and efficient build tool.

📱 Responsiveness

It's a single page application, so i made basic responsiveness care, to fit a default widescreen monitor and a portrait oriented phone.

🌎 Language

For now, the user interface is all in Brazilian Portuguese. On the other hand, all code is mixed with English.

🔍 Scraping

This is a double scraping project, not using Google Search API, but default search url with parameters, and regex techniques to find image url inside results.
Fipe doesn't have a developer API, so the website api calls were used instead.