A DriveX é 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! ⭐

ALERTA ⚠️ 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, caso tenha ficado interessado em algum veículo basta proculá-lo no site da WebMotors.

• 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.
• 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 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.
• 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 e Zod para garantir as validações necessárias.
• 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.
• Detalhes que fazem a diferença
  • Sistema de notificaçoes feito utilizando React Hot Toast.
  • Os ícones utilizados são da biblioteca React Icons.
  • BarLoader da biblioteca React Spinners para indicar carregamento.
  • Carrossel feito utilizando o poderoso Swiper.

• Para desfrutar da incrivel plataforma da DriveX basta clicar aqui

Veículos cadastrados

Detalhes do veículo

Validação de login

Validação de cadastro

Dashboard

Cadastro de veículos

Validação cadastro de veículos

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.

• Todas as imagens e informaçoes dos veículos foram retiradas do site da WebMotors.
• Agradeço ao professor Matheus Fraga pelos ensinamentos que foram cruciais para a realização deste projeto.

• 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! ⭐

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