How to Build AI Chat App Using React, Tailwind and Framer motion

codewithsadee

Sadee

Posted on November 18, 2024

How to Build AI Chat App Using React, Tailwind and Framer motion

🚀 Ready to Build Something Incredible?
In this step-by-step tutorial, we’re diving into the world of AI-powered applications! Watch as we build an intelligent, responsive, and visually stunning AI Chat App using React, TailwindCSS, and Appwrite for seamless data handling.

💡 What You'll Learn:

  • How to set up React for your chat app
  • Using TailwindCSS to create a sleek, modern UI
  • Integrating Appwrite for backend data storage
  • Build a seamless Login & Register system.
  • Implement a feature to reset forgotten passwords with ease.
  • Connecting AI to make your chat app smarter

🔥 Why Watch?
Whether you’re a beginner or an experienced developer, this video will show you how to harness the power of AI and cutting-edge tools to create an app that will leave users amazed!

✨ Resources & Code:
GitHub gist
Public Assets
Source code
Source code

🔗 Tools We’ll Use:
ReactJS: https://react.dev/
TailwindCSS: https://tailwindcss.com/
Appwrite: https://appwrite.io/
Gemini: https://ai.google.dev/
Framer motion: https://motion.dev/

⌚ TIMESTEMP
0:00 - Introduction
1:14 - Project overview
13:17 - Porject initial
21:48 - Register
1:58:59 - Login
2:11:57 - Reset password
2:28:27 - Home
4:11:35 - Setup & Gemini integration
4:17:49 - Setup appwrite database
4:19:18 - Storing document in appwrite
4:23:11 - Get AI response based on user prompt & store in database
4:38:31 - Conversation detail
5:43:15 - Propmpt preloader
5:56:05 - Delete conversation
6:12:04 - Working with react error boundery
6:20:19 - Project deployment

📩 Have Questions? Drop them in the comments below!

💖 💪 🙅 🚩
codewithsadee
Sadee

Posted on November 18, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related