PHOENIX ➺ The Evolution of AI Conversations

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. 🚀✨

➥ Fly Into PhoenixChat 🕊️

💻 Tech Stack ⛅️🏞️

                     

Phoenix AI Features 🍂🧸

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:

AI-Powered Conversations 🌍

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

Conversation Management 💾

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

User Authentication 🔐 & Security 👮🏻‍♂️

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

User Experience 🖌️ & UI Enhancements 🎨

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

Deployment 🦾 & Scalability ⚖️

• 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! 🎉

Technologies Used 👩🏻‍💻🤖

• @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.

Installation Guide 🚀

Clone 🏗️ the repository 🔍

For Windows 🖥️

git clone https://github.com/Prakhar-002/PHOENIX.git
cd PHOENIX

For Linux and macOS 🍏

git clone https://github.com/Prakhar-002/PHOENIX.git
cd PHOENIX

Install 📥 dependencies 📦

npm install

Create a .env ⚙️ file in the root directory and add the following ➡️

VITE_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'

Start ▶️ the application 🚀

npm run dev

🌍 Access the app in your browser at ➡️

🔗 http://localhost:3000

🎉 Happy Coding! 🧑‍💻🔥

Folder Structure 📒🗂️

  📦 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