README.md

metadata

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