Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brunocarvalhofeitosa/mobiauto-fipe
Next.js application made with Typescript, React-Hook-Form, Zod, Zustand and TailwindCSS to search price of vehicles of Fipe table.
https://github.com/brunocarvalhofeitosa/mobiauto-fipe
Last synced: 4 days ago
JSON representation
Next.js application made with Typescript, React-Hook-Form, Zod, Zustand and TailwindCSS to search price of vehicles of Fipe table.
- Host: GitHub
- URL: https://github.com/brunocarvalhofeitosa/mobiauto-fipe
- Owner: BrunoCarvalhoFeitosa
- Created: 2024-02-06T19:14:26.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-04-29T20:54:10.000Z (7 months ago)
- Last Synced: 2024-04-29T22:11:57.826Z (7 months ago)
- Language: TypeScript
- Homepage: https://bruno-carvalho-feitosa-mobiauto-fipe.vercel.app
- Size: 87.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Aplicação feita em Next.js, Typescript, React Hook Form, Zod, Zustand e TailwindCSS para buscar preço de véiculos baseados na tabela Fipe.
Sumário
## Sobre o projeto
O projeto foi feito em Next.js, Typescript, React Hook Form, Zod, Zustand e TailwindCSS para buscar preço de veículos baseados na tabela Fipe. Foram criadas duas telas, sendo a primeira 3 inputs de seleção, onde no primeiro são preenchidas as marcas de carros presentes na API (https://deividfortuna.github.io/fipe/), ao escolher uma opção, o segundo select é preenchido com os modelos da respectiva marca selecionada e ao escolher um modelo, o terceiro select é preenchido com os anos em que aquele modelo teve produção. Se houver interação do usuário com os três selects, o botão para consultar preço é habilitado para interação, do contrário ele permancerá desabilitado até que haja as interações necessárias. Ao clicar sobre o botão de consulta de preço, o usuário é redirecionado para a página de resultados, e lá conterá o preço do véiculo de interesse do usuário.
### Aplicação
https://github.com/BrunoCarvalhoFeitosa/mobiauto-fipe/assets/46093815/48eefa5c-d90e-404e-a86f-0f2f06d32596
### Feito com
* [Next.js](https://nextjs.org)
* [React.js](https://react.dev)
* [Typescript](https://www.typescriptlang.org)
* [React Hook Form](https://react-hook-form.com)
* [Zod](https://zod.dev)
* [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)
* [TailwindCSS](https://tailwindcss.com)
* [Vercel](https://vercel.com)
### Hospedagem
O site está em produção neste link: (https://bruno-carvalho-feitosa-mobiauto-fipe.vercel.app).
## Iniciando o projeto
Primeiramente será necessário clonar este projeto em (https://github.com/BrunoCarvalhoFeitosa/mobiauto-fipe.git), após o download será necessário abrir este projeto no seu editor, em seguida criar um arquivo na raiz .env e inserir os valores: NEXT_PUBLIC_FIPE_API_BASE_URL=https://parallelum.com.br/fipe/api/v1/carros/marcas, em seguida no terminal digitar npm install ou yarn e por fim é só rodar em seu terminal o comando npm run dev ou yarn dev.
### Pré-requisitos
* npm
```sh
npm install npm@latest -g
```
### Instalação
1. Clone o repositório
```sh
git clone https://github.com/BrunoCarvalhoFeitosa/mobiauto-fipe.git
```
2. Instale os pacotes do NPM
```sh
npm install ou yarn
```
3. Inicie o projeto
```sh
npm run dev ou yarn dev
```
## Contato
Bruno Carvalho Feitosa - [GitHub](https://github.com/BrunoCarvalhoFeitosa) - [LinkedIn](https://www.linkedin.com/in/bruno-carvalho-feitosa/)