create-bluecopa-react-app 1.0.2 → 1.0.4

package/templates/latest/README.md

@@ -6,11 +6,11 @@ A production-ready React template with React Router for building modern BlueCopa
 
 This template now uses the latest Bluecopa design system with:
 - **Navy Blue Header**: Uses the official Bluecopa navy color (`#041e42`) for headers and navigation
-- **Modern Card Layout**: Clean, borderless cards with subtle shadows
-- **Consistent Spacing**: Improved spacing and layout following the latest app design
-- **User Profile Integration**: Modern user dropdown with avatar and profile information
-- **Search & Notifications**: Built-in search bar and notification system
-- **Responsive Design**: Mobile-first approach with proper responsive breakpoints
+- **Modern Card Layout**: Clean, borderless cards with subtle shadows and consistent padding
+- **Consistent Spacing**: Improved spacing and layout following the latest app design system
+- **User Profile Integration**: Modern user dropdown with avatar, profile information, and logout
+- **Search & Notifications**: Built-in search bar and notification system with Radix UI
+- **Responsive Design**: Mobile-first approach with proper responsive breakpoints and device testing
 
 ## 🚀 Quick Start
 
@@ -36,17 +36,6 @@ npx create-bluecopa-react-app my-dashboard
 - npm or pnpm
 - Access to Bluecopa workspace
 
-### Installation
-
-1. **Clone or copy the template**:
-   ```bash
-   # If using as part of the blui monorepo
-   cd packages/boilerplate/react/templates/react-router
-   
-   # Or copy the template to your project location
-   cp -r packages/boilerplate/react/templates/react-router my-bluecopa-app
-   cd my-bluecopa-app
-   ```
 
 2. **Install dependencies**:
    ```bash
@@ -112,9 +101,11 @@ npx create-bluecopa-react-app my-dashboard
 
 ```
 src/
-├── components/          # Reusable UI components
-│   ├── ui/             # Base UI components (buttons, cards, etc.)
-│   └── navbar.tsx      # Navigation component
+├── components/          # Reusable components
+│   ├── layout/         # Layout components (dashboard-header.tsx, dashboard-layout.tsx, sidebar.tsx)
+│   ├── page/           # Page-specific components (dashboard.tsx, navbar.tsx)
+│   ├── tables/         # Table components (data-grid.tsx)
+│   └── ui/             # Base UI components (alert.tsx, avatar.tsx, badge.tsx, bluecopa-logo.tsx, button.tsx, card.tsx, dropdown-menu.tsx, input.tsx, label.tsx, select.tsx)
 ├── hooks/              # Custom React hooks
 │   └── use-api.ts      # Bluecopa API hooks
 ├── lib/                # Utility functions
@@ -125,9 +116,12 @@ src/
 ├── providers/          # React context providers
 │   └── query-provider.tsx  # TanStack Query provider
 ├── types/              # TypeScript type definitions
+│   └── api.ts          # API type definitions
 ├── App.tsx             # Main app component with routing
+├── index.css           # Global styles
 ├── main.tsx            # Application entry point
-└── index.css           # Global styles
+├── single-spa.tsx      # Single-spa configuration
+└── vite-env.d.ts       # Vite environment types
 ```
 
 ## 🔧 Configuration
@@ -178,7 +172,7 @@ export default function App() {
 ```
 
 ### Adding Navigation Links
-Update the navigation in `src/components/navbar.tsx`:
+Update the navigation in `src/components/page/navbar.tsx`:
 
 ```tsx
 const navigation = [
@@ -235,14 +229,20 @@ module.exports = {
 }
 ```
 
-## 🚀 Deployment
+## 🚀 Deployment & Production
 
 ### Build for Production
 ```bash
 npm run build
 ```
 
-The built files will be in the `dist/` directory.
+The production-ready files will be output to the `dist/` directory with optimized bundling and minification.
+
+### Production Best Practices
+- Validate environment variables before building
+- Test workflow triggers in staging environment
+- Monitor bundle size with `npm run build --report`
+- Use version control for deployment artifacts
 
 ### Deploy to Vercel
 1. Push your code to GitHub
@@ -261,21 +261,3 @@ The built files will be in the `dist/` directory.
 - Use environment variables for all sensitive data
 - Rotate API tokens regularly
 - Use different tokens for development and production
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests if applicable
-5. Submit a pull request
-
-## 📄 License
-
-This template is part of the Bluecopa ecosystem and follows the project's licensing terms.
-
-## 🆘 Support
-
-- Check the [Bluecopa documentation](https://docs.bluecopa.com)
-- Review the [React Router documentation](https://reactrouter.com)
-- Open issues in the project repository