diff --git a/docs/architecture/PROJECT_STRUCTURE.md b/docs/architecture/PROJECT_STRUCTURE.md index c92c328..215c858 100644 --- a/docs/architecture/PROJECT_STRUCTURE.md +++ b/docs/architecture/PROJECT_STRUCTURE.md @@ -1,50 +1,21 @@ # πŸ“ Project Structure -## Final Organized Structure +## Current Development Structure ``` rxminder/ -β”œβ”€β”€ πŸ“„ README.md # Main documentation -β”œβ”€β”€ package.json # Dependencies and scripts +β”œβ”€β”€ πŸ“„ README.md # Main project documentation +β”œβ”€β”€ πŸ“¦ package.json # Dependencies and scripts β”œβ”€β”€ βš™οΈ vite.config.ts # Build configuration β”œβ”€β”€ πŸ“ tsconfig.json # TypeScript configuration -β”œβ”€β”€ 🎨 index.html # Entry point +β”œβ”€β”€ 🎨 index.html # Generated entry point +β”œβ”€β”€ 🎨 index.html.template # Template for HTML generation β”œβ”€β”€ πŸ”’ .env.example # Environment template β”œβ”€β”€ πŸ“Š metadata.json # Project metadata β”œβ”€β”€ πŸ–ΌοΈ banner.jpeg # Project banner image -β”‚ -β”œβ”€β”€ οΏ½ docker/ # Container configuration -β”‚ β”œβ”€β”€ 🐳 Dockerfile # Multi-stage Docker build -β”‚ β”œβ”€β”€ οΏ½ docker-compose.yaml # Service orchestration -β”‚ β”œβ”€β”€ 🌐 nginx.conf # Production web server config -β”‚ └── 🚫 .dockerignore # Docker ignore patterns -β”‚ -β”œβ”€β”€ πŸ“ scripts/ # All deployment and utility scripts -β”‚ β”œβ”€β”€ πŸš€ deploy.sh # Production deployment -β”‚ β”œβ”€β”€ ⚑ deploy-k8s.sh # Kubernetes deployment -β”‚ β”œβ”€β”€ πŸ”§ setup.sh # Development setup -β”‚ β”œβ”€β”€ 🌱 seed-production.js # Database seeding -β”‚ β”œβ”€β”€ βœ… validate-env.sh # Environment validation -β”‚ └── πŸ§ͺ validate-deployment.sh # Deployment testing -β”‚ -β”œβ”€β”€ πŸ“ tests/ # Testing infrastructure -β”‚ β”œβ”€β”€ πŸ“ README.md # Testing documentation -β”‚ β”œβ”€β”€ βš™οΈ setup.ts # Jest configuration -β”‚ β”œβ”€β”€ πŸ“ integration/ # Integration tests -β”‚ β”‚ └── πŸ§ͺ production.test.js # Production validation -β”‚ β”œβ”€β”€ πŸ“ manual/ # Manual testing scripts -β”‚ β”‚ β”œβ”€β”€ πŸ”§ admin-login-debug.js # Admin debugging -β”‚ β”‚ β”œβ”€β”€ πŸ”§ auth-db-debug.js # Auth debugging -β”‚ β”‚ └── πŸ”§ debug-email-validation.js # Email debugging -β”‚ └── πŸ“ e2e/ # End-to-end tests with Playwright -β”‚ β”œβ”€β”€ πŸ“ README.md # E2E testing documentation -β”‚ β”œβ”€β”€ πŸ§ͺ fixtures.ts # Custom test fixtures -β”‚ β”œβ”€β”€ πŸ§ͺ helpers.ts # Test utilities and data -β”‚ β”œβ”€β”€ πŸ§ͺ auth.spec.ts # Authentication flow tests -β”‚ β”œβ”€β”€ πŸ§ͺ medication.spec.ts # Medication management tests -β”‚ β”œβ”€β”€ πŸ§ͺ admin.spec.ts # Admin interface tests -β”‚ β”œβ”€β”€ πŸ§ͺ ui-navigation.spec.ts # UI and navigation tests -β”‚ └── πŸ§ͺ reminders.spec.ts # Reminder system tests +β”œβ”€β”€ πŸš€ index.tsx # React application entry point +β”œβ”€β”€ 🎯 App.tsx # Main React component +β”œβ”€β”€ πŸ“‹ types.ts # Global type definitions β”‚ β”œβ”€β”€ πŸ“ components/ # React components (organized by feature) β”‚ β”œβ”€β”€ πŸ“ README.md # Component architecture docs @@ -81,102 +52,293 @@ rxminder/ β”‚ β”œβ”€β”€ πŸ“ services/ # Business logic & APIs β”‚ β”œβ”€β”€ πŸ—„οΈ database/ # Unified database service -β”‚ β”‚ β”œβ”€β”€ DatabaseService.ts # Main service with strategy pattern -β”‚ β”‚ β”œβ”€β”€ MockDatabaseStrategy.ts # In-memory implementation -β”‚ β”‚ β”œβ”€β”€ ProductionDatabaseStrategy.ts # CouchDB implementation -β”‚ β”‚ └── types.ts # Database interfaces +β”‚ β”‚ β”œβ”€β”€ πŸ“‹ DatabaseService.ts # Main service with strategy pattern +β”‚ β”‚ β”œβ”€β”€ πŸ§ͺ MockDatabaseStrategy.ts # In-memory implementation +β”‚ β”‚ β”œβ”€β”€ 🏭 ProductionDatabaseStrategy.ts # CouchDB implementation +β”‚ β”‚ β”œβ”€β”€ πŸ“ types.ts # Database interfaces +β”‚ β”‚ β”œβ”€β”€ πŸ“¦ index.ts # Public exports +β”‚ β”‚ └── πŸ“ README.md # Database service documentation +β”‚ β”œβ”€β”€ πŸ“§ logging/ # Centralized logging system +β”‚ β”‚ β”œβ”€β”€ πŸ“Š Logger.ts # Main logger implementation +β”‚ β”‚ └── πŸ“¦ index.ts # Public exports β”‚ β”œβ”€β”€ πŸ“§ email.ts # Email utilities -β”‚ β”œβ”€β”€ πŸ“§ mailgun.service.ts # Email delivery -β”‚ β”œβ”€β”€ πŸ“§ mailgun.config.ts # Email configuration -β”‚ β”œβ”€β”€ 🌱 database.seeder.ts # Data seeding -β”‚ β”œβ”€β”€ πŸ” oauth.ts # OAuth integration -β”‚ └── πŸ“ auth/ # Authentication services -β”‚ β”œβ”€β”€ πŸ” auth.service.ts # Core auth logic -β”‚ β”œβ”€β”€ πŸ” auth.types.ts # Auth type definitions -β”‚ β”œβ”€β”€ πŸ” auth.constants.ts # Auth constants -β”‚ β”œβ”€β”€ πŸ” auth.error.ts # Error handling -β”‚ β”œβ”€β”€ πŸ” auth.middleware.ts # Middleware +β”‚ β”œβ”€β”€ πŸ“§ mailgun.service.ts # Email delivery +β”‚ β”œβ”€β”€ πŸ“§ mailgun.config.ts # Email configuration +β”‚ β”œβ”€β”€ 🌱 database.seeder.ts # Data seeding +β”‚ β”œβ”€β”€ πŸ” oauth.ts # OAuth integration +β”‚ └── πŸ“ auth/ # Authentication services +β”‚ β”œβ”€β”€ πŸ” auth.service.ts # Core auth logic +β”‚ β”œβ”€β”€ πŸ“ auth.types.ts # Auth type definitions +β”‚ β”œβ”€β”€ πŸ“‹ auth.constants.ts # Auth constants +β”‚ β”œβ”€β”€ ⚠️ auth.error.ts # Error handling +β”‚ β”œβ”€β”€ πŸ›‘οΈ auth.middleware.ts # Middleware β”‚ β”œβ”€β”€ βœ‰οΈ emailVerification.service.ts -β”‚ β”œβ”€β”€ πŸ“ templates/ # Email templates +β”‚ β”œβ”€β”€ πŸ“ templates/ # Email templates β”‚ β”‚ └── βœ‰οΈ verification.email.ts -β”‚ └── πŸ“ __tests__/ # Unit tests +β”‚ └── πŸ“ __tests__/ # Unit tests β”‚ β”œβ”€β”€ πŸ§ͺ auth.integration.test.ts β”‚ └── πŸ§ͺ emailVerification.test.ts β”‚ +β”œβ”€β”€ πŸ“ config/ # Configuration management +β”‚ └── βš™οΈ unified.config.ts # Centralized configuration with validation +β”‚ β”œβ”€β”€ πŸ“ contexts/ # React context providers -β”‚ └── πŸ‘€ UserContext.tsx # User state management +β”‚ └── πŸ‘€ UserContext.tsx # User state management β”‚ β”œβ”€β”€ πŸ“ hooks/ # Custom React hooks -β”‚ β”œβ”€β”€ πŸ’Ύ useLocalStorage.ts # Persistent storage -β”‚ β”œβ”€β”€ βš™οΈ useSettings.ts # User preferences -β”‚ β”œβ”€β”€ 🎨 useTheme.ts # Theme management -β”‚ └── πŸ‘€ useUserData.ts # User data management +β”‚ β”œβ”€β”€ πŸ’Ύ useLocalStorage.ts # Persistent storage +β”‚ β”œβ”€β”€ βš™οΈ useSettings.ts # User preferences +β”‚ β”œβ”€β”€ 🎨 useTheme.ts # Theme management +β”‚ └── πŸ‘€ useUserData.ts # User data management β”‚ β”œβ”€β”€ πŸ“ utils/ # Utility functions -β”‚ └── ⏰ schedule.ts # Reminder scheduling +β”‚ └── ⏰ schedule.ts # Reminder scheduling +β”‚ +β”œβ”€β”€ πŸ“ types/ # TypeScript type definitions +β”‚ └── πŸ“ index.ts # Global type exports +β”‚ +β”œβ”€β”€ πŸ“ scripts/ # Development and build scripts +β”‚ β”œβ”€β”€ πŸ”§ setup.sh # Development setup +β”‚ β”œβ”€β”€ 🎨 process-html.sh # HTML template processing +β”‚ β”œβ”€β”€ 🧹 setup-pre-commit.sh # Git hooks setup +β”‚ └── 🌱 seed-production.js # Database seeding +β”‚ +β”œβ”€β”€ πŸ“ tests/ # Testing infrastructure +β”‚ β”œβ”€β”€ πŸ“ README.md # Testing documentation +β”‚ β”œβ”€β”€ βš™οΈ setup.ts # Jest configuration +β”‚ β”œβ”€β”€ πŸ“ integration/ # Integration tests +β”‚ β”‚ └── πŸ§ͺ production.test.js # Production validation +β”‚ β”œβ”€β”€ πŸ“ manual/ # Manual testing scripts +β”‚ β”‚ β”œβ”€β”€ πŸ”§ admin-login-debug.js # Admin debugging +β”‚ β”‚ β”œβ”€β”€ πŸ”§ auth-db-debug.js # Auth debugging +β”‚ β”‚ └── πŸ”§ debug-email-validation.js # Email debugging +β”‚ └── πŸ“ e2e/ # End-to-end tests with Playwright +β”‚ β”œβ”€β”€ πŸ“ README.md # E2E testing documentation +β”‚ β”œβ”€β”€ πŸ§ͺ fixtures.ts # Custom test fixtures +β”‚ β”œβ”€β”€ πŸ§ͺ helpers.ts # Test utilities and data +β”‚ β”œβ”€β”€ πŸ§ͺ auth.spec.ts # Authentication flow tests +β”‚ β”œβ”€β”€ πŸ§ͺ medication.spec.ts # Medication management tests +β”‚ β”œβ”€β”€ πŸ§ͺ admin.spec.ts # Admin interface tests +β”‚ β”œβ”€β”€ πŸ§ͺ ui-navigation.spec.ts # UI and navigation tests +β”‚ └── πŸ§ͺ reminders.spec.ts # Reminder system tests β”‚ β”œβ”€β”€ πŸ“ docs/ # Project documentation -β”‚ β”œβ”€β”€ πŸ” SECURITY.md # Security guidelines -β”‚ β”œβ”€β”€ πŸš€ DEPLOYMENT.md # Deployment instructions -β”‚ └── πŸ“– API.md # API documentation +β”‚ β”œβ”€β”€ πŸ“‹ README.md # Documentation index +β”‚ β”œβ”€β”€ πŸ“ architecture/ # Design & Architecture +β”‚ β”‚ β”œβ”€β”€ πŸ—οΈ PROJECT_STRUCTURE.md # This file +β”‚ β”‚ └── 🎯 TEMPLATE_APPROACH.md # Configuration approach +β”‚ β”œβ”€β”€ πŸ“ setup/ # Setup & Configuration +β”‚ β”‚ β”œβ”€β”€ βš™οΈ COMPLETE_TEMPLATE_CONFIGURATION.md +β”‚ β”‚ β”œβ”€β”€ βœ… SETUP_COMPLETE.md +β”‚ β”‚ β”œβ”€β”€ 🌍 ENVIRONMENT_VARIABLES.md +β”‚ β”‚ └── 🏷️ APP_NAME_CONFIGURATION.md +β”‚ β”œβ”€β”€ πŸ“ development/ # Development Guides +β”‚ β”‚ β”œβ”€β”€ πŸ“– API.md # API documentation +β”‚ β”‚ β”œβ”€β”€ πŸ—„οΈ DATABASE.md # Database service docs +β”‚ β”‚ β”œβ”€β”€ ✨ CODE_QUALITY.md # Quality standards +β”‚ β”‚ β”œβ”€β”€ πŸ”’ APPLICATION_SECURITY.md # Security practices +β”‚ β”‚ β”œβ”€β”€ πŸ”„ SECURITY_CHANGES.md # Security updates +β”‚ β”‚ └── πŸͺ PRE_COMMIT_HOOKS.md # Git hook configuration +β”‚ └── πŸ“ implementation/ # Current Status +β”‚ └── πŸ“Š IMPLEMENTATION_SUMMARY.md β”‚ -β”œβ”€β”€ πŸ“ k8s/ # Kubernetes manifests -β”‚ β”œβ”€β”€ πŸ“ README.md # K8s deployment guide -β”‚ β”œβ”€β”€ πŸ—ΊοΈ configmap.yaml # Configuration -β”‚ β”œβ”€β”€ πŸ”’ *-secret.yaml # Secrets -β”‚ β”œβ”€β”€ πŸš€ *-deployment.yaml # Deployments -β”‚ β”œβ”€β”€ 🌐 *-service.yaml # Services -β”‚ β”œβ”€β”€ πŸ“Š hpa.yaml # Auto-scaling -β”‚ β”œβ”€β”€ 🌐 ingress.yaml # Load balancing -β”‚ └── πŸ”’ network-policy.yaml # Network security +β”œβ”€β”€ πŸ“ coverage/ # Test coverage reports +β”œβ”€β”€ πŸ“ dist/ # Production build output +β”œβ”€β”€ πŸ“ node_modules/ # Dependencies β”‚ -└── πŸ“ .github/ # GitHub configuration - β”œβ”€β”€ πŸ“ pull_request_template.md - └── πŸ“ ISSUE_TEMPLATE/ - β”œβ”€β”€ πŸ› bug_report.md - └── ✨ feature_request.md +└── πŸ“ Configuration Files # Development configuration + β”œβ”€β”€ πŸ”§ .gitignore # Git ignore patterns + β”œβ”€β”€ 🎨 .prettierrc # Code formatting rules + β”œβ”€β”€ ⚑ eslint.config.cjs # Linting configuration + β”œβ”€β”€ πŸ§ͺ jest.config.json # Test configuration + β”œβ”€β”€ 🎭 playwright.config.ts # E2E test configuration + β”œβ”€β”€ πŸ“ .markdownlint.json # Markdown linting + β”œβ”€β”€ πŸ”’ .secretlintrc.json # Secret detection + β”œβ”€β”€ ✏️ .editorconfig # Editor consistency + β”œβ”€β”€ πŸͺ .husky/ # Git hooks + └── πŸ“„ Various other config files ``` ## Key Organizational Principles -### βœ… **Feature-Based Organization** +### βœ… **Feature-Based Component Organization** + +Components are organized by functionality rather than by type: + +``` +components/ +β”œβ”€β”€ medication/ # All medication-related UI +β”œβ”€β”€ auth/ # Authentication components +β”œβ”€β”€ admin/ # Admin interface +β”œβ”€β”€ modals/ # Modal dialogs +└── ui/ # Reusable UI components +``` + +**Benefits:** + +- Related functionality stays together +- Easy to find and modify features +- Clear boundaries between different parts of the app +- Scalable as features grow + +### βœ… **Service Layer Architecture** + +Services provide business logic separate from UI components: + +``` +services/ +β”œβ”€β”€ database/ # Data persistence with strategy pattern +β”œβ”€β”€ logging/ # Centralized logging system +└── auth/ # Authentication and user management +``` + +**Benefits:** -- Components grouped by functionality (medication, auth, admin, etc.) - Clear separation of concerns -- Easy to locate related files - -### βœ… **Script Centralization** - -- All deployment and utility scripts in `/scripts/` -- Consistent naming conventions -- Easy access via npm/bun scripts - -### βœ… **Testing Structure** - -- Unit tests alongside source code (`services/auth/__tests__/`) -- Integration tests in `/tests/integration/` -- E2E tests with Playwright in `/tests/e2e/` -- Manual debugging tools in `/tests/manual/` -- Comprehensive test documentation -- TypeScript support with temporary type declarations - -### βœ… **Documentation Organization** - -- Feature-specific READMEs in relevant folders -- Centralized docs in `/docs/` folder -- Clear architectural documentation +- Reusable business logic +- Easy to test and mock +- Strategy pattern allows flexible implementations ### βœ… **Configuration Management** -- Environment files at root level -- Build configurations easily accessible -- Docker and K8s configs clearly separated +Centralized configuration with environment-based templates: -## Benefits +``` +config/ +└── unified.config.ts # Single source of truth -🎯 **Maintainability** - Clear structure makes code easy to maintain -πŸ” **Discoverability** - Logical organization helps find files quickly -πŸ§ͺ **Testability** - Well-organized test structure -πŸ“¦ **Deployability** - Scripts and configs clearly separated +# Template approach +index.html.template β†’ index.html # Processed with environment variables +.env.example β†’ .env # User customization +``` + +**Benefits:** + +- No hardcoded configuration +- Environment-specific settings +- Type-safe configuration access +- Clear separation of config and code + +### βœ… **Testing Strategy** + +Comprehensive testing at multiple levels: + +``` +tests/ +β”œβ”€β”€ integration/ # Service integration tests +β”œβ”€β”€ manual/ # Debug scripts and manual testing +└── e2e/ # Full application testing + +# Unit tests alongside code +services/auth/__tests__/ # Co-located with services +components/__tests__/ # Component-specific tests +``` + +**Benefits:** + +- Tests close to the code they test +- Multiple testing strategies +- Easy to run specific test suites +- Clear separation of test types + +### βœ… **Documentation Structure** + +Documentation organized by purpose and audience: + +``` +docs/ +β”œβ”€β”€ architecture/ # System design and patterns +β”œβ”€β”€ setup/ # Configuration and installation +β”œβ”€β”€ development/ # Developer guides and APIs +└── implementation/ # Current status and features +``` + +**Benefits:** + +- Easy navigation by role (developer, ops, etc.) +- Clear separation of different doc types +- Comprehensive coverage of all aspects +- Living documentation that stays current + +## 🎯 Development Workflow + +### Local Development Setup + +1. **Environment Configuration** + + ```bash + cp .env.example .env # Copy template + nano .env # Customize settings + ``` + +2. **Template Processing** + + ```bash + bun run predev # Process HTML templates + bun run dev # Start development server + ``` + +3. **Code Quality** + ```bash + bun run lint # Check code quality + bun run format # Format code + bun run type-check # TypeScript validation + ``` + +### Database Strategy Selection + +The application automatically selects the appropriate database strategy: + +- **Development**: Mock database (instant responses, no setup) +- **Testing**: Mock database (isolated test data) +- **Production**: CouchDB (persistent storage) + +### Component Development + +1. **Create feature-based components** in appropriate folders +2. **Export from index.ts** for clean imports +3. **Co-locate tests** with components when appropriate +4. **Use TypeScript** for type safety + +### Service Development + +1. **Implement business logic** in service layer +2. **Use dependency injection** for testability +3. **Follow strategy pattern** for flexibility +4. **Add comprehensive tests** for reliability + +## πŸ“Š Metrics and Standards + +### Code Organization + +- **Feature cohesion**: Related code stays together +- **Clear boundaries**: Services, components, utilities clearly separated +- **Consistent patterns**: Similar organization across features +- **Scalable structure**: Easy to add new features without reorganization + +### Development Experience + +- **Fast setup**: One command to get started +- **Quick iteration**: Hot reloading and instant feedback +- **Easy testing**: Multiple test strategies available +- **Clear debugging**: Structured logging and debug tools + +### Maintainability + +- **Self-documenting**: Clear folder structure and naming +- **Consistent patterns**: Similar approaches across the codebase +- **Easy refactoring**: Loose coupling between components +- **Future-proof**: Architecture supports growth and changes + +## πŸš€ Benefits + +🎯 **Discoverability** - Logical structure makes files easy to find +πŸ”§ **Maintainability** - Clear patterns make code easy to modify +πŸ§ͺ **Testability** - Well-organized test structure and strategy +πŸ“ˆ **Scalability** - Architecture supports feature growth πŸ‘₯ **Team Collaboration** - Consistent patterns across the project -πŸ“ˆ **Scalability** - Structure supports growth and new features +πŸ›‘οΈ **Reliability** - Strategy pattern provides flexibility and fallbacks +⚑ **Performance** - Optimized development and build processes +πŸ“š **Documentation** - Comprehensive guides for all aspects + +This structure provides a solid foundation for continued development and future enhancements while maintaining code quality and developer productivity. diff --git a/docs/architecture/TEMPLATE_APPROACH.md b/docs/architecture/TEMPLATE_APPROACH.md index bd45c86..7f239aa 100644 --- a/docs/architecture/TEMPLATE_APPROACH.md +++ b/docs/architecture/TEMPLATE_APPROACH.md @@ -1,159 +1,278 @@ -# 🎯 Template-Based Kubernetes Configuration +# 🎯 Template-Based Configuration Approach ## Overview -We've implemented a **template-based approach** using environment variables instead of manual base64 encoding for Kubernetes secrets. This is much more user-friendly and secure. +RxMinder uses a **template-based configuration approach** with environment variables to provide flexible, secure, and maintainable configuration management across different environments. -## πŸ†š Before vs After Comparison +## πŸ†š Configuration Philosophy -### ❌ Before (Manual Base64 Encoding) +### ❌ Before (Hardcoded Values) -**Old approach required manual base64 encoding:** +**Old approach with hardcoded configuration:** -```yaml -# k8s/couchdb-secret.yaml -apiVersion: v1 -kind: Secret -data: - # User had to manually encode: - # echo -n "admin" | base64 -> YWRtaW4= - # echo -n "password" | base64 -> cGFzc3dvcmQ= - username: YWRtaW4= - password: cGFzc3dvcmQ= +```typescript +// Hardcoded configuration +const config = { + appName: 'RxMinder', + baseUrl: 'http://localhost:5173', + dbUrl: 'http://localhost:5984', + adminPassword: 'admin123', // ❌ Security risk +}; ``` **Problems:** -- 😣 Manual base64 encoding required -- πŸ”§ Error-prone (encoding mistakes) -- πŸ“ Hard to read/verify credentials -- πŸ”’ Credentials visible in YAML files +- 😣 No environment flexibility +- πŸ”§ Configuration changes require code changes +- πŸ“ Hard to customize for different deployments +- πŸ”’ Security risks with hardcoded credentials ### βœ… After (Template-Based) -**New approach uses templates with automatic substitution:** +**New approach uses environment variables with templates:** -```yaml -# k8s/couchdb-secret.yaml.template -apiVersion: v1 -kind: Secret -metadata: - name: couchdb-secret - labels: - app: ${APP_NAME} -type: Opaque -stringData: - # Kubernetes automatically base64 encodes stringData - username: ${COUCHDB_USER} - password: ${COUCHDB_PASSWORD} +```typescript +// Environment-based configuration +const config = { + appName: process.env.VITE_APP_NAME || 'RxMinder', + baseUrl: process.env.VITE_BASE_URL || 'http://localhost:5173', + dbUrl: process.env.VITE_COUCHDB_URL || 'http://localhost:5984', + adminPassword: process.env.VITE_COUCHDB_PASSWORD, // βœ… Secure +}; ``` **Benefits:** -- βœ… No manual base64 encoding needed -- βœ… Environment variables from `.env` file -- βœ… Human-readable configuration -- βœ… Automatic deployment script -- βœ… Customizable app names +- βœ… Environment-specific configuration +- βœ… No hardcoded secrets in code +- βœ… Easy customization via `.env` files +- βœ… Template processing for HTML and other assets +- βœ… Type-safe configuration with validation ## πŸš€ How It Works -### 1. Configuration in `.env` +### 1. Environment Configuration ```bash -# .env (user-friendly configuration) -APP_NAME=my-rxminder -COUCHDB_USER=admin -COUCHDB_PASSWORD=super-secure-password-123 -INGRESS_HOST=rxminder.mydomain.com +# .env.example (template for all environments) +VITE_APP_NAME=RxMinder +VITE_BASE_URL=http://localhost:5173 +VITE_COUCHDB_URL=http://localhost:5984 +VITE_COUCHDB_USER=admin +VITE_COUCHDB_PASSWORD=secure-password-123 + +# Email configuration (optional) +VITE_MAILGUN_API_KEY=your-mailgun-api-key +VITE_MAILGUN_DOMAIN=your-domain.com + +# OAuth configuration (optional) +VITE_GOOGLE_CLIENT_ID=your-google-client-id +VITE_GITHUB_CLIENT_ID=your-github-client-id + +# Feature flags +ENABLE_EMAIL_VERIFICATION=true +ENABLE_OAUTH=true +DEBUG_MODE=false ``` -### 2. Template Substitution +### 2. Template Processing + +#### HTML Template Processing + +```html + + + + + ${APP_NAME} + + + +``` + +**Processed to:** + +```html + + + + + MyCustomApp + + + +``` + +#### Configuration Template + +```typescript +// config/unified.config.ts (centralized configuration) +export const unifiedConfig = { + app: { + name: import.meta.env.VITE_APP_NAME || 'RxMinder', + environment: import.meta.env.NODE_ENV || 'development', + baseUrl: import.meta.env.VITE_BASE_URL || 'http://localhost:5173', + version: import.meta.env.VITE_APP_VERSION || '0.0.0', + }, + database: { + url: import.meta.env.VITE_COUCHDB_URL || 'http://localhost:5984', + username: import.meta.env.VITE_COUCHDB_USER || 'admin', + password: import.meta.env.VITE_COUCHDB_PASSWORD || '', + }, + features: { + emailVerification: import.meta.env.ENABLE_EMAIL_VERIFICATION === 'true', + oauth: import.meta.env.ENABLE_OAUTH === 'true', + debug: import.meta.env.DEBUG_MODE === 'true', + }, +}; +``` + +### 3. Development vs Production + +#### Development Environment ```bash -# Automatic substitution with envsubst -envsubst < k8s/couchdb-secret.yaml.template +# .env (development) +VITE_APP_NAME=RxMinder-Dev +VITE_COUCHDB_URL=http://localhost:5984 +DEBUG_MODE=true +ENABLE_EMAIL_VERIFICATION=false ``` -**Result:** - -```yaml -apiVersion: v1 -kind: Secret -metadata: - name: couchdb-secret - labels: - app: my-rxminder -type: Opaque -stringData: - username: admin - password: super-secure-password-123 -``` - -### 3. Kubernetes Processing - -- Kubernetes automatically base64 encodes `stringData` fields -- No manual encoding required -- More secure and reliable - -## πŸŽ›οΈ Deployment Options - -### Option 1: Automated Script (Recommended) +#### Production Environment ```bash -# Copy and configure -cp .env.example .env -nano .env - -# Deploy everything -./scripts/k8s-deploy-template.sh deploy +# .env.production +VITE_APP_NAME=MedicationTracker +VITE_COUCHDB_URL=https://your-couchdb.com +ENABLE_EMAIL_VERIFICATION=true +ENABLE_OAUTH=true +DEBUG_MODE=false ``` -### Option 2: Manual Template Processing +## πŸ”§ Template Files in Project -```bash -# Set environment variables -export APP_NAME=my-rxminder -export COUCHDB_PASSWORD=secure-password +### 1. HTML Templates -# Process templates -envsubst < k8s/couchdb-secret.yaml.template | kubectl apply -f - -envsubst < k8s/ingress.yaml.template | kubectl apply -f - -``` +- **`index.html.template`** - Main HTML entry point with variable substitution +- **`index.html`** - Generated file (processed by `scripts/process-html.sh`) -## πŸ”§ Template Files Created +### 2. Configuration Templates -1. **`k8s/couchdb-secret.yaml.template`** - Database credentials -2. **`k8s/ingress.yaml.template`** - Ingress with custom hostname -3. **`k8s/configmap.yaml.template`** - Application configuration -4. **`k8s/frontend-deployment.yaml.template`** - Frontend deployment -5. **`scripts/k8s-deploy-template.sh`** - Automated deployment script +- **`.env.example`** - Template for environment configuration +- **`config/unified.config.ts`** - Centralized configuration with validation + +### 3. Processing Scripts + +- **`scripts/process-html.sh`** - HTML template processing +- **`package.json`** - Scripts for template processing (`predev`, `prebuild`) ## πŸ›‘οΈ Security Benefits -- **No hardcoded credentials** in version control -- **Environment-specific configuration** via `.env` files -- **Automatic validation** of required variables -- **Kubernetes stringData** (auto base64 encoding) -- **Clear separation** of config and code +### Environment Separation -## πŸ“ User Experience Improvements +- **Development**: Uses mock data and relaxed security +- **Production**: Requires all security features and real credentials +- **Clear boundaries** between environments -| Aspect | Before | After | -| -------------------- | ------------------------ | ---------------------- | -| **Setup Complexity** | High (manual base64) | Low (edit .env) | -| **Error Rate** | High (encoding mistakes) | Low (plain text) | -| **Readability** | Poor (base64 strings) | Excellent (plain text) | -| **Customization** | Manual file editing | Environment variables | -| **Deployment** | Multi-step manual | Single command | +### Credential Management -## 🎯 Result +- **No secrets in code** - All sensitive data in environment variables +- **Environment-specific secrets** - Different credentials per environment +- **Template validation** - Ensures required variables are set -The template-based approach makes RxMinder deployment: +### Configuration Validation -- **More user-friendly** - No technical encoding required -- **More secure** - Credentials externalized to `.env` -- **More maintainable** - Clear separation of config and manifests -- **More flexible** - Easy customization via environment variables +```typescript +// Automatic validation in unified.config.ts +if (!unifiedConfig.database.password && unifiedConfig.app.environment === 'production') { + throw new Error('Database password is required in production'); +} +``` -This is a **production-ready, enterprise-grade** configuration management approach that follows Kubernetes best practices. +## πŸ“ Development Workflow + +### 1. Initial Setup + +```bash +# Copy template +cp .env.example .env + +# Customize for your environment +nano .env + +# Process templates +bun run predev +``` + +### 2. Development + +```bash +# Start with template processing +bun run dev # Automatically runs predev + +# Templates are processed automatically +# HTML title updates based on APP_NAME +# Configuration updates based on environment variables +``` + +### 3. Building + +```bash +# Production build with template processing +bun run build # Automatically runs prebuild + +# Templates processed for production +# Environment variables baked into build +``` + +## 🎯 Benefits + +### For Developers + +| Aspect | Before | After | +| ----------------- | ------------------- | ------------------------- | +| **Setup** | Manual file editing | Copy `.env.example` | +| **Customization** | Code changes | Environment variables | +| **Testing** | Hardcoded test data | Environment-based mocking | +| **Debugging** | Console hunting | Centralized debug flags | + +### For Operations + +| Aspect | Before | After | +| -------------- | -------------------- | ---------------------- | +| **Deployment** | Manual configuration | Environment-based | +| **Security** | Hardcoded secrets | External configuration | +| **Monitoring** | Scattered settings | Centralized config | +| **Scaling** | Per-instance setup | Template replication | + +## πŸ” Best Practices + +### Environment Variable Naming + +- Use `VITE_` prefix for client-side variables +- Use descriptive names (`VITE_COUCHDB_PASSWORD` vs `PASSWORD`) +- Group related variables (`VITE_MAILGUN_API_KEY`, `VITE_MAILGUN_DOMAIN`) + +### Template Organization + +- Keep templates close to generated files +- Use clear naming conventions (`.template` suffix) +- Document all template variables + +### Validation Strategy + +- Validate required variables at startup +- Provide clear error messages for missing configuration +- Use TypeScript for compile-time validation + +## πŸš€ Result + +The template-based approach makes RxMinder configuration: + +- **More flexible** - Easy customization for different environments +- **More secure** - No hardcoded secrets in source code +- **More maintainable** - Centralized configuration management +- **More scalable** - Template-driven deployment processes + +This approach follows modern application configuration best practices and provides a solid foundation for development, testing, and future deployment needs.