The ChatGPT Clone is a web application that boasts a modern, responsive design and an advanced AI chatbot powered by OpenAI API and developed using TypeScript, React, and Tailwind CSS. It leverages Firebase V9 to enable secure, real-time chat functionality through API endpoints within the Next.js framework. To optimize data fetching, useSWR was implemented, while NextAuth for Firebase Google Authentication was used to ensure secure user access. Finally, the app was deployed on Vercel, providing high performance and scalability for its users.
![homepage recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/homepage.gif)
![login recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/login_auth.gif)
![login recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/logout.gif)
![login recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/chatRow.gif)
![login recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/modelSelection.gif)
![login recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/toast.gif)
![login recording](/YingluDeng/chatgpt_webapp_v1.0/raw/main/gif/messages.gif)
Start the server First, run the development server:
npm run dev
This is a Next.js project bootstrapped with create-next-app
.
Install dependencies
This is a Next.js project bootstrapped with create-next-app
.
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
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!
To deploy this project run
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.
https://github.com/YingluDeng/chatgpt_webapp_v1.0/blob/main/package.json
npx create-next-app -e with-tailwindcss [proj_name]
GOOGLE_ID
GOOGLE_SECRET
OPENAI_API_KEY
FIREBASE_SERVICE_ACCOUNT_KEY
🔗 Flexbox: A game for learning CSS flexbox.
🔗 Icon: Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
🔗 Avatar: Generate avatars with initials from names.
🔗 Notification: Add beautiful notifications to your React app with react-hot-toast.
🔗 Text tool: Remove line breaks online tool.
🔗 Selection Box: A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.
🔗 Authentication: NextAuth.js is a complete open-source authentication solution for Next.js applications.
🔗 Real-time Database: The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client.
🔗 React Firebase Hooks: A set of reusable React Hooks for Firebase..
🔗 useSWR: React Hooks for Data Fetching.
🔗 Vercel CLI: Manage and configure your Vercel Projects from the command line.
Cecilia Deng - https://www.linkedin.com/in/yinglu-cecilia-deng/
Project link - https://chatgpt-webapp-nv.vercel.app/