ChatGPT Clone Web App

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.

LIVE DEMO 🔗

Table of Contents

• About the Project
  • Tech Stack
  • Application Features
    • Homepage
    • Log In
    • Log Out
    • Create and Delete Chat
    • Model Selection
    • Notification Toast
    • Send Message and Get Respond
• Getting Started
• Useful Resource
• Developer

Tech Stack

Languages:

Frameworks, Platforms and Libraries:

Cloud Hosting/SaaS:

Databases:

(Back to top)

Application Features

Homepage

(Back to top)

Log In

(Back to top)

Log Out

(Back to top)

Create and Delete Chat

(Back to top)

Model Selection

(Back to top)

Notification Toast

(Back to top)

Send Message and Get Respond

(Back to top)

Getting Started

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.

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!

Deployment

To deploy this project run

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.

Install dependencies

https://github.com/YingluDeng/chatgpt_webapp_v1.0/blob/main/package.json

Install tailwind css with next.js

npx create-next-app -e with-tailwindcss [proj_name]

Local Environment Variables for .env.local

GOOGLE_ID 
GOOGLE_SECRET 
OPENAI_API_KEY 
FIREBASE_SERVICE_ACCOUNT_KEY

(Back to top)

Useful Resource

Frontend:

🔗 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.

Backend:

🔗 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.

(Back to top)

Developer

Cecilia Deng - https://www.linkedin.com/in/yinglu-cecilia-deng/
Project link - https://chatgpt-webapp-nv.vercel.app/

(Back to top)