ChatGPT Clone

This is a ChatGPT clone built using NEXT.JS, Firebase, SWR, Tailwind.css, Gemini API and React-Hot-Toast. The project demonstrates how to create a real-time chat application with a clean UI and smooth user experience.

I made this project by following along Sonny Sangha in his NEXT.JS 13 + AI tutorial where he builds NEXT.JS fullstack applications integrating Open AI API.

I've modified this project to make it mobile responsive and use Gemini API insted of Open AI API as I kept running into error code 429. I've also changed the color scheme of the app to resemble current version of ChatGPT.

Table of Contents

• Features
• Getting Started
• Prerequisites
• Installation
• Usage
• Resources
• License

Features

• Real-time messaging
• Authentication with Firebase
• Data fetching with SWR
• Styled with Tailwind.css
• Notifications with React-Hot-Toast
• Use of React-Firebase-Hooks for ease in using Firebase.

Resources

This project utilizes the following resources and libraries:

• Gemini-API - Integrate Google’s AI model to your apps
• NEXT.JS - The React Framework for Production
• Firebase - Backend platform for building web and mobile applications
• SWR - React Hooks library for data fetching
• Tailwind.css - Utility-first CSS framework
• React-Hot-Toast - Notifications for React
• React-Firebase-Hooks - A set of reusable React Hooks for Firebase.

Documentation and Tutorials

• Sonny Sangha's Youtube Tutorial: https://www.youtube.com/watch?v=1KPG3LiE4jU
• Firebase tutorial by Net Ninja: https://www.youtube.com/watch?v=9zdvmgGsww0&list=PL4cUxeGkcC9jERUGvbudErNCeSZHWUVlb&index=2
• How to style scrollbars?: https://www.youtube.com/watch?v=GvyGNcUiJGQ
• NEXT.JS Documentation: https://nextjs.org/docs
• Firebase Documentation: https://firebase.google.com/docs
• SWR Documentation: https://swr.vercel.app/docs
• Tailwind.css Documentation: https://tailwindcss.com/docs
• React-Hot-Toast Documentation: https://react-hot-toast.com/docs
• React-Firebase-Hooks Documentation: https://www.npmjs.com/package/react-firebase-hooks
• Gemini API Documentation: https://ai.google.dev/gemini-api/docs