https://github.com/kauanaagostini/mba-member-club

Aplicação Web desenvolvida durante o primeiro módulo do MBA de Full Stack da Rocketseat 🚀.
https://github.com/kauanaagostini/mba-member-club

babel css html javascript json-server webpack

Last synced: 3 months ago
JSON representation

Aplicação Web desenvolvida durante o primeiro módulo do MBA de Full Stack da Rocketseat 🚀.

• Host: GitHub
• URL: https://github.com/kauanaagostini/mba-member-club
• Owner: kauanaagostini
• Created: 2024-08-06T22:51:12.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-08-07T00:30:45.000Z (6 months ago)
• Last Synced: 2024-09-29T02:23:29.871Z (4 months ago)
• Topics: babel, css, html, javascript, json-server, webpack
• Language: CSS
• Homepage:
• Size: 2.42 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



## Índice

- [1. Introdução](#1-introdução)

- [2. Member Club](#2-dogs)

- [3. Funcionalidades](#3-estrutura-e-funcionalidades)

- [4. Ferramentas Utilizadas](#4-ferramentas-utilizadas)

- [5. Considerações Finais](#5-considerações-finais)

 ---




## 1. Introdução

Aplicação Web desenvolvida durante o primeiro módulo do MBA de Full Stack da Rocketseat 🚀.

---




## 2. Member Club

O projeto consiste em desenvolver uma aplicação web responsiva de um Cartão Fidelidade.



  






Nesta fase do projeto o foco não é o desenvolvimento da página consimindo uma API, por isso não foi desenvolvida, 

e foi simulado uma API usando o json-server




O desenvolvimento foi feito pela versão do Mobile primeiro, e depois a adaptação para a web.

---




## 3. Funcionalidades

Como objetivo principal da entrega a aplicação deve conter as seguintes funcionalidades:

- [x] Deve ser possível buscar as informações dos clientes através de um ID;

- [x] Deve haver uma validação pra saber se é um ID válido e existente;

- [x] Deve aparecer um alerta de erro em tela caso seja um ID inválido;

Havendo sucesso em trazer os dados de cada cliente, deveria possuir umas funcionalidades adicionais:

- [x] Deve ser exibida na tela a imagem do(a) cliente;

- [x] Deve ser exibido na tela o nome do(a) cliente;

- [x] Deve ser exibido na tela o histórico de cortes com a quantidade, a data e a hora;

- [x] Deve ter um check no cartão fidelidade para cada corte de cabelo que o(a) cliente tiver;

- [x] Deve ser exibido na tela um progresso com o número de cortes restantes para o prêmio;

- [ ] Deve aparecer na tela um modal de parabéns com a mensagem: “Parabéns! Seu próximo corte é gratuito!” caso o cliente tenha atingido os 10 cortes;

Das funcionalidades descritas acima a unica que ficou para próxima versão foi o modal e parabéns quando o clinete atinge o número de cortes.

Abaixo os alerts de validação de ID inválido, primeiro digitando um valor menor do que esperado no campo input, e também ao informar um ID inexistente no campo.



  

    



E como ficou as versões WEB e Mobile:



  





  



---




## 4. Ferramentas Utilizadas

Para esse primeiro desafio, não era possível utilizar nenhum framework ou biblioteca para auxilio no JavaScript.

Com isso para esse projeto foi utilizado somente:

- [x] HTML

- [x] CSS

- [x] Conceitos Básicos de JavaScript

- [x] Babel

- [x] Webpack

- [x] Json-server

---




## 5. Considerações Finais

Ao final do projeto consegui colocar em prática todo o aprendizado durante o primeiro módulo.

Tive alguns desafios, mas consegui entregar o máximo que pude, e estou feliz com o que consegui entregar.

Obrigada aos Educadores dessa primeira etapa Mayk Brito e Rodrigo Gonçalves