prolog app

Esse repositório faz parte do simulador de trabalho do React, onde você trabalha em um ambiente de desenvolvimento profissional com ferramentas avançadas e fluxos de trabalho. Você implementa tarefas com base em designs a partir das pequenas correções de bugs a recursos completos. Basicamente, você aprende muitas das coisas que você geralmente só experimenta depois de ingressar em uma equipe de React Professional.

O aplicativo

O aplicativo é uma ferramenta de log e monitoramento de erros semelhante à sentinela ou barra de roll. Você pode encontrar uma versão implantada da filial principal em prolog.profy.dev. NOTA: Você deve clicar no link "Painel" no canto superior direito para ver o aplicativo, como mostrado na captura de tela abaixo.

Tour da base de código

Assista a este vídeo para uma turnê pela Base CodeBase.

Começando

1. Clone & Install

Este projeto foi construído com módulos Next.Js, TypeScript, Cypress e SCSS, entre outros. Para começar a trabalhar no projeto, clone primeiro o repositório em sua máquina local e instale as dependências.

npm install

2. Criar arquivo .env

Copie o arquivo .env.template para um novo arquivo chamado .env . Este arquivo contém as variáveis de ambiente necessárias que são injetadas pelo Next.js através do pacote dotenv .

3. Execute o servidor de desenvolvimento

Por fim, execute o servidor de desenvolvimento:

npm run dev

Agora você pode abrir http: // localhost: 3000 com seu navegador para ver o aplicativo.

Extensões recomendadas de código vs

Este projeto usa ferramentas como ESLint, Stylelint e mais bonito. Para aproveitar ao máximo essas ferramentas, é recomendável instalar as extensões correspondentes. Para o código VS, esses são:

• Eslint
• Stylelint
• Mais bonito
• SCSS Intellisense (por exemplo, para preenchimento automático de variáveis SCSS)
• React Módulos CSS (por exemplo, para abrir a definição de classe CSS com CMD/CTRL + Clique e avise sobre nomes de classe inexistentes)

A extensão oficial do Stylelint pode precisar de algum ajuste do seu arquivo settings.json . Se não funcionar fora da caixa, tente adicionar estas linhas:

 "css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.validate": ["css", "scss"],

Extensões adicionais que acho muito valiosas são

Código Gitlens SVG Github Copilot (pago)

Testes

Este projeto é coberto com testes de cipreste. Embora a maioria dos testes para aplicativos de produção esteja atualmente escrita com a React Testing Library, o Cypress é a melhor opção para começar com os testes. Quando você é novo em testar, o começo pode ser muito pesado e sentir que você está em um ambiente de desenvolvimento completamente novo.

O Cypress facilita muito o início dos testes. Você ainda precisa se acostumar com a nova maneira de codificar, mas graças à sua incrível depuração da interface do usuário é fácil e muito semelhante ao que você está usado no seu navegador.

Para executar os testes do Cypress em sua máquina local, use este comando:

npm run cypress

Livro de histórias

O Storybook é uma ótima ferramenta para documentar seus componentes e testá -los visualmente isoladamente. Para abrir o Storybook Run

npm run storybook