Skip to content

README.md

Latest commit

 

History

History
142 lines (101 loc) · 5.73 KB

README.md

File metadata and controls

142 lines (101 loc) · 5.73 KB

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.

last-commit repo-top-language repo-language-count

🚀 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
React Typescript Express crxjs Node.js Mongoose Nodemon generative-ai npm

⚡ 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
  1. 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
  1. Setup Frontend
npm install
npm run dev
  1. Build for production:
npm run build
  1. 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

Screenshot 2025-08-03 122205

Untitled.design.1.mp4