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

DriveX 🚗

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

Funcionalidades :dart:

• 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.

Como acessar a página :gear:

• Para desfrutar da incrivel plataforma da DriveX basta clicar aqui

Tecnologias utilizadas :dart:

Galeria :camera:

Desktop

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

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.
• Agradeço ao professor Matheus Fraga pelos ensinamentos que foram cruciais para a realização deste projeto.

Redes sociais para contato! :speech_balloon:

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

• 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].