Gemini Clone

This is a ReactJS-based project that replicates the core features and design of the Gemini AI platform. This project is intended for learning purposes and demonstrates the use of modern ReactJS practices, including component-based architecture, state management, and API integration.

Features

• Responsive Design: Fully responsive UI for desktop and mobile devices.
• API Integration: Realtime integration of generative AI using Gemini by Google.
• State Management: Utilizes React Context API or Redux for managing global state.

Technologies Used

• Frontend: ReactJS, HTML5, JavaScript (ES6+)
• Styling: Vanilla CSS
• State Management: React Hooks
• API: Gemini API
• Build Tool: Vite / Create React App
• Version Control: Git

Installation

1. Clone the repository:

   git clone https://github.com/KiseraTimon/gemini-ai-clone-reactjs-api.git

2. Navigate to the project directory:

   cd gemini-clone

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

Usage

• Open your browser and navigate to the localhost url from npm.
• Test out the mock structure of Gemini AI

Folder Structure

gemini-clone/
├── public/                 # Static Assets
├── src/
│   ├── components/         # Reusable React Components
│       ├── main/
        ├── sidebar/
│   ├── config/             # API Service Setup
│   ├── context/            # Context API For State Management
│   ├── css/                # General Stylesheets
│   └── App.js              # Main Application Component
├── package.json            # Project Metadata & Dependencies
└── README.md               # Project Documentation

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Add feature-name"

4. Push to the branch:

   git push origin feature-name

5. Open a pull request.

Acknowledgments

• Inspired by the Gemini AI platform.
• Thanks to the open-source community for providing tools and resources.
• Youtube @GreatStack for the tutorial