Matt
185ac24067
All checks were successful
Build And Push Image / docker (push) Successful in 1m56s
- Remove manual width control that was conflicting with rail prop - Use fixed width and rail-width props for proper Vuetify 3 behavior - Simplify toggleDrawer function to just toggle miniVariant - Add v-show directive to hide list groups in rail mode - Applied fixes to admin.vue, member.vue, and board.vue layouts The sidebar now properly collapses to 56px rail mode showing only icons, and expands to 280px full width showing complete navigation items.
MonacoUSA Portal Foundation
This folder contains the complete foundation and implementation guide for creating the MonacoUSA Portal - a modern, responsive web portal built with the same proven tech stack as the Port Nimara client portal.
📁 Contents
1. MONACOUSA_PORTAL_IMPLEMENTATION.md
Complete step-by-step implementation guide containing:
- ✅ Full project setup instructions
- ✅ All code templates and configurations
- ✅ Keycloak authentication implementation
- ✅ NocoDB database integration
- ✅ MinIO file storage setup
- ✅ Responsive dashboard with Vuetify 3
- ✅ PWA configuration
- ✅ Production deployment guide
- ✅ Testing and verification steps
2. CLINE_WORKSPACE_RULES.md
Cline workspace configuration file containing:
- 🔧 Project overview and tech stack details
- 🔧 Development guidelines and coding standards
- 🔧 Environment configuration requirements
- 🔧 Key features and capabilities
- 🔧 Extension guidelines for adding new tools
- 🔧 Troubleshooting and best practices
- 🔧 Support resources and documentation
3. DOCKER_DEPLOYMENT_GUIDE.md
Complete Docker and CI/CD deployment guide containing:
- 🐳 Multi-stage Docker build configuration
- 🔄 Gitea Actions CI/CD pipeline setup
- 📁 Volume management and persistent data
- 🔍 Health checks and monitoring
- 🛠️ Troubleshooting and best practices
- 🔐 Security considerations and optimization
🚀 Quick Start
-
Give the implementation guide to another Claude instance:
- Copy the contents of
MONACOUSA_PORTAL_IMPLEMENTATION.md - Provide it to Claude with instructions to follow the guide step-by-step
- Copy the contents of
-
Set up Cline workspace rules:
- Copy the contents of
CLINE_WORKSPACE_RULES.md - Add it to your Cline workspace rules for the new project
- Copy the contents of
🎯 Project Specifications
- Name: monacousa-portal
- Domain: monacousa.org (configurable)
- Colors: #a31515 (MonacoUSA red) primary, #ffffff (white) secondary
- Tech Stack: Nuxt 3, Vue 3, Vuetify 3, Keycloak, NocoDB, MinIO
- Features: PWA, Mobile-responsive, Dashboard layout, File storage
📋 What You'll Get
Following this implementation guide will create a complete portal foundation with:
✅ Authentication System
- Keycloak OAuth2/OIDC integration
- Secure session management
- Role-based access control
- Login/logout functionality
✅ Responsive Dashboard
- Mobile-first design
- Collapsible sidebar navigation
- User profile display
- Role-based menu items
✅ File Management
- MinIO S3-compatible storage
- Upload/download functionality
- File type validation
- Secure access control
✅ Database Integration
- NocoDB API-first database
- CRUD operations
- Dynamic table access
- Type-safe operations
✅ PWA Features
- Offline support
- Install prompts
- Service worker
- Mobile optimization
✅ Production Ready
- Health check endpoints
- Error handling
- Security best practices
- Deployment configuration
🛠️ Usage Instructions
For Implementation
- Create a new repository for your MonacoUSA Portal
- Follow the step-by-step guide in
MONACOUSA_PORTAL_IMPLEMENTATION.md - Configure your environment variables
- Set up Keycloak, NocoDB, and MinIO services
- Test the implementation
- Deploy to production
For Development
- Use
CLINE_WORKSPACE_RULES.mdas your Cline workspace rules - Follow the coding standards and guidelines
- Extend the portal with your custom tools
- Maintain consistency with the established patterns
🎨 Customization
The foundation is designed to be easily customizable:
- Branding: Update colors, logos, and text
- Tools: Add new dashboard pages and functionality
- APIs: Extend with custom server endpoints
- Database: Add new tables and data structures
- UI: Customize components and layouts
📞 Support
This foundation is based on the proven Port Nimara client portal architecture and includes:
- Comprehensive documentation
- Complete code examples
- Best practices and patterns
- Troubleshooting guides
- Extension guidelines
The implementation guide is self-contained and can be followed by any developer or AI assistant to create the exact foundation you need.
Ready to build your MonacoUSA Portal! 🚀