O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenchidas pelo usuário usando um formulário.

Overview

Web-Chat


chat


Introdução

O Web-Chat é um projeto com o intuito de criar um chat de ajuda, que contém uma experiência dinâmica e salva as informações preenchidas pelo usuário usando um formulário.


📁 Acesso ao projeto

Você pode baixar o projeto, via github, ou acessa-lo pelo a seguir link para testá-lo.
https://app.netlify.com/sites/elegant-monstera-1527bc/deploys/631f6e6979a001000867e041


📼 Instalação

  • Instalação de dependências: Para instalar as dependências, use o comando a seguir:
npm install

ou, se preferir use o yarn:

yarn
  • Inicialização do projeto: Para iniciar o projeto, use o comando a seguir:
npm run init

🔨 Requisitos do projeto

  • Requisito 1 Experiência dinâmica: Apresentar uma experiência dinâmica, onde o usuário preenche um campo por vez, e ao preencher o primeiro campo, mostra o segundo, e assim por diante.
  • Requisito 2 Máscara para validação de data e e-mails válidos: O sistema precisa ter uma máscara de validação de valores de todos os inputs necessários.
  • Requisito 3 Estado diferente quando estiver com dados incorretos: Deve-se ter um estado diferente no componente de input, ao usuário digitar um valor inválido e clicar em salvar.
  • Requisito 4 Autocomplete para as cidades: Ter um autocomplete no campo de "Cidade", mostrando todas as cidades disponíveis para seleção.
  • Requisito 5 Testes unitários: Escrita de testes em componentes possíveis com JEST, react-test-library e storybook.
  • Requisito 6 Simulação de API: Enviar os dados escritos para a URL 'https://mockapi.io'para simular uma conexão.
  • Requisito 7 Responsividade: A aplicação deve se comportar em todos os tipos de tela.

✔️ Técnicas e tecnologias utilizadas

  • Typescript
  • React
  • Jest
  • Formik
  • Yup
  • Axios
  • React-Test-Library
  • Styled-Components
  • Font-Awesome
You might also like...

Um projeto que eu criei de uma ONG de adoção de cachorros

Um projeto que eu criei de uma ONG de adoção de cachorros

Projeto Pet Hope 🐶 Landing page de uma ONG fictícia de adoção de cachorros. Layout do site Uma landing page simples com um menu 'Quero adotar' que le

Jul 13, 2022

O projeto MKS Sistemas tem como objetivo o desenvolvimento de uma aplicação em React que utilize endpoint da API de produtos fornecida pela própria MKS Sistemas.

  O projeto MKS Sistemas tem como objetivo o desenvolvimento de uma aplicação em React que utilize endpoint da API de produtos fornecida pela própria MKS Sistemas.

MKS front-end Descrição O projeto MKS Sistemas tem como objetivo o desenvolvimento de uma aplicação em React que utilize endpoint da API de produtos f

Jul 21, 2022

Este repositório contem o desafio do curso da rocketseat Ignite Conceitos do Nodejs

Projeto API TODO Nessa aplicação foi feita uma API, que é uma gerador de tarefas TODOS, onde o usúario pode cadastrar um name e um username, e a aplic

May 12, 2022

Informações de todos os Agentes e Armas e Skins do Valorant

Informações de todos os Agentes e Armas e Skins do Valorant

Bem vindo a Valorant Info Criei um painel que busca as informações dos Agentes(Informaçoes das habilidades e também um vídeo mostrando como e usada) T

Jul 29, 2022

Página da Web que tem uma calculadora simples utilizando CSS Grid, JavaScript e HTML

Calculadora-Oline Calculadora exibida online via HTML e CSS, com foco no CSS Grid. Utilizei quatro (sub)grids dentro de uma principal, a qual engloba

Nov 21, 2022

Hola bienvenido al the LoliBot-MD aquí se hacer actualizaciónes de bot. Bot que funciona el (WhatsApp multidivice) espero que te guste😊

