A comprehensive React component library and design system management platform featuring 60+ interactive Material-UI components with enterprise theme customization capabilities.
- Node.js 18.0 or higher
- npm 8.0 or higher
git clone <repository-url>
cd material-ui-storybook
npm install
npm run devVisit http://localhost:5000 to explore the component library.
- JSON Theme Upload: Upload custom design system configurations
- Live Theme Preview: See all components update instantly with your brand colors
- Theme Gallery: 6 pre-designed professional themes (Corporate, Modern, Minimalist, etc.)
- Theme Export: Download theme configurations as JSON files
- 60+ Material-UI Components organized by category:
- Input Components (12): Button, TextField, Checkbox, Select, Radio, Switch, etc.
- Data Display (12): Table, Card, List, Chip, Avatar, Badge, Typography, etc.
- Navigation (10): AppBar, Drawer, Tabs, Breadcrumbs, Stepper, etc.
- Feedback (8): Alert, Dialog, Snackbar, Progress, Skeleton, etc.
- Layout (10): Grid, Container, Box, Stack, Divider, Paper, etc.
- Interactive Controls: Real-time component property manipulation
- Live Preview: See changes instantly as you adjust settings
- Code Export: Generate production-ready TypeScript components
- Copy Code: Quick JSX snippets for immediate use
- Documentation: Comprehensive props, accessibility, and usage guides
- Responsive Design: Mobile and tablet optimized interface
- Dark Mode Support: Toggle between light and dark themes
- Search & Filter: Find components quickly by category or name
- Code Roadmap: Navigate source files with detailed file location guides
- Accessibility: WCAG 2.1 AA compliant components and documentation
- Requirements Document - Complete functional and technical requirements
- Technical Architecture - System design and architecture details
- Deployment Guide - Production deployment and setup instructions
- Project Overview - Current project state and architecture summary
- Component Stories - Located in
client/src/stories/ - Theme Examples - Example configurations in root directory
├── client/ # React frontend application
│ ├── src/
│ │ ├── components/
│ │ │ ├── storybook/ # Storybook interface components
│ │ │ ├── theme/ # Theme management system
│ │ │ └── ui/ # Custom UI components
│ │ ├── stories/ # Component story definitions
│ │ ├── pages/ # Application pages
│ │ └── hooks/ # Custom React hooks
├── server/ # Express.js backend
│ ├── index.ts # Main server entry point
│ ├── routes.ts # API route definitions
│ ├── storage.ts # Storage interface and implementations
│ └── vite.ts # Vite development integration
├── shared/ # Shared types and schemas
│ └── schema.ts # Database and validation schemas
├── PROJECT_REQUIREMENTS.md # Complete requirements documentation
├── TECHNICAL_ARCHITECTURE.md # System architecture guide
└── DEPLOYMENT_GUIDE.md # Production deployment instructions
- Component Reference: Quick access to Material-UI component examples
- Code Generation: Export ready-to-use TypeScript components
- Theme Testing: Test components with custom brand themes
- Documentation: Comprehensive prop and usage documentation
- Brand Application: Upload design system configurations
- Visual Preview: See entire component library with brand styling
- Theme Management: Create and manage multiple theme variations
- Consistency Check: Ensure components work across different themes
- Design System Management: Centralized component library management
- Brand Consistency: Ensure all components follow brand guidelines
- Developer Onboarding: Comprehensive documentation and examples
- Quality Assurance: Test components across different configurations
- React 18.2+ with TypeScript for component development
- Material-UI 5.14+ for comprehensive component library
- Vite 4.0+ for fast development and optimized builds
- Tailwind CSS for utility styling and responsive design
- React Query for server state management
- Node.js 18+ with Express.js framework
- TypeScript for type-safe backend development
- PostgreSQL with Drizzle ORM for production database
- In-memory storage for development and testing
- ESLint & Prettier for code quality and formatting
- Vitest for unit testing
- Playwright for end-to-end testing
- Replit Deployments for cloud hosting
- Replit Deployments (Recommended) - One-click deployment
- Vercel - Frontend-optimized deployment
- Railway - Full-stack application hosting
- DigitalOcean App Platform - Scalable cloud deployment
- Docker - Containerized deployment
- Traditional VPS - Manual server setup
- Kubernetes - Container orchestration
See the Deployment Guide for detailed instructions.
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run test # Run tests
npm run lint # Run ESLint
npm run db:push # Deploy database schema- Create story file in
client/src/stories/ComponentName.stories.tsx - Add controls in
client/src/components/storybook/ControlsPanel.tsx - Update component preview in
client/src/components/storybook/ComponentPreview.tsx - Add documentation in
client/src/components/storybook/DocumentationPanel.tsx
- Create theme configuration JSON following the schema in
client/src/components/theme/ThemeUploader.tsx - Test theme upload through the showcase page
- Verify all components render correctly with the new theme
- Export and save theme configuration for future use
- Follow TypeScript strict mode requirements
- Maintain component story completeness
- Ensure theme compatibility for all components
- Add comprehensive documentation for new features
- Test across multiple viewport sizes
- Type Safety: All code must be TypeScript with proper type definitions
- Testing: Unit tests required for new functionality
- Documentation: Update relevant documentation files
- Accessibility: Ensure WCAG 2.1 AA compliance
This project is licensed under the MIT License - see the LICENSE file for details.
- Material-UI Team for the comprehensive React component library
- React Team for the powerful frontend framework
- TypeScript Team for enhanced developer experience
- Vite Team for fast build tooling
- Check the Requirements Document for feature specifications
- Review the Technical Architecture for system details
- Follow the Deployment Guide for setup instructions
- Theme Upload Problems: Ensure JSON follows the schema in ThemeUploader.tsx
- Component Rendering Issues: Check browser console for TypeScript errors
- Performance Issues: Enable production build for performance testing
- Database Connection: Verify DATABASE_URL environment variable
- Check existing documentation files
- Review component story examples
- Examine the code roadmap in the documentation panel
- Test with different themes to isolate issues
Built with ❤️ for developers and design teams
Last Updated: July 4, 2025