ChatStore

A modern React-based web application for building, managing, and exploring a personalized vocabulary library. Users can search, filter, and favorite words, as well as organize them by category or topic.

🚀 Features

• User Authentication: Secure sign-in and user management with Clerk.
• Word Management: Add, edit, and delete words with definitions, examples, and categories.
• Favorites: Mark words as favorites for quick access.
• Search & Filter: Powerful search and category filtering for easy navigation.
• Responsive UI: Clean, mobile-friendly interface built with Tailwind CSS and Lucide icons.
• Persistent Storage: Words are fetched and updated via a backend API.

🏗️ Project Structure

ChatStore/
│
├── src/         # React + Vite frontend
│   ├── Components/    # Reusable UI components (Header, WordCard, SearchBar, etc.)
│   ├── Models/        # TypeScript models/interfaces
│   ├── Network/       # API calls for data fetching and updates
│   └── Style/         # CSS modules
│
├── public/
├── package.json
├── vite.config.ts
└── README.md

🛠️ Tech Stack

• Frontend: React, Vite, TypeScript, Tailwind CSS
• Authentication: Clerk
• Icons: Lucide React
• Backend: BotCache API

⚡ Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

1. Clone the Repository

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

2. Setup Frontend

npm install
npm run dev

🧩Usage

• Sign in:: Use the Clerk sign-in button to authenticate.
• Add and manage words::
  • Search, filter, and mark words as favorites.
  • Edit or delete words as needed.
• Explore features:
  • Filter by category or favorites.
  • View synonyms and example sentences.
  • See category statistics and word counts.

📸 Screenshots

Untitled.design.mp4