added README

README.md

@@ -0,0 +1,74 @@
+---
+title: MongoDB Data Viewer
+emoji: 📊
+colorFrom: blue
+colorTo: indigo
+sdk: streamlit
+sdk_version: "1.28.1"
+app_file: app.py
+pinned: false
+---
+
+# MongoDB Data Viewer
+
+A modern React application with shadcn/ui styling to display and manage MongoDB data in a beautiful, responsive table interface.
+
+## Features
+
+- 🎨 **Modern UI Design** - Clean, professional interface using shadcn/ui design system
+- 📱 **Responsive Layout** - Works perfectly on desktop, tablet, and mobile devices
+- 🔄 **Real-time Updates** - Refresh button to fetch latest data from MongoDB
+- 📊 **Data Table** - Clean, sortable table with hover effects and loading states
+- ⚡ **Fast Performance** - Optimized React components with efficient rendering
+- 🎯 **Ready for MongoDB** - Designed to easily integrate with your MongoDB database
+
+## Technology Stack
+
+- **Frontend**: React 19 with modern hooks
+- **Styling**: Custom CSS with shadcn/ui design system
+- **Components**: Modular, reusable UI components
+- **State Management**: React hooks for local state
+- **Build Tool**: Create React App
+
+## Getting Started
+
+1. **Install Dependencies**: `npm install`
+2. **Start Development Server**: `npm start`
+3. **Build for Production**: `npm run build`
+
+## MongoDB Integration
+
+The app is designed to easily connect to your MongoDB database. Simply update the `fetchFromMongoDB` function in `src/components/DataTable.jsx` to connect to your actual database.
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── DataTable.jsx      # Main data display component
+│   └── ui/
+│       ├── button.jsx     # Reusable button component
+│       └── table.jsx      # Table components
+├── App.js                 # Main application component
+├── index.js               # Application entry point
+└── index.css              # Custom CSS with shadcn/ui styling
+```
+
+## Customization
+
+- **Colors**: Modify CSS variables in `src/index.css` for custom theming
+- **Layout**: Adjust the table structure in `DataTable.jsx`
+- **Styling**: Update CSS classes for different visual styles
+- **Data**: Replace mock data with your actual MongoDB queries
+
+## Future Enhancements
+
+- 🔍 **Search & Filter** - Add search functionality and data filtering
+- 📈 **Charts & Graphs** - Integrate data visualization
+- 🔐 **Authentication** - Add user login and permissions
+- 📱 **PWA Support** - Make it installable as a web app
+- 🌙 **Dark Mode** - Toggle between light and dark themes
+
+---
+
+*Built with ❤️ using React and modern web technologies*