/petshop-1

trabalhinho

Primary LanguageHTML

Pet Shop Online šŸ¶

Desenvolvedores e Github

Enrique Teles, enriqueteles

Marcus ParĆ”, MarcusMedeiros99

Mathias Fernandes, Math-O5

***

DescriĆ§Ć£o

Pet Shop Online Ć© um site desenvolvido utilizando HTML5, CSS3, React e Nodejs. O intuito foi aplicar conceitos de desenvolvimento web e UX Design ā€“ User experience - para prĆ”tica-los. No site, foram desenvolvidas funcionalidades que pudessem gerar uma interface entre o pet shop que vende produtos e serviƧos e os clientes. Assim, criamos essas duas seƧƵes principais, que permite administradores pĆŗbicarem e modificarem serviƧos e produtos, enquantos os clientes, ao cadastrarem-se, podem comprar, adicionar ao carrinho, cadastrar pets e agendar serviƧos. Outras funcionalidades adjacĆŖntes tambĆ©m foram implementadas. A seguir uma descriĆ§Ć£o tĆ©cnica.

Fase 1: Mockup

Prototipo em Html e Css. Veja aqui: Backend

Fase 2 e 3: React + Nodejs

Estrutura backend: Backend ImplementaĆ§Ć£o do frontend em React e do backend em Nodejs e mongooose. Seguida da integraĆ§Ć£o de ambos.

Execution

Para executar o servidor entre no backend/README.md. Para executar oa aplicaĆ§Ć£o entre em frontend/README.md

Fluxograma recomendado para o usuƔrio

Ao entrar na HOME, o usuƔrio entrar e pode ver os proutos, lista-los, filtra-los, adiciona-los ao carrinho, agendar um serviƧo, adicionar pets e editar o perfil.

fluxograma_de_navegaĆ§Ć£o


Funcionalidades implementadas

Cliente Home About Login Produtos ServiƧos Perfil Carrinhos Pets RelatĆ³rio
PĆŗblico V V Re V V āŒ āŒ āŒ āŒ
UsuĆ”rio V V Entrar V/C V/Ag V/E V/E/R V/E/A/R āŒ
Admin V V V/A/E/R V/A/E/R V/A/E/R V/A/R V/R V/R V

Legenda
V : Ver
A : Adicionar
E : Editar
R : Remover
C : Comprar
Ag : Agendar>
Re : Registrar-se>
āŒ : nĆ£o disponivel

Dados šŸ“‚

InformaƧƵes salvas no banco de dados e a relaĆ§Ć£o entre elas.

  • Produtos
    • id
    • nome
    • foto
    • Marca : Marca
    • typeofPet : string
    • preƧo : double
    • quantidVendia : int
  • ServiƧos
    • id
    • nome
    • preƧo : double
    • detalhes : string
    • maximoSlot : int
  • Reserva
    • id
    • Client
    • Slot
    • Pet
    • Servico
  • Client
    • id
    • nomeCompleto
    • login
    • password
    • foto
    • telefone
    • nascimento
      • email
    • endereƧo
    • cartaoDeCredito
    • lista : Pet
    • Carrinho
  • Pet
    • Client
    • id
    • nome
    • descriĆ§Ć£o
    • raƧa
    • nascimento
  • Marcas
    • id : int
    • nome : string
    • descricao : string
  • Carrinho
    • Produto : array
    • quantidade : int
    • pendente : boolean
  • Slot
    • data : string
    • hora: int
    • min: int

DescriĆ§Ć£o dos arquivos

Assets Todas as pastas com arquivos estaticos, isto Ć©, imagens, css e fonts.

CSS Todos arquivos de estilo estĆ£o nessas pastas

public/ Todos arquivos que sĆ£o renderizados em mais de uma pĆ”gina, como header, footers e etc.

product/product.html Todos produtos, permite filtragem por animal, marca e tipo de produto.

service/service.html Todos os serviƧos, permite filtragem e redireciona para cada serviƧo.

perfil/perfil.html Tela principal perfil do usuƔrio.

perfil/pets.html Todos pets cadastrados pelo usuƔrio. Permite cdastro de novos pets.

perfil/carrinho.html Todos os produtos adicionados pelo usuƔrio. Permite a comprar do carrinho.