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

📦 Releasing

Every push of a version tag (e.g. v1.0.1) triggers a GitHub Actions workflow (.github/workflows/release.yml) that builds the extension and publishes a GitHub Release with the packaged dist/ folder attached as a zip.

1. Bump the version in manifest.json (and package.json if desired)
2. Tag and push:

git tag v1.0.1
git push origin v1.0.1

3. The workflow builds the extension and attaches botcache-v1.0.1.zip to the new release on the Releases page
4. Download and unzip the asset, then load it as an unpacked extension via chrome://extensions

Note: the workflow requires a repo secret named VITE_GOOGLE_API_KEY (Settings → Secrets and variables → Actions) set to the same Google Gemini API key used locally in .env.local.

🧩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