Sobre o projeto 🏨 Funcionalidades 🎯 Como acessar o Hotefy ⚙️ Tecnologias utilizadas 🎯 Galeria 📷 Contribuição 💡 Créditos e Agradecimentos 🤝 Contato 💬 Página personalizada 🚀
O Hotefy é uma plataforma de reservas de viagens desenvolvido com React, Typescript, Next.js, NextUI, ShadCN/UI, Tailwind CSS, Prisma, Supabase e Vercel. O projeto conta com opçoes de viagens para todos os gostos, venha encontrar o refúgio perfeito e realizar os seus sonhos!
- Para ver uma pequena demonstração do projeto não deixe de visitar o meu vídeo no youtube no qual mostro todas as funcionalidades do projeto.
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 Airbnb, caso tenha ficado interessado em alguma viagem basta proculá-la no site da Airbnb.
- Interface de usuário, navegação e design
- Através da combinação de React + Tailwind + NextUI + ShadCN/UI foi criado uma interface moderna, atraente, intuitiva e totalmente responsiva.
- Barra de pesquisa, filtros de categoria e recomendados
- Possui sistema de pesquisa na qual exibe todas as viagens que contenham o termo que foi pesquisado e também, na versão desktop, possui filtros para exibir apenas hoteis, chalés, pousadas, especiais e até uma área com as hospedagens recomendadas pela Hotefy.
- Validação de dados
- Validação dos dados dos inputs de data/hóspedes para a reserva feita utilizando o React Hook Form.
- Informações gerais
- Ao clicar na hospedagem desejada exibe diversas informações na seguinte ordem:
- Exibe 05 imagens do local a partir de um slider criado com o SwiperJS.
- Exibe a área de reserva da viagem, na qual o usuário pode inserir a data desejada inicial/final e o número de hóspedes, caso esteja disponível ele será redirecionado para a tela de confirmação, caso contrário exibirá uma mensagem de data indisponível/número de hóspedes invalido.
- Exibe uma pequena descrição sobre a viagem, mostrando suas principais características e o que torna este local único.
- Exibe uma seção de destaques que mostra quais são alguns dos items oferecidos pela hospedagem.
- Exibe informaçoes extras, porém importantes, como horário de checkin/checkout e o número máximo de hóspedes
- E por fim exibe uma pequena descrição sobre a localização e também um mapa utilizando a API do Google Maps.
- Ao clicar na hospedagem desejada exibe diversas informações na seguinte ordem:
- Light & Dark mode
- Sistema de tema claro e escuro disponível para aqueles que preferem um ou outro, com salvamento de preferência no local storage dessa forma quando o usuário acessar a plataforma novamente ela estará com o tema escolhido.
- Para desfrutar da incrivel plataforma da Hotefy basta clicar aqui
Homepage
Pesquisa
Detalhes da hospedagem - 01
Detalhes da hospedagem - 02
Validação dos dados
Confirmação de reserva
Minhas viagens - Com reservas
Minhas viagens - Sem reservas
Confirmação de cancelamento de reserva
Homepage
Pesquisa
Detalhes da hospedagem - 01
Detalhes da hospedagem - 02
Confirmação de reserva
Minhas viagens - Com reservas
Minhas viagens - Sem reservas
Confirmação de cancelamento de reserva
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 das hospedagens foram obtidas do site da Airbnb.
- Ao professor Felipe Rocha pelos ensinamentos que foram essênciais para a realização deste projeto.
-
Se você gostou do projeto da Hotefy 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.
