ChatGPT Clone

A ChatGPT clone created with NextJs, TailwindCSS, Typescript, Firebase for Google-Authentication & Realtime Database, Vercel SWR for Data Fetching and ChatGPT API.

demo-video.mp4

Live Demo

ChatGPT Clone

Key Features

• Google Login/Signup: Seamlessly sign in or sign up using your Google account for a hassle-free user experience.

• Active Side Navigation: Easily switch between previous chats and create new ones with the user-friendly sidebar.

• Log Out Button: Conveniently located at the bottom of the sidebar, the log-out button allows you to sign out with a single click.

• Interactive Input Bar: Experience an input bar that mimics the original ChatGPT, ensuring an engaging and familiar chat interface.

• Real-time Updates: Stay informed with real-time data fetching using React-hot-toast notifications, keeping you up-to-date with the latest information.

• ChatGPT API Integration: Engage in real-time interactions with the ChatGPT API, enabling dynamic and responsive conversations.

Technologies Used

This project was created using the following technologies -

• NextJs
• TypeScript
• Open AI
• TailwindCSS & heroicons (for user interface)
• React-hot-toast (for notifications)
• FirebaseAuth & NextAuth (for authentication)
• SWR (for response fetching)
• Firebase (cloud firestore)
• vercel (for hosting)

Installation

node.js is required to get npm.

If you would like to download the code and try it for yourself:

Clone the repo:

  git clone https://github.com/chirag-23/ChatGPT-Clone-Nextjs.git

  cd ChatGPT-Clone-Nextjs

Install packages:

npm install

To run this project, you will need to add the following environment variables to your .env file

CHAT_GPT_KEY

NEXTAUTH_URL

WEB_CLIENT_ID

WEB_CLIENT_SECRET

NEXT_PUBLIC_FIREBASE_API_KEY

NEXT_PUBLIC_BASE_URL

NEXT_PUBLIC_FIREBASE_APP_ID

NEXT_PUBLIC_FIREBASE_PROJECT_ID

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET

NEXT_PUBLIC_FIREBASE_MESSAGING_SET

FIREBASE_SERVICE_ACCOUNT_KEY

Build project:

npm run dev

Open your browser at:

http://localhost:3000

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.