Phoenix AI – 🐦 A smart chatbot built with ⚛️ React, 🎨 TailwindCSS, 🌍 Node.js, 🔐 Appwrite, and 🤖 Gemini API, delivering real-time, intelligent conversations with a sleek UI, secure authentication, and seamless scalability. 🚀✨
Phoenix AI is an AI-powered chatbot that not only generates intelligent responses but also stores and organizes conversations efficiently. Below are its key use cases:
Smart Responses🤖 Get real-time, AI-generated replies powered by Gemini API.Context Awareness🧠 Phoenix AI remembers previous chats for meaningful interactions.Markdown Support📝 Format messages with bold, italic, and code snippets.Syntax Highlighting🖥️ AI-generated code is displayed beautifully with React Syntax Highlighter.
Auto-Generated Titles🏷️ AI automatically creates titles for saved conversations.Chat History📜 View past interactions anytime in an organized interface.Real-Time Storage⚡ Conversations are stored securely in Appwrite Database.
Sign Up & Log In🔑 Secure user authentication powered by Appwrite.Password Reset✉️ Reset your password via a secure email link.Session Management🔄 Stay logged in with Appwrite's secure session handling.
Smooth Animations🎭 Powered by Framer Motion for an interactive feel.Real-Time Navigation⚡ Instant page transitions with React Router DOM.Customizable UI🎨 Modify styles easily using TailwindCSS.
Cloud-Ready🌍 Can be deployed on Netlify, Vercel, or Render.Fast & Lightweight⚡ Optimized React app for smooth performance.Extensible🔧 Can be integrated with additional AI models in the future.
💡 Phoenix AI is your all-in-one smart chatbot that combines AI-powered conversations, secure authentication, and seamless user experience in a single platform. Enjoy chatting with intelligence! 🎉
@google/generative-ai🤖 Integration with Gemini API for AI-powered chat.appwrite🔐 Backend-as-a-Service for authentication and database management.framer-motion🎭 Smooth animations and transitions for an interactive UI.prop-types✅ Type-checking for React components to ensure reliability.react⚛️ Core UI library for building the frontend.react-dom🌐 Handles React rendering in the browser.react-helmet🎭 Manages SEO-friendly meta tags dynamically.react-markdown📄 Renders Markdown content inside React.react-router-dom🚏 Enables client-side routing for navigation.react-syntax-highlighter🖥️ Displays code snippets with syntax highlighting.remark-gfm✍️ Extends Markdown with GitHub Flavored Markdown (GFM) support.
git clone https://github.com/Prakhar-002/PHOENIX.git
cd PHOENIXgit clone https://github.com/Prakhar-002/PHOENIX.git
cd PHOENIXnpm installVITE_APPWRITE_PROJECT_ID='Your Appwrite Id'
VITE_GEMINI_API_KEY='Get you Api key from Gemini Api'
VITE_APPWRITE_DATABASE_ID='Make your own appwrite database and collections'npm run dev 📦 PHOENIX/SRC/
│
│
├── 🗂️ api
│ │
│ └── 📑 googleAi.js 🔸 API integration for Google AI services
│
│
├── 🗂️ assets 🔸 Static assets like images, icons, and logos
│ │
│ ├── 📑 assets.js
│ ├── 🖼️ avatar.jpeg
│ ├── 🖼️ banner.webp
│ ├── 🎨 favicon.svg
│ ├── 🎨 logo-dark.svg
│ ├── 🎨 logo-icon.svg
│ └── 🎨 logo-light.svg
│
│
├── 🗂️ components 🔸 Reusable UI components
│ │
│ ├── 📑 AiResponse.jsx ⚛️
│ ├── 📑 Avatar.jsx ⚛️
│ ├── 📑 Button.jsx ⚛️
│ ├── 📑 Logo.jsx ⚛️
│ ├── 📑 Menu.jsx ⚛️
│ ├── 📑 MenuItem.jsx ⚛️
│ ├── 📑 PageTitle.jsx ⚛️
│ ├── 📑 Progress.jsx ⚛️
│ ├── 📑 PromptField.jsx ⚛️
│ ├── 📑 PromptPreloader.jsx ⚛️
│ ├── 📑 Sidebar.jsx ⚛️
│ ├── 📑 Skeleton.jsx ⚛️
│ ├── 📑 Snackbar.jsx ⚛️
│ ├── 📑 TextField.jsx ⚛️
│ ├── 📑 TopAppBar.jsx ⚛️
│ └── 📑 UserPrompt.jsx ⚛️
│
│
├── 🗂️ contexts 🔸 Context API for state management
│ │
│ └── 📑 SnackbarContext.jsx ⚛️
│
│
├── 🗂️ hooks 🔸 Custom React hooks
│ │
│ ├── 📑 userPromptPreloader.js
│ ├── 📑 useSnackbar.js
│ └── 📑 useToggle.js
│
│
├── 🗂️ lib 🔸 Utility libraries
│ │
│ ├── 📑 appWrite.js 🔹 Handles AppWrite API integration
│ └── 📑 googleAi.js 🔹 Handles Google AI functions
│
│
├── 🗂️ pages 🔸 Main application pages
│ │
│ ├── 📑 Conversation.jsx ⚛️
│ ├── 📑 ConversationError.jsx ⚛️
│ ├── 📑 Greetings.jsx ⚛️
│ ├── 📑 Login.jsx ⚛️
│ ├── 📑 Register.jsx ⚛️
│ ├── 📑 ResetLink.jsx ⚛️
│ ├── 📑 ResetPassword.jsx ⚛️
│ └── 📑 RootError.jsx ⚛️
│
│
├── 🗂️ routers 🔸 Application routing and navigation
│ │
│ ├── 🗂️ actions 🔸 Form actions & authentication flows
│ │ |
│ │ ├── 📑 appAction.js
│ │ ├── 📑 conversationAction.js
│ │ ├── 📑 loginAction.js
│ │ ├── 📑 registerAction.js
│ │ ├── 📑 resetLinkAction.js
│ │ └── 📑 resetPasswordAction.js
│ │
│ │
│ ├── 🗂️ loaders 🔸 Data loaders for fetching data before rendering
│ │ |
│ │ ├── 📑 appLoader.js
│ │ ├── 📑 conversationLoader.js
│ │ ├── 📑 loginLoader.js
│ │ ├── 📑 registerLoader.js
│ │ ├── 📑 resetLinkLoader.js
│ │ └── 📑 resetPasswordLoader.js
│ │
│ │
│ └── 📑 routes.jsx 🔹 Defines all application routes ⚛️
│
│
├── 🗂️ utils 🔸 Utility/helper functions
│ │
│ ├── 📑 deleteConversation.js
│ ├── 📑 generateID.js
│ ├── 📑 logout.js
│ └── 📑 toTitleCase.js
│
│
├── 📑 App.jsx 🔹 Root component of the application
├── 📑 index.css 🔹 Global styles
├── 📑 main.jsx 🔹 Application entry point
├── 📑 .env 🔹 Environment variables (Make your own)
├── 📑 .gitignore 🔹 Git ignore file to exclude unnecessary files
├── 📑 eslint.config.js 🔹 ESLint configuration for code linting
├── 📑 index.html 🔹 Main HTML file for the app
├── 📑 package-lock.json 🔹 Lock file for dependencies
├── 📑 package.json 🔹 Project dependencies and scripts
├── 📑 postcss.config.js 🔹 PostCSS configuration for styling
├── 📑 tailwind.config.js 🔹 Tailwind CSS configuration
├── 📑 vite.config.js 🔹 Vite configuration for build setup
└── 📑 Readme.md 🔹 Project documentation