ChatGPT Clone

? Empezando

‼ ️ Requisitos previos

• Regístrese para una cuenta de Firebase aquí
• Instale el nodo JS en su computadora aquí
• Obtenga la llave API OpenAI aquí

? Variables de entorno

Para ejecutar este proyecto, deberá agregar las siguientes variables de entorno a su archivo .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

Instalación

Instale my-project con npm

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

 cd my-project

Instalar dependencias

? Instale CSS CSS con Next.js

Instalar CSS de viento de cola

Instale TailWindcss y sus dependencias de pares a través de NPM, y luego ejecute el comando Init para generar tanto tailwind.config.js como postcss.config.js .

 npm install -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p

Configurar sus rutas de plantilla

Agregue las rutas a todos sus archivos de plantilla en su archivo 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 : [ ] ,
} 

Agregue las directivas de viento de cola a su CSS

Agregue las directivas @tailwind para cada una de las capas de Tailwind a su archivo ./styles/globals.css .

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

Instalar dependencias

? Otra información de dependencia

? Ejecutar localmente

Clon el proyecto

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

  npm install

Empezando

Inicie el servidor primero, ejecute el servidor de desarrollo:

  npm run dev

Este es un proyecto Next.js arrancado con create-next-app .

Instalación de dependencias Este es un proyecto Next.js Bootstrapped con create-next-app .

Abra http: // localhost: 3000 con su navegador para ver el resultado.

Puede comenzar a editar la página modificando pages/index.js . La página se actualiza automáticamente mientras edita el archivo.

Se puede acceder a las rutas API en http: // localhost: 3000/API/Hello. Este punto final se puede editar en pages/api/hello.js .

El directorio pages/api se asigna a /api/* . Los archivos en este directorio se tratan como rutas API en lugar de páginas reaccionadas.

Obtenga más información

Para obtener más información sobre Next.js, eche un vistazo a los siguientes recursos:

• Documentación Next.JS - Aprenda sobre las funciones de Next.js y la API.
• Aprende Next.js - Un tutorial interactivo Next.js.

Puede consultar el repositorio Next.js GitHub: ¡sus comentarios y contribuciones son bienvenidos!

Despliegue

Para implementar este proyecto ejecutado

Desplegar en Vercel

La forma más fácil de implementar su aplicación Next.js es usar la plataforma Vercel de los creadores de Next.js.

Consulte nuestra documentación de implementación Next.js para obtener más detalles.

? Contacto

Su nombre - @twitter_handle - [email protected]

Enlace del proyecto: https://github.com/sashenjayathilaka/chatgpt-clone.git

---

No olvides dejar una estrella ️