ChatGPT Clone

? Começando

‼ ️ Pré -requisitos

• Inscreva -se para uma conta do Firebase aqui
• Instale o nó JS no seu computador aqui
• Obtenha a chave da API OpenAI aqui

? Variáveis ​​de ambiente

Para executar este projeto, você precisará adicionar as seguintes variáveis ​​de ambiente ao seu arquivo .env

OPENAI_API_KEY

NEXTAUTH_URL

GOOGLE_CLIENT_ID

NEXT_PUBLIC_SECRET

GOOGLE_CLIENT_SECRET

NEXT_PUBLIC_BASE_URL

NEXT_PUBLIC_FIREBASE_APP_ID

NEXT_PUBLIC_FIREBASE_API_KEY

NEXT_PUBLIC_FIREBASE_PROJECT_ID

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET

NEXT_PUBLIC_FIREBASE_MESSAGING_SET

FIREBASE_SERVICE_ACCOUNT_KEY

Instalação

Instale o meu projeto com o NPM

 npx create-next-app@latest my-project --typescript

 cd my-project

Instalar dependências

? Instale o Tailwind CSS com o Next.js

Instale o Tailwind CSS

Instale o TailWindcss e suas dependências de pares via NPM e, em seguida, execute o comando init para gerar tailwind.config.js e postcss.config.js .

 npm install -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p

Configure seus caminhos de modelo

Adicione os caminhos a todos os seus arquivos de modelo no seu arquivo tailwind.config.js .

 /** @type {import('tailwindcss').Config} */
module . exports = {
  content : [
    "./app/**/*.{js,ts,jsx,tsx}" ,
    "./pages/**/*.{js,ts,jsx,tsx}" ,
    "./components/**/*.{js,ts,jsx,tsx}" ,
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}" ,
  ] ,
  theme : {
    extend : { } ,
  } ,
  plugins : [ ] ,
} 

Adicione as diretivas do Tailwind ao seu CSS

Adicione as diretivas @tailwind para cada uma das camadas do Tailwind ao seu arquivo ./styles/globals.css .

 @tailwind base;
@tailwind components;
@tailwind utilities;

Instalar dependências

? Outras informações de dependência

? Execute localmente

Clone o projeto

  git clone https://github.com/SashenJayathilaka/ChatGPT-Clone.git

  npm install

Começando

Inicie o servidor primeiro, execute o servidor de desenvolvimento:

  npm run dev

Este é um project create-next-app

Instale as dependências Este é um projeto Next.js projetado com create-next-app .

Abra http: // localhost: 3000 com seu navegador para ver o resultado.

Você pode começar a editar a página modificando pages/index.js . A página de atualização automática ao editar o arquivo.

As rotas da API podem ser acessadas em http: // localhost: 3000/API/Hello. Este terminal pode ser editado nas pages/api/hello.js .

O diretório pages/api é mapeado para /api/* . Os arquivos neste diretório são tratados como rotas de API em vez de páginas de reação.

Saber mais

Para saber mais sobre o Next.js, dê uma olhada nos seguintes recursos:

• Documentação Next.JS - Saiba sobre os recursos e API do Next.JS.
• Aprenda Next.js - Um tutorial interativo do próximo.js.

Você pode conferir o repositório Next.JS Github - seus comentários e contribuições são bem -vindos!

Implantação

Para implantar esta execução do projeto

Implantar no vercel

A maneira mais fácil de implantar seu aplicativo Next.js é usar a plataforma Vercel dos criadores do Next.JS.

Confira nossa documentação de implantação do Next.js para obter mais detalhes.

? Contato

Seu nome - @twitter_handle - [email protected]

Link do projeto: https://github.com/sashenjayathilaka/chatgpt-clone.git

---

Não se esqueça de deixar uma estrela ️