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.
- Foi utilizado o plano grátis de serviços de Authentication, Firestore Database e Storage do Firebase para gerir os seguintes dados:
- 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.