ChatGPT Clone

? Memulai

‼ ️ Prasyarat

• Daftar untuk akun Firebase di sini
• Instal Node JS di komputer Anda di sini
• Dapatkan Kunci API Openai di sini

? Variabel Lingkungan

Untuk menjalankan proyek ini, Anda perlu menambahkan variabel lingkungan berikut ke file .env Anda

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

Instalasi

Instal my-project dengan NPM

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

 cd my-project

Instal dependensi

? Pasang CSS Tailwind dengan Next.js

Pasang CSS Tailwind

Instal TailwindCSS dan dependensi rekannya melalui NPM, dan kemudian jalankan perintah init untuk menghasilkan tailwind.config.js dan postcss.config.js .

 npm install -D tailwindcss postcss autoprefixer

 npx tailwindcss init -p

Konfigurasikan jalur template Anda

Tambahkan jalur ke semua file template Anda di file tailwind.config.js Anda.

 /** @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 : [ ] ,
} 

Tambahkan Arahan Tailwind ke CSS Anda

Tambahkan arahan @tailwind untuk masing -masing lapisan Tailwind ke file ./styles/globals.css Anda.

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

Instal dependensi

? Info ketergantungan lainnya

? Jalankan secara lokal

Klon proyek

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

  npm install

Memulai

Mulailah server terlebih dahulu, jalankan server pengembangan:

  npm run dev

Ini adalah proyek create-next-app .

Instal Dependencies Ini adalah proyek create-next-app .

Buka http: // localhost: 3000 dengan browser Anda untuk melihat hasilnya.

Anda dapat mulai mengedit halaman dengan memodifikasi pages/index.js . Page-updates halaman saat Anda mengedit file.

Rute API dapat diakses di http: // localhost: 3000/API/Hello. Titik akhir ini dapat diedit di pages/api/hello.js .

Direktori pages/api dipetakan ke /api/* . File dalam direktori ini diperlakukan sebagai rute API alih -alih halaman bereaksi.

Pelajari lebih lanjut

Untuk mempelajari lebih lanjut tentang Next.js, lihatlah sumber daya berikut:

• Dokumentasi Next.js - Pelajari Tentang Fitur dan API Next.js.
• Pelajari Next.js - Tutorial interaktif Next.js.

Anda dapat melihat repositori github berikutnya.js - umpan balik dan kontribusi Anda dipersilakan!

Penyebaran

Untuk menggunakan proyek ini

Menyebarkan di Vercel

Cara termudah untuk menggunakan aplikasi selanjutnya.js Anda adalah dengan menggunakan platform Vercel dari pencipta Next.js.

Lihatlah dokumentasi penempatan berikutnya.js kami untuk lebih jelasnya.

? Kontak

Nama Anda - @twitter_handle - [email protected]

Tautan Proyek: https://github.com/sashenjayathilaka/chatgpt-clone.git

---

Jangan lupa meninggalkan bintang ️