🛠️ Tecnologias/Ferramentas ultilizadas

• NPM de instalação das tecnologias mais usadas por mim

Config GIT

[user]
    name = WalysonMoura
    email = walysonmoura222@gmail.com

[includeIf "gitdir:C:/Users/Vaio/www/programacao/redacao-ia/"]
  path = C:/Users/Vaio/www/programacao/redacao-ia/.gitconfig-redacao-ia

[includeIf "gitdir:C:/Users/Vaio/www/programacao/agencia-upcoder/"]
  path = C:/Users/Vaio/www/programacao/agencia-upcoder/.gitconfig-agencia-upcoder

[core]
  editor = code --wait

[alias]
  s = !git status -s
  c = !git add --all && git commit -m
  l = !git log --pretty=format:'%C(blue)%h%C(red)%d %C(white)%s - %C(cyan)%cn, %C(green)%cr' 

Front-End

• Instalação React / Next.JS / Styled-Components

npm create next-app

• Style-components

npm i styled-components --save

npm i  -D babel-plugin-styled-components

Para utilizaçâo do Styled Components com Next é necessário a criação do arquivo babel.config.js na raiz do projeto com as configurações a seguir:

  {
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

• React icons

Buscar Icones

  npm i  react-icons --save 

• React Reveall

npm i  react-awesome-reveal @emotion/react --save

• React Tilt site

npm i  react-parallax-tilt

• Animate.css

npm i  animate.css --save 

• Spline 3D

npm i  @splinetool/react-spline @splinetool/runtime

Ferramentas Extra

• CSS Buttons
• Neumorphism
• Efeito Vidro
• Testes
• Box-Shadow CSS Generator
• FANCY-BORDER-RADIUS

Back-End 💻

ambiente Node.js

 npm init -y   

• All

 npm i typescript  @types/node tsup vitest  eslint tsx -D   

• TSX

 npm i tsx -D   

• TypeScript

npm add typescript  @types/node -D 

• Configuração do TypeScript

 npx tsc --init

 {
   "target": "es2020",  
   
   "baseUrl": "./",                                     /* Specify the base directory to resolve non-relative module names. */
    "paths": {
      "@/*": ["./src/*"]
    },
 }

• compilar TypeScript

pnpm i ts-node-dev -D

compilar TypeScript (Build)

• tsup

npm i tsup -D

• ESlint

 npm i eslint -D   

 npm init @eslint/config 

 npm i @rocketseat/eslint-config -D   

 npm i eslint-plugin-vitest-globals -D   

arquivo .eslintrc.json

 {
   "extends": [
     "@rocketseat/eslint-config/node",
     "plugin:vitest-globals/recommended"
   ],
   "rules": {
    "no-useless-constructor": "off",
    "no-new": "off"
   },
   "env": {
    "vitest-globals/env": true
  }
 }

arquivo .eslintignore

 node_modules
 build

{
 "scripts": {
   "start": "tsx src/server.ts",
   "lint": "eslint src --ext .ts --fix",
   "dev": "tsx watch src/server.ts",
   "build": "tsup src",
   "test": "viteste"
 }
}

• dotenv

 npm i dotenv   

• .npmrc

.npmrc

save-exact=true  

Framework

• Express

   npm i express   

   npm i  @types/express -D 

• Fastify

   npm i fastify  

   npm i  @fastify/cookie

• Nest.JS

   pnpm  

    pnpm

Testes

• Viteste

 npm i vitest -D

vite.config.js

  import { defineConfig } from 'vitest/config'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
  test: {
     globals: true,
    environmentMatchGlobs: [['src/http/controllers/**', 'prisma']],
  },
})

tsconfig.json

  "types": [
      "vitest/globals"
    ]

Docker

• Docker Composer

docker-compose.yml

 version: '3'
   services:
     api-solid-pg:
       image: bitnami/postgresql
       ports:
         - 5432:5432
       environment:
         - POSTGRESQL_USERNAME=docker
         - POSTGRESQL_PASSWORD=docker
         - POSTGRESQL_DATABASE=apisolid
     

 docker compose up -d

Comandos Docker

• Com esse comando você verifica todos os containers ativos (e não ativos com o comando -a)

 docker ps -a

 docker ps -a

 docker start nome_do_container

• O comando run cria um novo container e logo após você especifica o nome da imagem que o mesmo vai utilizar (no exemplo a a imagem hello-world)

 docker run hello-world

• O comando -it especifica que o container (no exemplo a a imagem hello-world) após ser criado deverá ficar ativo e executar com o comando bash
• Com o comado --rm o container deverá ser excluido após executado

  docker run -it --rm ubuntu:latest bash

Nginx

  docker run nginx 

• Por padrão o nosso container criado com a imagem do Nginx utiliza a porta 80
• com o comando -p 8080:80 utlizamos um redirecionamento da porta que o container está utilizando com alguma porta da nossa máquina, assim podemos acessar a porta do nosso Container
• o comando -d é possivel utilizar o terminal, e o processo do contaneir será executado sem bloquear o terminal

  docker run -d -p 8080:80 nginx

Remover containers

• Utilize o comando rm com ID do container

  docker rm 07f933bceeef

ORM

• Prisma

 npm i -D prisma

 npm i @prisma/client

Iniciando Database

 npx prisma init --datasource-provider sqlite

Criando Migrations

npx prisma migrate dev

Prisma Studio

 npx prisma studio

Gerador de diagrama de relacionamento com entidades Prisma

 npm i -D prisma-erd-generator @mermaid-js/mermaid-cli

Cole esse código no arquivo schema.prisma :

generator client {
 provider = "prisma-client-js"
 output   = "./generated/prisma-client-js"
}

npx prisma generate

Prisma Client com o Next.js

  import { PrismaClient } from '@prisma/client'

const prismaClientSingleton = () => {
 return new PrismaClient()
}

declare global {
 var prismaGlobal: undefined | ReturnType<typeof prismaClientSingleton>
}

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton()

export default prisma

if (process.env.NODE_ENV !== 'production') globalThis.prismaGlobal = prisma

SQL Query Builder

• Knex.js

  npm install knex sqlite3