cjambrosi / nlw-ai

NLW AI - Ocorrido entre os dias 11/09/2023 e 14/09/2023

NLW - AI

Material complementar

Repositório oficial

Dicas de ferramentas:

• httpie: https://httpie.io
• REST Client for VSCode : https://marketplace.visualstudio.com/items?itemName=humao.rest-client
• Aramazenamento de arquivos em Clund:
  • Amazon S3
  • Cloudflare R2
    • Não cobra taxa de egress, ou seja, taxa de download.

Dicas:

• No JavaScript quando temos um número muito grande como 1048576, para visualizar melhor as casas dos milhares é possível utilizar o undernline (_), ficando 1_048_576. Isso não afetará o valor.

Front-end

Instalar e configurar o shadcn/ui com Tailwind CSS e Radix UI.

• Tailwind CSS

  Instalar:

  npm i -D tailwindcss postcss autoprefixer

  Configurar:

  npx tailwindcss init -p

• No arquivo tsconfig.json em compilerOptions adicionar o código a baixo:

  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }

• Instalar o @types/node:

  npm i -D @types/node

• Atualizar o arquivo vite.config.ts com o código a baixo:

  import path from "path"
  import react from "@vitejs/plugin-react"
  import { defineConfig } from "vite"
  
  export default defineConfig({
    plugins: [react()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
  })

• Excutar o CLI do shadcn/ui para configurar o projeto com as configurações realizadas:

  npx shadcn-ui@latest init

• Comando para adicionarmos componentes do shadcn/ui no projeto automaticamente:

  npx shadcn-ui@latest add button

Instalar a biblioteca Lucide React para ícones:

npm i lucide-react

Instalar a lib de conversão de ádio/vídeo ffmpegwasm:

npm install @ffmpeg/ffmpeg @ffmpeg/util

Instalar o pacote da Vercel ai (ajuda a retornar a reposta da AI aos poucos):

npm i ai

Back-end

Iniciar configuração do Node.js:

npm init -y

Instalar dependências de desenvolvimento:

npm i -D typescript @types/node tsx

Instalar o framework fastify para rotas HTTP:

npm i fastify

Instalar a lib fastify-multipart:

npm i @fastify/multipart

Instalar e configurar o Prisma ORM

• Instalação:

  npm i -D prisma

• Configuração com SQLite:

  npx prisma init --datasource-provider sqlite

• Comando para gerar migrations do Prisma no ambiente de desenvolvimento:

  npx prisma migrate dev

• Visualizar o banco de dados com CLI do Prisma:

  npx prisma studio

• Executar o arquivo seed.ts:

  npx prisma db seed

Instalar o zod para validação:

mpm i zod

Instalar a biblioteca openai:

npm i openai

Instalar o pacote da Vercel ai (ajuda a retornar a reposta da AI aos poucos):

npm i ai