Esse projeto visa por em prática os conhecimentos obtidos na disciplina SCC0219 - Introduction to Web Development. Desenvolvemos um site para a livraria fictícia, Livraria da Taverna, com as tecnologias Node, React, Typescript e MongoDB.
O site consiste de dois tipos de usuários: administradores e consumidores.
Os administradores, constítuidos de id, phone, adress, photo, name, email, username, password e isAdmin, devem:
- Registrar e administrar administradores, consumidores e produtos do sistema;
- Usuário e senha padrão são admin e admin, respectivamente.
Os consumidores, constituídos de id, phone, photo, address, name, email, username, password e isAdmin, devem:
- Comprar produtos.
Os produtos (livros) são constituídos de id, name, photo, genres, authors, description, price, quantity stock e quantity sold.
As funcionalidades visadas pelo nosso site são:
- Login com email e senha na plataforma, com opção de criar uma nova conta.
- Visualização das informações do cliente, com opção de alterar cadastro.
- Visualização da página de administrador, com opção de administrar os produto, os usuários e os administradores da loja.
- Acesso à homepage, com visualização de alguns produtos selecionados pela loja.
- Visualização de um produto, com seu nome, descrição, preço e botão para adicionar ao carrinho.
- Acesso ao carrinho de compras, com opção de mudar a quantidade de itens, conferir o preço total e finalizar a compra.
- Opção de inserir informações do cartão de crédito para efetuar o pagamento.
- Opção de alterar o endereço de entrega.
- Venda de Produtos: produtos são selecionados, a quantidade é escolhida e são incluídos no carrinho de compras. Uma venda pode ser efetuada através de um número de cartão de crédito (qualquer número é aceito pelo sistema). A quantidade do produto deve ser subtraída do estoque e adicionada à quantidade vendida;
- Filtro: filtros podem ser aplicados aos produtos pelos clientes. Os filtros possíveis são por name, authors, genres, price, quantity stock e quantity sold. Por exemplo, um cliente pode definir um filtro que mostra apenas os livros cujo gênero é Ficção Científica;
O sistema é acessível e provê boa usabilidade e responsividade.
O link para o protótipo está neste link no Figma.
Todas as páginas e componentes (React Components) tem um arquivo JavaScript e importam styled components para personalização ao invés de um css. O código do Milestone2 está todo no diretório front, dividido entre components para elementos que serão utilizados múltiplas vezes (como a navbar e o footer), admin para páginas do administrador, user para páginas acessadas pelos usuários, e styles com os styled components usados nas páginas.
No decorrer do projeto, decidimos, de acordo com as simulações sugeridas por esta entrega (Milestone 2) testar algumas funcionalidades para garantir uma boa experiência para o usuário, sendo estas:
- Cadastro de conta;
- Login;
- Operações no carrinho, como adição e remoção de itens;
- Compra;
- Logout;
- Busca de livros;
- Filtros por genêros, preço e disponibilidade;
- Operações de Administrador, como criação, edição e deleção de produto, remoção de usuários e adição ou remoção de administradores;
Para testar as funcionalidades basta seguir o modelo do figma de funcionalidades feito no projeto do Milestone 1.
Os testes indicaram um bom funcionamento em todos os casos, o que indica que nossa loja está no caminho certo para ser integrada ao lado do servidor.
Para a Segunda Entrega, caso queira rodar o programa, basta iniciar o projeto React dentro da pasta front. Após realizar o setup do framework, utilize os comandos npm install e npm start para executar a aplicação.
| NUSP | Nome |
|---|---|
| 11819084 | Gabriel Freitas Ximenes de Vasconcelos |
| 11796336 | Raissa Torres Barreira |
| 11795530 | Rodrigo Lopes Assaf |