Spaces:
Running
Running
| 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* | |