MetlHedd / proj-web

Breno Alves de Sousa - 11345555
Johnny Batista da Silva - 11371350
Yure Pablo do Nascimento Oliveira - 11275317

Trabalho da disciplina SCC0219 Introdução ao Desenvolvimento Web

Role.com

Neste repositório é apresentado um sistema WEB para vender rolês universitários. É possível buscar rolês em regiões próximas a você, filtrando categorias de seu interesse, tais como preço, LGBT friendly, open bar. Com isso, é possível comprar ingressos para o rolê pelo sistema e mudar a titularidade do ingresso.

Requisitos

• O sistema deve comportar dois tipos de usuários:
  • Cliente: Aquele que acessa o website para comprar ingressos para rolês.
  • Administrador: É responsável por gerenciar os ingressos da festa, mudança de lote, etc. A aplicação já vem com uma conta admin e senha admin.


• O sistema deve permitir que os usuários realizem seu cadastro no site:
  • os dados dos clientes a serem armazenados são: nome, CPF, data de nascimento, endereço, telefone, email e senha.
  • os dados dos administradores a serem armazenados são: nome, CPF, telefone, email e senha.


• O registro do serviço deve incluir: nome, id, foto, descrição, número de lotes, número do lote atual, preço do lote, quantidade de ingressos do lote, quantidade de ingressos vendida, gêneros musicais do rolê, tipo do rolê, data, local do evento, open bar (booleano).


• Venda de ingressos:
  1. O rolê é escolhido, a quantidade de ingressos é escolhida e os ingressos são incluídos no carrinho.
  2. Os ingressos são comprados usando um cartão de crédito (qualquer número é aceito pelo sistema).
  3. A quantidade de ingressos é subtraída da quantidade em estoque.
  4. O carrinho é esvaziado apenas quando o pedido é pago pelo cliente.
  
  
• É permitido a venda de apenas 5 ingressos de um mesmo rolê por CPF.


• Administradores podem criar/atualizar/ler/deletar novos rolês e ingressos associados (CRUD).


• Funcionalidade específica: É possível mudar a titularidade de um ingresso já comprado no nosso site para outros clientes. Um cliente escolhe o email ou CPF de outra pessoa e transfere o ingresso.


• O sistema deve ter requisitos de acessibilidade e prover boa usabilidade. O sistema deve ser responsivo.

Descrição do projeto

O sistema começa com uma tela inicial que apresenta os rolês principais patrocinados, algumas categorias e uma lista de rolês para o cliente interagir. Além disso, no header é possível migrar para a tela de cadastro, tela de login, lista completa de rolês, tela de histórico de ingressos comprados, tela de perfil e tela do carrinho.

• Tela de Cadastro: Nesta tela o usuário consegue se registrar apresentando nome, CPF, data de nascimento, id, endereço, telefone, email e senha.
• Tela de Login: O usuário consegue entrar na sua conta apresentando email e senha.
• Tela de Rolês: É possível ver uma lista vertical de rolês. Ao clicar no rolê é possível ver a descrição completa do rolê em outra tela.
• Tela de Descrição do Rolê: É a tela que apresenta todas as informações sobre o rolê, e possui o botão de adicionar ingressos ao carrinho.
• Tela de Carrinho: Nesta tela é possível ver todos os pedidos realizados e finalizar a compra.
• Tela de Ingressos: Nesta tela é apresentado um histórico de ingressos já comprados pelo usuário em ordem cronológica. É possível também mudar a titularidade do ingresso nesta tela.
• Tela de perfil: Nesta tela é possível atualizar os dados fornecidos na etapa de cadastro, exceto o CPF e a data de nascimento.

É possível ver com mais detalhes o funcionamento do sistema no diagrama abaixo.

Abaixo é apresentado o diagrama de navegação do administrador.

O protótipo completo encontra-se no Figma.

As informações que serão salvas no servidor se referem ao cadastro do usuário e aos dados do rolê, esses apresentados na seção de requisitos. Também serão salvos todos os pedidos realizados pelo usuário (ingressos comprados).

Comentários sobre o código

Os protótipos são realizados em HTML5 e CSS3. São implementadas três telas: tela de rolês, tela principal, e tela de descrição do rolê.

O front-end é feito usando React com Next.js e o CSS é montado com a ajuda do framework Tailwind.

Plano de Testes

Foi realizado testes manuais de qualidade acerca das funcionalidades oferecida pelo site.

Resultados dos Testes

Procedimentos de Build

Instale as seguintes dependências:

• podman (ou docker)

• podman-compose (ou docker compose)

• nodejs

• npm (ou yarn)

• Clone o repositório:

git clone https://github.com/MetlHedd/proj-web.git

• Execute a aplicação:

podman-compose up -d
npm run dev

A aplicação poderá ser acessada com a url http://localhost:3000, para ter dados inicias a rota http://localhost:3000/api/hello foi disponibilizada, com o seguinte usuário admin inicial:

• email: [e-mail]
• senha: 123

Problemas

Em breve.

Comentários Adicionais

Nenhum.