Skip to content

Latest commit

 

History

History
99 lines (63 loc) · 3.87 KB

README.md

File metadata and controls

99 lines (63 loc) · 3.87 KB
Raw

Google Gemini AI App Clone

wakatime status

Overview

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

Key Features

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

Development Process

Project Setup

  1. React Project Initialization: Set up a new React project, installed necessary dependencies, and organized the project structure.
  2. Component Development: Built essential components like the sidebar, chat box, and main content area.
  3. Styling: Applied custom CSS properties for a consistent and polished look across all components.

Google Gemini API Integration

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

Advanced Features

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

Challenges and Solutions

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

Installation

  1. Clone the repository: 
    git clone https://github.com/yourusername/google-gemini-clone.git
  2. Navigate to the project directory: 
    cd google-gemini-clone
  3. Install dependencies: 
    npm install
  4. Start the development server: 
    npm start

Usage

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

Technologies Used

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

Contributing

Contributions are welcome! Please fork the repository and submit a pull request with your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contact

For any questions or feedback, please contact LinkedIn.