Giter VIP home page Giter VIP logo

poti-front's Introduction

Potiánuncios frontend

ℹ️ Sobre o projeto

Este projeto deu inicio a criação de uma plataforma para facilitar o encontro e divulgação de produtos e serviços de produtores rurais de agricultura familiar do Rio Grande do Norte.

  • Trabalho de conclusão do curso de Análise e Desenvolvimento de Sistemas, UFRN - EAJ. Escola Agrícola de Jundiaí.
  • O projeto conta com duas aplicações clientes se comunicando com a API REST, a aplicação dos anunciantes têm o modo de utilização onde os anunciantes gerenciam os próprios anúncios e a aplicação dos administradores tem a possibilidade da gerência e administração de todos os anúncios da plataforma, como é mostrado abaixo, e englobada na aplicação dos anunciantes estão as funcionalidades públicas, que são a visão que os clientes em potencial terão da plataforma.

⚙️ Funcionalidades Administradores

  • Autenticar-se
  • Visualizar todos os anúncios
  • Validar anúncios
  • Visualizar os administradores cadastrados
  • Cadastrar novos administradores

⚙️ Funcionalidades Anunciantes

  • Registrar-se na plataforma
  • Autenticar-se
  • Recuperar a senha via email
  • Visualizar os seus anúncios
  • Cadastrar novos anúncios
  • Adicionar fotos aos seus anúncios
  • Excluir anúncios
  • Ativar/desativar anúncios
  • Filtrar anúncios

⚙️ Funcionalidades De acesso sem Autenticação

  • Listagem de todos os anúncios
  • Detalhamento dos anúncios
  • Ter acesso às informações de contato do anunciante de cada anúncio

🎨 Demonstração Layout Administradores

Autenticação

Login

Cadastro Novo Administrador

Login

Tela de boas vindas administrador

Login

Validação de anúncios

Login

Listagem pendentes para validação

Login

Detalhamento anuncio visão administrador

Login

Listagem de administradores

Login


🎨 Demonstração Layout Anunciantes


🎨 Demonstração Layout Público


🛠 Tecnologias

💻 Frontend (Vue.js)

Veja o arquivo package.json do projeto vue dos anunciantes

Veja o arquivo package.json do projeto vue dos administradores


👩🏽‍💻 Autores


Bruno Jamelli

💻 🎨

📝 Licença

This project is under MIT. See at here LICENSE for more informations.


poti-front's People

Contributors

brunojamelli avatar

Watchers

 avatar

poti-front's Issues

validação de anúncio

validação do anuncio com o clock do botão validar, acionando o methodo http PATCH do backend e alterando o atributo valid do banco de dados.

cadastro anúncio

  • Criação do formulário de cadastro das informações de anuncio;
  • Requisição POST a API para o recurso de registro de anuncio;
  • Feedback para o usuário que ele pode adicionar as fotos do anuncio depois.

alerts customizados

adicionar alerts customizados nos feedbacks de ações nas aplicações de administrador e anunciante

logout

botão para deslogar da aplicação.

listagem meus anuncios

Listagem dos meus anúncios na tela inicial

  • Com os botoes do lado da barra de navegação, filtrar junto a API quais anúncios trazer na listagem de acordo com o Click;
  • Implementar logica de click para cada click fazer uma chamada diferente a API e trocar os dados da lista;
  • Mostrar na tela os anúncios com os seguintes atributos nome, valor, descrição e foto;
  • Interceptar em tempo de execução o id do usuário que esta logando;
  • Montar a tela inicial buscando especificamente os anúncios do anunciante de id interceptado;
  • Adicionar a cada anuncio os botões de exclusão e desativação;
  • Adicionar a ação de exclusão no botão de APAGAR;
  • Adicionar ação de confirmação de exclusão ou não junto a esse botão;
  • Adicionar a ação de desativar ao botão desativar;

confirmação senha admin

adicionar mais um campo no formulário de cadastro de administrador para a confirmação da senha.

desativação anuncio

  • Criar botão para desativar temporariamente o anuncio.;
  • Criar método vue click do botão;
  • Criar chamada a API para fazer a requisição path e alterar o atributo, assim desativando o anuncio de fato;
  • Redirecionar novamente para a tela inicial.

confirmação senha anunciante

adicionar mais um campo no formulário de cadastro de anunciante com o intuito de confirmar a sua senha digitando-a duas vezes.

cadastro imagens anuncio

  • Formulário com o campo de upload de imagem do anuncio;
  • Botão para confirmar a ação de upload da imagem;
  • Chamada ao POST da API que salva as imagens do anuncio no banco de dados.

tela perfil

  • Com o id do anunciante, buscar junto a API as suas demais informações;
  • Criar view para mostrar as informações do anunciante.

cadastro anunciante

  • Configuração no roteamento para a chamada da tela de registro
  • Criação de view com o formulário de cadastro do anunciante
  • Criação da logica da comunicação com a API para a chamada do POST de anunciante
  • Adição do botão de registro de anunciante na tela inicial (login) da aplicação

criar classe de service

criar classe de service que utilizara o axios para tratar da comunicação do backend com o front

exclusão anuncio

  • Criar botão de exclusão;
  • Criar evento de click do botão;
  • Criar modal com botões de confirmação e desistência da ação;
  • Criar evento de desistência e de confirmação da ação;
  • No evento de desistência, apenas fechar o modal;
  • No evento de confirmação, fazer chamada a API para fazer a requisição delete e remover o anuncio da lista.

autenticação anunciante

  • Criar view de login, onde o usuário ira informar o seu email e a senha;
  • Capturar dados da view de login e interagir com a API fazendo a requisição POST;
  • Interação com store para armazenamento do token;
  • Criar o beforeEach para controle de acesso a rotas apenas com o token valido;
  • Implementar a autenticação do anunciante, para que apenas logado, ele possa acessar as telas com as suas informações e seus anúncios.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.