Add comprehensive BUILD_GUIDE.md for building a MongoDB Data Viewer React app, detailing setup, CSS architecture, component design, and deployment to Hugging Face. Update DataTable component sort indicator from '↕️' to '⇵' for improved clarity.

BUILD_GUIDE.md

@@ -0,0 +1,398 @@
+# 🚀 Building a React App with shadcn/ui Styling & Sorting Tables
+
+## 📋 Table of Contents
+1. [Project Overview](#project-overview)
+2. [Prerequisites](#prerequisites)
+3. [Step-by-Step Build Process](#step-by-step-build-process)
+4. [File Structure & Purpose](#file-structure--purpose)
+5. [Key Implementation Details](#key-implementation-details)
+6. [Customization Guide](#customization-guide)
+7. [Deployment to Hugging Face](#deployment-to-hugging-face)
+8. [Troubleshooting](#troubleshooting)
+
+---
+
+## 🎯 Project Overview
+
+This guide shows you how to build a **MongoDB Data Viewer** - a React application with:
+- ✨ **Modern shadcn/ui styling** (custom CSS implementation)
+- 📊 **Interactive data tables** with sorting functionality
+- 🔄 **Real-time data refresh** capabilities
+- 📱 **Responsive design** for all devices
+- 🎨 **Professional UI/UX** without external CSS frameworks
+
+**Why This Approach?**
+- **No Tailwind CSS dependencies** - avoids compatibility issues
+- **Custom CSS variables** - easy theming and customization
+- **Modular components** - maintainable and scalable
+- **Clean architecture** - follows React best practices
+
+---
+
+## 🔧 Prerequisites
+
+### **Required Software:**
+- **Node.js** (version 14+ recommended)
+- **npm** (comes with Node.js)
+- **Git** (for version control)
+- **Code editor** (VS Code recommended)
+
+### **Knowledge Requirements:**
+- Basic **React** concepts (components, hooks, state)
+- Basic **JavaScript** (ES6+, async/await)
+- Basic **CSS** understanding
+- Basic **Git** commands
+
+---
+
+## 🏗️ Step-by-Step Build Process
+
+### **Phase 1: Project Setup**
+
+#### **Step 1: Create React App**
+```bash
+npx create-react-app mongodb-data-viewer
+cd mongodb-data-viewer
+```
+
+#### **Step 2: Clean Up Default Files**
+Remove unnecessary files:
+- `src/logo.svg`
+- `src/reportWebVitals.js`
+- `src/setupTests.js`
+- `public/logo*.png`
+- `public/manifest.json`
+- `public/robots.txt`
+
+#### **Step 3: Install Dependencies**
+```bash
+npm install @radix-ui/react-slot
+npm install -D tailwindcss postcss autoprefixer
+```
+
+### **Phase 2: CSS Architecture**
+
+#### **Step 4: Create Custom CSS System**
+Create `src/index.css` with:
+- CSS variables for theming
+- Utility classes (similar to Tailwind)
+- Component-specific styles
+- Responsive design rules
+
+#### **Step 5: Set Up PostCSS (Optional)**
+```bash
+npx tailwindcss init -p
+```
+*Note: We'll use custom CSS instead of Tailwind*
+
+### **Phase 3: Component Architecture**
+
+#### **Step 6: Create Utility Functions**
+Create `src/lib/utils.js`:
+```javascript
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+```
+
+#### **Step 7: Build UI Components**
+Create component files:
+- `src/components/ui/button.jsx`
+- `src/components/ui/table.jsx`
+
+#### **Step 8: Create Main Data Component**
+Create `src/components/DataTable.jsx` with:
+- State management for data
+- Sorting functionality
+- Loading states
+- Error handling
+
+### **Phase 4: App Integration**
+
+#### **Step 9: Update Main App**
+Modify `src/App.js` to:
+- Import custom components
+- Use custom CSS classes
+- Create responsive layout
+
+#### **Step 10: Configure Entry Point**
+Update `src/index.js` to:
+- Remove unused imports
+- Import custom CSS
+- Render main App component
+
+---
+
+## 📁 File Structure & Purpose
+
+```
+mongodb-data-viewer/
+├── .git/                          # Git repository
+├── .gitignore                     # Git ignore rules
+├── package.json                   # Dependencies & scripts
+├── package-lock.json              # Locked dependency versions
+├── README.md                      # Project documentation
+├── BUILD_GUIDE.md                 # This guide
+├── public/                        # Static assets
+│   ├── index.html                 # Main HTML template
+│   └── favicon.ico                # Browser icon
+└── src/                           # Source code
+    ├── index.js                   # App entry point
+    ├── index.css                  # Custom CSS system
+    ├── App.js                     # Main app component
+    ├── App.css                    # Basic React styling (required for Streamlit)
+    ├── App.test.js                # Test file
+    └── components/                # Reusable components
+        ├── DataTable.jsx          # Main data display component
+        └── ui/                    # UI component library
+            ├── button.jsx         # Button component
+            └── table.jsx          # Table components
+```
+
+### **File Purpose Breakdown:**
+
+#### **Root Level Files:**
+- **`package.json`**: Defines dependencies, scripts, and project metadata
+- **`.gitignore`**: Specifies which files Git should ignore
+- **`README.md`**: Project documentation and Hugging Face configuration
+
+#### **Public Directory:**
+- **`index.html`**: HTML template that React renders into
+- **`favicon.ico`**: Browser tab icon (required for professional appearance)
+
+#### **Source Directory:**
+- **`index.js`**: JavaScript entry point that bootstraps the React app
+- **`index.css`**: Custom CSS system with shadcn/ui design tokens
+- **`App.js`**: Main application component that orchestrates the UI
+- **`App.css`**: Basic React styling (required for Streamlit compatibility)
+- **`App.test.js`**: Test file for the main App component
+
+#### **Components Directory:**
+- **`DataTable.jsx`**: Core business logic for displaying and sorting data
+- **`ui/button.jsx`**: Reusable button component with consistent styling
+- **`ui/table.jsx`**: Table components for structured data display
+
+---
+
+## 🔑 Key Implementation Details
+
+### **1. Custom CSS System**
+```css
+:root {
+  --background: #ffffff;
+  --foreground: #020817;
+  --primary: #0f172a;
+  --primary-foreground: #f8fafc;
+  /* ... more variables */
+}
+```
+
+**Why Custom CSS?**
+- **No framework dependencies** - avoids compatibility issues
+- **Full control** - customize every aspect of styling
+- **Performance** - no unused CSS classes
+- **Maintainability** - clear, organized structure
+
+### **2. Component State Management**
+```javascript
+const [data, setData] = useState([]);
+const [loading, setLoading] = useState(true);
+const [error, setError] = useState(null);
+const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
+```
+
+**State Structure:**
+- **`data`**: Array of objects to display in table
+- **`loading`**: Boolean for loading states
+- **`error`**: String for error messages
+- **`sortConfig`**: Object tracking sort column and direction
+
+### **3. Sorting Algorithm**
+```javascript
+const sortData = (key) => {
+  let direction = 'asc';
+  
+  if (sortConfig.key === key) {
+    if (sortConfig.direction === 'asc') {
+      direction = 'desc';
+    } else if (sortConfig.direction === 'desc') {
+      setSortConfig({ key: null, direction: 'none' });
+      return;
+    }
+  }
+  
+  setSortConfig({ key, direction });
+};
+```
+
+**Three-State Sorting:**
+1. **Ascending** (↑): First click, sorts A→Z
+2. **Descending** (↓): Second click, sorts Z→A  
+3. **None** (↕️): Third click, returns to original order
+
+### **4. Responsive Design**
+```css
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1400px;
+  }
+}
+```
+
+**Responsive Features:**
+- **Mobile-first** approach
+- **Flexible containers** that adapt to screen size
+- **Consistent spacing** across devices
+- **Touch-friendly** interactions
+
+---
+
+## 🎨 Customization Guide
+
+### **Changing Colors**
+Modify CSS variables in `src/index.css`:
+```css
+:root {
+  --primary: #your-color-here;
+  --background: #your-bg-color;
+  /* ... */
+}
+```
+
+### **Adding New Columns**
+1. **Update mock data** in `DataTable.jsx`
+2. **Add table header** with sorting capability
+3. **Add table cell** for new data
+4. **Update sorting logic** if needed
+
+### **Modifying Table Styling**
+Edit table-specific CSS in `src/index.css`:
+```css
+.table th {
+  /* Custom header styles */
+}
+
+.table td {
+  /* Custom cell styles */
+}
+```
+
+### **Adding New Features**
+- **Search**: Add input field and filter logic
+- **Pagination**: Implement page-based data loading
+- **Export**: Add CSV/PDF download functionality
+- **Charts**: Integrate data visualization libraries
+
+---
+
+## 🚀 Deployment to Hugging Face
+
+### **1. Configure README.md**
+```yaml
+---
+title: MongoDB Data Viewer
+emoji: 📊
+colorFrom: blue
+colorTo: indigo
+sdk: static
+pinned: false
+app_build_command: npm run build
+app_file: build/index.html
+---
+```
+
+### **2. Build the App**
+```bash
+npm run build
+```
+
+### **3. Push to Git Repository**
+```bash
+git add .
+git commit -m "Add MongoDB data viewer with sorting"
+git push origin main
+```
+
+### **4. Hugging Face Integration**
+- **Create new Space** on Hugging Face
+- **Connect Git repository**
+- **Automatic deployment** will begin
+- **Monitor build logs** for any issues
+
+---
+
+## 🔧 Troubleshooting
+
+### **Common Issues & Solutions:**
+
+#### **Build Errors**
+- **Problem**: Missing dependencies
+- **Solution**: Run `npm install` and check `package.json`
+
+#### **Styling Issues**
+- **Problem**: CSS not loading
+- **Solution**: Verify `index.css` import in `index.js`
+
+#### **Component Errors**
+- **Problem**: Import/export mismatches
+- **Solution**: Check file paths and component names
+
+#### **Deployment Issues**
+- **Problem**: Hugging Face build fails
+- **Solution**: Verify `app_file` points to `build/index.html`
+
+### **Performance Optimization:**
+- **Lazy loading** for large datasets
+- **Memoization** for expensive calculations
+- **Debouncing** for search inputs
+- **Virtual scrolling** for very long tables
+
+---
+
+## 📚 Next Steps & Enhancements
+
+### **Immediate Improvements:**
+1. **Add search functionality** across all columns
+2. **Implement pagination** for large datasets
+3. **Add data export** (CSV, JSON)
+4. **Create dark mode** toggle
+
+### **Advanced Features:**
+1. **Real-time updates** with WebSocket
+2. **Advanced filtering** with multiple criteria
+3. **Data visualization** with charts
+4. **User authentication** and permissions
+
+### **Backend Integration:**
+1. **MongoDB connection** with Node.js/Express
+2. **RESTful API** endpoints
+3. **Database optimization** with indexing
+4. **Caching layer** for performance
+
+---
+
+## 🎯 Summary
+
+This guide has walked you through building a **professional-grade React application** with:
+
+✅ **Clean architecture** following React best practices  
+✅ **Custom CSS system** without external dependencies  
+✅ **Interactive data tables** with sorting functionality  
+✅ **Responsive design** for all devices  
+✅ **Professional styling** that matches shadcn/ui design system  
+✅ **Easy deployment** to Hugging Face Spaces  
+
+The result is a **maintainable, scalable, and beautiful** application that you can easily customize and extend for your specific needs.
+
+**Happy coding! 🚀**

src/components/DataTable.jsx

@@ -69,10 +69,10 @@ const DataTable = () => {
 
   // Get sort indicator for column headers
   const getSortIndicator = (key) => {
-    if (sortConfig.key !== key) return '↕️';
+    if (sortConfig.key !== key) return '⇵';
     if (sortConfig.direction === 'asc') return '↑';
     if (sortConfig.direction === 'desc') return '↓';
-    return '↕️';
+    return '⇵';
   };
 
   const fetchFromMongoDB = async () => {