Skip to content

A modern chat app built with React.js, TypeScript, TailwindCSS, Convex, Clerk & ZegoCloud. Features include secure auth, private/group chats, video calls, multimedia sharing, AI-powered ChatGPT/DALL-E 3, real-time status, Zustand state management, webhooks, error handling, and light/dark mode. Scalable, robust & user-centric!

Notifications You must be signed in to change notification settings

Harmit3/chatifly

Repository files navigation

ChatiFly - AI Powered Chatting Application 🚀

Make chat a little bit more exciting by integrating AI capabilities with GPT and DALL-E-3! With ChatiFly, enjoy AI-powered conversations, multimedia creation, and an enhanced user experience.

⭐ About

ChatiFly is a next-gen messaging app that makes chatting smarter and more fun! With built-in AI capabilities, it allows users to:
✅ Have AI-powered conversations
✅ Generate AI-created images & media
✅ Enjoy seamless video calling


🔥 Tech Stack

  • Convex → Database, real-time events, and cloud functions
  • Next.js App Router → Modern React framework
  • ShadCN → Beautiful UI components
  • Convex File Storage → Store images and videos securely
  • ZegoCloud → High-quality video calls
  • Clerk → Seamless user authentication
  • Tailwind CSS → Styling made easy
  • TypeScript → Maintainable and scalable code

🚀 Deploy Your Own

Want to run ChatiFly yourself? Follow these steps:

1. Install Dependencies

npm install

2. Run the Development Server

npm run dev

This will prompt you to log into Convex and create a project.

3. Set Up Clerk Authentication

  • Sign up at Clerk.
  • Copy CLERK_SECRET_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY into .env.local.
  • Retrieve the Issuer URL (should look like https://some-animal-123.clerk.accounts.dev).
  • Add CLERK_ISSUER_URL and CLERK_HOST_NAME to your Convex environment variables.

4. Configure Webhooks

  • Go to your Clerk account’s WebHooks section.
  • Add an endpoint:
    https://your-convex-url.convex.site/clerk
    
  • Enable events: user.created, user.updated, session.created, session.ended.
  • Copy the webhook secret and add it as CLERK_WEBHOOK_SECRET in Convex Dashboard.

5. Enable AI-Powered Features

  • Create an account on OpenAI.
  • Copy your OPENAI_API_KEY and add it to your Convex Dashboard.

6. Enable Video Calls

  • Sign up at ZEGOCLOUD.
  • Create a project (select Voice & Video Calls).
  • Add ZEGO_APP_ID and ZEGO_SERVER_SECRET to .env.local.

✅ Ready to Use!

After setting everything up, ChatiFly should be fully functional! You can now:

  • Chat with AI-powered assistance
  • Generate AI images using DALL-E
  • Make real-time video calls

If you want to use ChatiFly,link coming soon..


🌐 Connect with Me

Follow me for more awesome projects!


📝 License

This project is licensed under the MIT License.


About

A modern chat app built with React.js, TypeScript, TailwindCSS, Convex, Clerk & ZegoCloud. Features include secure auth, private/group chats, video calls, multimedia sharing, AI-powered ChatGPT/DALL-E 3, real-time status, Zustand state management, webhooks, error handling, and light/dark mode. Scalable, robust & user-centric!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published