Hola bienvenido al the LoliBot-MD aquí se hacer actualizaciónes de bot.         Bot que funciona el  (WhatsApp multidivice) espero que te guste😊

Esta versión de THE LOLIBOT-MD casi está terminada. ✨ —◉ DUDAS SOBRE EL BOT?, CONTACTAME ✨ Quieres tener un bot 24/7 activo 🟣 ACTIVAR EN HEROKU ☂️ PA

Dec 26, 2022

Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript, Styled-Components, Axios, React-Feather e Open Trivia Database.

Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript, Styled-Components, Axios, React-Feather e Open Trivia Database.

TRIVIA-QUIZ Trivia-Quiz é uma aplicação baseada no jogo Perguntados, em que consiste em um quiz de diferentes questões. Feito com ReactJS, JavaScript,

Feb 6, 2022

Criei uma série de exercícios para ajudar as pessoas que estão começando com programaçao em javaSript

Pratique-js Antes do desenvolvimento ⏮️ 1 - Faça o clone do repositório na sua máquina utilizando ssh ou https git clone 2 - Instale o npm npm insta

Jul 27, 2022
Owner
BiaGrenzel
Meu nome é Bianca, tenho 20 anos, entrei na área de Tecnologia aos 16 anos, cursando Desenvolvimento de Sistemas e hoje curso ADS na universidade São Judas.
BiaGrenzel
Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pelo cmd.

fast-developer-express Este projeto acelara o desenvolvimento com express, gerando uma estrutura completa e opções de gerar controller mode e view pel

Rodrino Adolfo Kupessala 1 Dec 21, 2021
Projeto de uma API REST usando backend em Node.js

?? WIP - ToDo API - T17 - Resilia Projeto de educacional do curso de Web Dev Full Stack da Resilia Educação referente ao Módulo 04. Projeto realizado

Cinthia Miranda Cantu 14 Nov 30, 2022
API Rest com as informações do estoque de uma livraria.

?? Bookstore API Projeto de encerramento do módulo 4 da Resilia Educação. O objetivo é desenvolver uma API Rest com as informações do estoque de uma l

Vanessa Reis 9 May 5, 2022
Uma opção simples baseada na biblioteca exceljs para criar planilhas.

NODE-SHEET A simple option based on the exceljs library to create spreadsheets. Disclaimer The project is under development and is not fit to be used

Pedro Henrique 5 Oct 11, 2022
Olá, este repositório, é um mini-relatório do que eu aprendi através de cursos de JavaScript. Este repositório, muito provável que fique familiar com o que os professores ensinam .

About Project Olá pessoal, este repositório tem o objetivo de relatar meus aprendizados dos cursos que fiz sobre a linguagem JavaScript. Não só com o

Nior 6 Jul 10, 2022
Apenas uma página que exibe um countdown com a data em que Bolsonaro sai da presidência e tem seu sigilo de 100 anos quebrado

Chá de revelação - Sigilo de 100 anos Descrição Apenas uma página que exibe um countdown com a data em que Bolsonaro sai da presidência e tem seu sigi

Mauricio Taffarel 9 Nov 6, 2022
A ideia do projeto era desenvolver um jogo onde o usuário pode tentar "descobrir" ou melhor dizendo, lembrar a maior quantidade de HTML Tags em um determinado tempo.

HTML Tag Memory Test ?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: ViteJS ReactJS Typescript Tailwind Zustand Immer Axios

Igor Santos 4 May 17, 2022
Uma Intranet que permite um acesso restrito e promove a integração dos processos de uma empresa, facilitando o dia-a-dia dos seus colaboradores.

Intranet ANÁLISE E DESENVOLVIMENTO DE SISTEMAS PROJETO: DESENVOLVIMENTO WEB FRONT-END 1 SEMESTRE Uma Intranet que permite um acesso restrito e promove

Análise e Desenvolvimento de Sistemas - PUC Minas Virtual 5 Jun 1, 2022
O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar ?? Sobre o projeto Voltar ao topo O ob

João Victor Negreiros 19 Aug 3, 2021