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

Atalhos de navegação

Sobre o projeto 🚗​ Funcionalidades 🎯​ Como acessar a DriveX ⚙️ Tecnologias utilizadas 🎯 Galeria 📷 Contribuição 💡 Créditos e Agradecimentos 🤝 Contato 💬 Página personalizada 🚀

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

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.

Funcionalidades 🎯

• 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 ⚙️

• Para desfrutar da incrivel plataforma da DriveX basta clicar aqui

Tecnologias utilizadas 🎯

Galeria 📷

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 💡

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 🤝

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

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

• 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 guibus.dev@gmail.com.