Welcome to the Google Gemini AI App Clone! This project is a ReactJS-based application designed to replicate the functionality and user experience of Google Gemini AI. The app provides an interactive platform where users can ask questions and receive AI-generated responses in real-time, all within a clean and user-friendly interface.
Gemini.github.mp4
- Interactive Chat Box: Users can input questions and receive real-time AI responses powered by Google Gemini.
- Responsive Design: The app is fully responsive, ensuring functionality and aesthetic appeal across desktop, tablet, and smartphone devices.
- Collapsible Sidebar: A sidebar featuring recent chats, help, activity, and settings icons that can be expanded or collapsed as needed.
- Suggested Questions: A welcoming screen with suggested questions to help users get started.
- Custom CSS Styling: Consistent and visually appealing design achieved through meticulous CSS styling.
- State Management: Efficient state management using React’s Context API for smooth and dynamic content handling.
- React Project Initialization: Set up a new React project, installed necessary dependencies, and organized the project structure.
- Component Development: Built essential components like the sidebar, chat box, and main content area.
- Styling: Applied custom CSS properties for a consistent and polished look across all components.
- API Configuration: Obtained the API key and linked it to the project through a configuration file.
- Chat Integration: Integrated the Google Gemini API to process user queries and generate AI responses in real-time.
- Typing Effect: Implemented a typing effect for AI responses to enhance the user experience.
- Hover Effects and Animations: Added hover effects and animations, including loading indicators, to make the interface more interactive.
- Recent Prompts: Enabled the app to save and display recent user prompts in the sidebar, increasing interactivity.
- CSS Styling Across Devices: Faced challenges with consistent styling across different components and screen sizes. This was resolved by refining CSS and utilizing media queries extensively.
- State Management: Managing state across various components proved complex. The Context API was employed to share state variables efficiently, ensuring a seamless user experience.
- Clone the repository:
git clone https://github.com/yourusername/google-gemini-clone.git
- Navigate to the project directory:
cd google-gemini-clone - Install dependencies:
npm install
- Start the development server:
npm start
- Open the app in your browser.
- Use the chat box to input questions.
- Expand or collapse the sidebar as needed.
- View recent prompts and suggested questions on the sidebar and welcome screen.
- ReactJS: Core library for building the user interface.
- Google Gemini API: For processing user queries and generating responses.
- CSS: Custom styling for a polished and responsive design.
- Context API: For managing state across various components.
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
This project is licensed under the MIT License. See the LICENSE file for details.
For any questions or feedback, please contact LinkedIn.