Talent Fest: Desafio Citi 💙 🎉

Desafio proposto pela empresa Citi Brasil às alunas da turma 008 da Laboratória.
Projeto desenvolvido pelo squad:
👩‍💻 Andrea dos Santos (@Canzua),
👩‍💻 Anna Clara Andrade(@andradeannac),
👩‍💻 Joyce Teodoro (@dodojoy),
👩‍💻 Michelle Santana (@asmih) e
👩‍💻 Polyana Magalhães (@polyanagm).

Status do Projeto: Concluído! ✔️

O resultado final pode ser visitado aqui!!

Índice

• 1. Introdução
• 2. Resumo do projeto
• 3. Planejamento
• 4. Protótipo
• 5. Resultado
• 6. Ferramentas e Tech Skills

---

1. Introdução

Neste desafio proposto pelo CitiBank no Hackaton da turma 008 da Laboratória, trabalhamos com a criação de um e-commerce onde ao processar o pagamento, possa gerar um código QRCode contendo os dados do cliente, as informações de preço, os dados do produto para o envio do pagamento e seu processamento, e que em seguida esse código possa enviado para ser pago por outras instituições.

2. Resumo do projeto

O projeto CitiShop 💻 é um e-commerce que foi criado à partir do desafio proposto pelo CitiBank no Hackaton da turma 008 da Laboratória. O principal desafio era o de consumir uma API que fizesse o processamento de um pedido, gerando um QRCode para pagamento 💳 💵.

O projeto foi desenvolvido em um squad de 5 pessoas, durante APENAS 3 DIAS. E as principais ferramentas utilizadas durante o processo foram: Github Projects, para o planning e divisão das tasks; Figma, para o processo de prototipação de alta fidelidade; Metroretro para as sessões de retrospectiva diárias; Zoom Meetings, para sessões de pair programming e encontros gerais.

Além disso, o projeto está responsivo e dispõe das ferramentas básicas de acessibilidade (como HTML semântico e texto alternativo com descrição das imagens) utilizamos o conjunto de serviços de hospedagem Firebase. Para manipularmos a parte de backend da aplicação, utilizamos os serviços Firebase Authentication - para fazer o processo de autenticação de usuários, e o Cloud Firestore - para a criação e manutenção do nosso banco de dados.

Também usamos a API QRCode Generator para gerar o QRCode.

3. Planejamento

Utilizamos o método Kanban.

Planning Github Projects

4. Protótipo

HOMEPAGE
Tela inicial onde o usuario pode ver os produtos disponiveis na loja.

CARRINHO
Tela onde o usuario pode ver os produtos em seu pedido de compra e solicitar a geração do QRCode para pagamento.

LOGIN
Tela de login onde o usuário tem a opção de entrar com e-mail e senha cadastrados ou fazer login com o Google.

REGISTER
Tela onde o usuario pode fazer o cadastro no e-commerce.

PAYMENT
Tela onde o usuário tem o QRCode processado para fazer o pagamento da compra.

ABOUT DEVELOPERS
Página com as informações das desenvolvedoras da aplicação.

5. Resultado

Página inical da nossa versão final! Confira o site completo pelo link: aqui!!

6. Implementações Futuras

• Criar uma página de carrinho, onde o usuário possa ver detalhes do produto, adicionar mais de um item e alterar a quantidade de itens.
• Criar uma página do administrador, onde seja possível a inclusão de novos itens para venda.
• Implementar mais ferramentas de acessibilidade.
• Integrar o pagamento com as instituições financeiras.

7. Ferramentas e Tech Skills

7.1 Ferramentas utilizadas

• ✔️ GitHub Projects
• ✔️ Figma
• ✔️ Vs Code
• ✔️ ZOOM Meetings
• ✔️ Firebase Auth
• ✔️ Cloud Firestore
• ✔️ API QRCode Generator
• ✔️ Metroretro

7.2 Tech Skills

• ✔️ Vanilla Javascript
• ✔️ CSS3
• ✔️ HTML5
• ✔️ Git e Github
• ✔️ Consumo de API
• ✔️ Responsividade
• ✔️ Bando de dados
• ✔️ NOSQL
• ✔️ SPA (Single Page Application)