BotCache

BotCache is a browser extension and web application that helps users store, manage, and interact with English vocabulary using AI-powered features. It offers two main modes: Storage (for saving and looking up words) and ChatBot (for AI-driven conversations and explanations). The project is built with React, TypeScript, and integrates with Google Gemini AI for advanced language features.

🚀 Features

• Vocabulary Storage: Save new words, meanings, examples, and synonyms just by selecting.
• AI ChatBot: Ask questions or get explanations about words and phrases just by selecting it.
• Email Integration: Associate vocabulary with your email for personalized storage.
• Chrome Storage: Persist user preferences and data using Chrome's storage API.
• Responsive UI: Clean, user-friendly interface with support for multiple modes.
• Pronunciation Support: Store and retrieve phonetic and audio pronunciation.

🏗️ Project Structure

BotCache/
│
├── Backend/         # Node.js + Express + MongoDB backend
│   ├── src/
│   │   ├── Controllers/   # Route controllers (Vocabulary)
│   │   ├── Models/        # Mongoose models (Vocabulary)
│   │   ├── Routes/        # Express route definitions
│   │   └── util/          # Utility functions
│   ├── package.json
│   └── tsconfig.json
│
├── src/         # React + Vite frontend
│   ├── Components/    # Reusable UI components
│   ├── AI-Setup/      # Generates AI response
│   ├── Constants/     # Pre-Prompts for the AI model
│   ├── Models/        # TypeScript models/interfaces
│   ├── Network/       # API service layer
│   ├── Hooks/         # Hooks for modular and reusable approach 
│   └── Style/         # CSS modules
│
├── public/
├── package.json
├── vite.config.ts
├── Manifest.json
└── README.md

🛠️ Tech Stack

• Frontend: React, Vite, TypeScript, CSS, Crxjs
• Backend: Node.js, Express, MongoDB, Mongoose

⚡ Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn
• MongoDB instance (local or cloud)
• Google Gemini API key (for AI features)
• Chrome browser (for extension features)

1. Clone the Repository

https://github.com/ConversoDB/BotCache.git
cd BotCache

3. Setup Backend

cd Backend
npm install

Create a .env file with your MongoDB URI and other secrets Add your Google Gemini API key: VITE_GOOGLE_API_KEY=your_google_gemini_api_key

npm start

4. Setup Frontend

npm install
npm run dev

5. Build for production:

npm run build

6. Go to manage extension and set to development mode and upload the dist folder

🧩Usage

• Select Mode: Choose between Storage, ChatBot, or Disable from the main interface
• Add Vocabulary: select a word or sentence, its meaning, example, and (optionally) synonyms and pronunciation will be stored automatically.
• Chat with AI: Switch to ChatBot mode to ask questions or get explanations.
• Remove Data: Use the remove button to clear your email or stored data.

📸 Screenshots

Untitled.design.1.mp4