🎯SOBRE O PROJETO:

• Projeto desenvolvido em REACT no front end, e com JAVA no back end.
• O sistema refere-se a um e-commerce com o nome DSCOMMERCE.
• Através do AXIOS é possível criar requisições ao back end e renderizar as respostas no front end.

✅CONHECIMENTOS:

• React (frontend):

  • Components React
  • Props
  • Router-DOM
  • Rotas, Links e Outlet
  • Hooks ( useState, useEffect, useNavigate, useContext)
  • AXIOS para requisições ao back end
  • LocalStorage
  • Eventos e estado Global:
    • Tratamento de eventos com onSearch
    • Esado global com Context API
  • Login e controle de acesso:
    • OAuth2 e Token JWT
    • Requisições de login (cabeçalho e corpo)
    • Salvar token no localStorage
    • Buscar usuário logado no back end
    • Criação do AxiosRequestConfig para requisições
    • Interceptors do Axios
    • Redirecionamento fora do componente JSX
    • Decodificação de token JWT para obter o payload do token
    • Função hasAnyRoles
    • Componente PrivateRoute para rotas privadas
    • Componente LoggedUser para o cabeçalho
  • Forms em React:
    • Dialog modal de aviso e dialog modal de confirmação
    • Deletar um produto
    • Controle de formulário
    • Criação e edição no formulário
    • Função UpdateAll para atualizar
    • Função validate
    • CSS para mostrar erros
    • Função toDirty para sujar o formulário
    • validações e expressões regulares regex
    • FormTextArea customizado
    • React Select
    • Atualizar produto existente com PUT
    • Inserir novo produto com POST
    • Capturar erros do backend para a tela de Login
    • Mostrar erro global na tela de Login

• Java: (backend):

  • Repositories, Services e Controller

• Postman: (testador de requisições)

↗️TECNOLOGIAS:

• VSCODE IDE

🤚DESENVOLVIDO POR:

• Projeto com mentoria da escola Devsuperior

💻 Prints:

Tela de Login (CLIENT):

Tela de catálogo de produtos (CLIENT):

Tela de detalhes de produtos (CLIENT):

Tela de carrinho (CLIENT):

Tela de validação de formulários de login:

Tela de validação de formulários ao criar um novo produto:

Tela de validação de formulários ao editar os dados de um produto existente:

Tela de login (ADMIN):

Tela de listagem de produtos (ADMIN):

Tela para editar um produto existente (ADMIN):

Tela para criar um produto novo no sistema (ADMIN):