Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gui-bus/drivex

A DriveX é uma página web de compra e venda de veículos, desenvolvido com Vite, React, TypeScript e Tailwind CSS. 🚘
https://github.com/gui-bus/drivex

back-end eslint eslint-plugin firebase firebase-auth firebase-database firebase-storage firestore front-end fullstack react reactrouter reactrouterdom tailwind typescript vercel vite zod

Last synced: 3 days ago
JSON representation

A DriveX é uma página web de compra e venda de veículos, desenvolvido com Vite, React, TypeScript e Tailwind CSS. 🚘

Awesome Lists containing this project

README 

        

# DriveX - Elevando sua experiência automotiva a um novo patamar 🚘



  Gif desktop






Atalhos de navegação



***[Sobre o projeto](#drivex-)*** :car:​ 

***[Funcionalidades](#funcionalidades-dart)*** :dart:​ 

***[Como acessar a DriveX](#como-acessar-a-página-gear)*** :gear: 

***[Tecnologias utilizadas](#tecnologias-utilizadas-dart)*** :dart: 

***[Galeria](#galeria-camera)*** :camera: 

***[Contribuição](#contribuição-bulb)*** :bulb:

***[Créditos e Agradecimentos](#creditos-e-agradecimentos-handshake)*** :handshake:

***[Contato](#redes-sociais-para-contato-speech_balloon)*** :speech_balloon:

***[Página personalizada](#precisa-de-uma-pagina-personalizada-para-o-seu-negócio-rocket)*** :rocket:








## DriveX 🚗



***A [DriveX](https://drivex-cars.vercel.app/) é uma página web de compra e venda de veículos, desenvolvido com Vite, React, TypeScript, Firebase e Tailwind CSS.*** O projeto conta com um sistema de autenticação com Firebase para gerenciar o login e registro de usuários, bem como um banco de dados Firestore para armazenar informações sobre veículos e usuários. Além disso, o projeto oferece a possibilidade de entrar em contato com os vendedores via WhatsApp.



***Venha e explore a melhor seleção de carros novos e usados em todo o Brasil!*** :star:



> **ALERTA** :warning:

> Este projeto se trata de um projeto de estudos, ou seja, nenhuma das informações contidas na página do projeto são totalmente verídicas. Todas as informaçoes e imagens são meramente ilustrativas e foram obtidas do site da [WebMotors](https://www.webmotors.com.br/), caso tenha ficado interessado em algum veículo basta proculá-lo no site da WebMotors.



### Funcionalidades :dart:

- [x] ***Interface de usuário, navegação e design***

	- Através da combinação de ***React + Tailwind*** foi criado uma interface moderna, atraente, intuitiva e totalmente responsiva.

- [x] ***Integração com os serviços do Firebase***

	- Foi utilizado o plano grátis de serviços de ***Authentication***, ***Firestore Database*** e ***Storage*** do ***[Firebase](https://firebase.google.com/?hl=pt)*** para gerir os seguintes dados:

		- Authentication - Cadastro e login de usuários.

		- Firestore Database e Storage - Cadastro/exclusão de dados do veículo, sendo eles informações de texto e imagens.

- [x] ***Formulários***

	- Os formulários de cadastro/login de usuários e o de cadastro de veículos foram criados utilizando as bibliotecas ***[React Hook Form](https://react-hook-form.com/)*** e ***[Zod](https://zod.dev/)*** para garantir as validações necessárias. 

- [x] ***Barra de pesquisa e filtros de categoria***

	- Sistema de pesquisa feito utilizando querys do Firestore, onde o usuário pode tanto utilizar a barra de pesquisa e procurar pelo nome do veículo desejado quanto filtrar os veículos pelos cards de categoria: Picape, Sedan, Hatch, SUV, Esportivo e Elétrico.

- [x] ***Detalhes que fazem a diferença***

	- Sistema de notificaçoes feito utilizando ***[React Hot Toast](https://react-hot-toast.com/)***.

	- Os ícones utilizados são da biblioteca ***[React Icons](https://react-icons.github.io/react-icons/)***.

	- BarLoader da biblioteca ***[React Spinners](https://www.npmjs.com/package/react-spinners)*** para indicar carregamento.

	- Carrossel feito utilizando  o poderoso ***[Swiper](https://swiperjs.com/)***.



## Como acessar a página :gear:



- [x] Para desfrutar da incrivel plataforma da DriveX basta ***[clicar aqui](https://drivex-cars.vercel.app/)***

	



## Tecnologias utilizadas :dart:





	React

	Vite

	Typescript

	Tailwind

	Firebase

	Vercel




## Galeria :camera:

#### Desktop

	

desktop

Veículos cadastrados
	

desktop

Detalhes do veículo


desktop

Validação de login


desktop

Validação de cadastro


desktop

Dashboard


desktop

Cadastro de veículos


desktop

Validação cadastro de veículos





#### Mobile



mobile

mobile

mobile

mobile

mobile

mobile

mobile

mobile




## Contribuição :bulb:



Gostaria de contribuir para o projeto? ***Fico muito grato pelo interesse!***



- Sinta-se à vontade para entrar em contato comigo através das minhas redes sociais para enviar seu feedback, sugestões ou comentários sobre o projeto.



## Creditos e agradecimentos :handshake:

- Todas as imagens e informaçoes dos veículos foram retiradas do site da ***[WebMotors](https://www.webmotors.com.br/)***.

- Agradeço ao professor ***[Matheus Fraga](https://github.com/devfraga)*** pelos ensinamentos que foram cruciais para a realização deste projeto.



## Redes sociais para contato! :speech_balloon:





	Instagram 





	LinkedIn 





	Gmail 




## Precisa de uma pagina personalizada para o seu negócio? :rocket:



- [x] Se você gostou do projeto da ***DriveX*** e está interessado em ter uma página para o seu negócio, entre em contato! Estou disponível para desenvolver sites personalizados e adaptados às necessidades da sua empresa. 
 ***Vamos transformar sua visão em realidade!*** :star: 



-  Entre em contato através das minhas redes sociais ou envie-me um e-mail para [[email protected]](mailto:[email protected]).





  DriveX