Spaces:
Running
Running
File size: 2,564 Bytes
8b4d107 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
---
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*
|