|
| 1 | +# EczEase Architecture Documentation |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +EczEase is a comprehensive platform designed to help individuals with eczema and food allergies manage their conditions through technology. The platform includes features like an AI chatbot, symptom tracking, naturopath directory, and educational content. |
| 6 | + |
| 7 | +## Technology Stack |
| 8 | + |
| 9 | +### Frontend |
| 10 | + |
| 11 | +- **Framework**: [Angular](https://angular.io/) (v19.x) |
| 12 | +- **Meta-Framework**: [Analog.js](https://analogjs.org/) - A fullstack Angular meta-framework providing file-based routing, API routes, and more |
| 13 | +- **Styling**: [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for rapid UI development |
| 14 | +- **Package Management**: [PNPM](https://pnpm.io/) - Fast, disk space efficient package manager |
| 15 | + |
| 16 | +### Backend |
| 17 | + |
| 18 | +- **API**: RESTful API endpoints created using Analog.js API routes |
| 19 | +- **Database**: (To be determined based on requirements) |
| 20 | +- **Authentication**: (To be determined based on requirements) |
| 21 | + |
| 22 | +### Development Environment |
| 23 | + |
| 24 | +- **Workspace Management**: [Nx](https://nx.dev/) - Powerful build system and CLI for monorepo management |
| 25 | +- **Testing Framework**: Vitest for unit testing |
| 26 | +- **Code Quality**: ESLint for code linting, Prettier for code formatting |
| 27 | +- **Version Control**: Git with GitHub for repository hosting |
| 28 | + |
| 29 | +### Deployment |
| 30 | + |
| 31 | +- **Cloud Provider**: Google Cloud Platform (GCP) |
| 32 | +- **Services**: |
| 33 | + - Cloud Run for containerized application hosting |
| 34 | + - Cloud Storage for static assets |
| 35 | + - Cloud SQL for database (if applicable) |
| 36 | + - Firebase for authentication (if applicable) |
| 37 | + |
| 38 | +## Project Structure |
| 39 | + |
| 40 | +``` |
| 41 | +eczease/ |
| 42 | +├── .github/ # GitHub configuration and workflows |
| 43 | +├── .nx/ # Nx cache and configuration |
| 44 | +├── docs/ # Project documentation |
| 45 | +├── node_modules/ # Dependencies (managed by PNPM) |
| 46 | +├── webapp/ # Main web application |
| 47 | +│ ├── public/ # Static assets |
| 48 | +│ │ └── assets/ # Images, fonts, etc. |
| 49 | +│ └── src/ # Application source code |
| 50 | +│ ├── app/ # Angular application code |
| 51 | +│ │ ├── components/ # Reusable UI components |
| 52 | +│ │ ├── pages/ # Page components (file-based routing) |
| 53 | +│ │ └── server/ # API routes and server-side code |
| 54 | +│ ├── styles/ # Global styles |
| 55 | +│ └── main.ts # Application entry point |
| 56 | +├── .gitignore # Git ignore file |
| 57 | +├── nx.json # Nx configuration |
| 58 | +├── package.json # Project dependencies and scripts |
| 59 | +├── pnpm-lock.yaml # PNPM lock file |
| 60 | +└── tsconfig.base.json # Base TypeScript configuration |
| 61 | +``` |
| 62 | + |
| 63 | +## Application Architecture |
| 64 | + |
| 65 | +### Frontend Architecture |
| 66 | + |
| 67 | +The frontend follows a component-based architecture typical of Angular applications, with some additional patterns from Analog.js: |
| 68 | + |
| 69 | +1. **Pages**: Follows Analog.js file-based routing convention |
| 70 | + |
| 71 | + - Files in the `app/pages` directory automatically become routes |
| 72 | + - Dynamic routes use parentheses notation: `(user).page.ts` |
| 73 | + |
| 74 | +2. **Components**: |
| 75 | + |
| 76 | + - Standalone Angular components |
| 77 | + - Follows a hierarchical structure |
| 78 | + - Shared components in the `components` directory |
| 79 | + |
| 80 | +3. **State Management**: |
| 81 | + - Uses Angular signals for reactive state management |
| 82 | + - HTTP client for API communication |
| 83 | + |
| 84 | +### Backend Architecture |
| 85 | + |
| 86 | +The backend uses Analog.js API routes: |
| 87 | + |
| 88 | +1. **API Endpoints**: |
| 89 | + |
| 90 | + - Located in `app/server/routes` |
| 91 | + - Each file creates a corresponding API endpoint |
| 92 | + - Supports HTTP methods (GET, POST, PUT, DELETE) |
| 93 | + |
| 94 | +2. **Data Flow**: |
| 95 | + - Client-side forms submit data to API endpoints |
| 96 | + - API routes process requests and return responses |
| 97 | + - Database interactions (when implemented) will follow repository pattern |
| 98 | + |
| 99 | +## Feature Roadmap |
| 100 | + |
| 101 | +The platform will be rolled out in phases: |
| 102 | + |
| 103 | +1. **MVP (Minimum Viable Product)**: |
| 104 | + |
| 105 | + - Landing page with email collection (completed) |
| 106 | + - AI Chatbot for basic eczema and food allergy guidance (coming first) |
| 107 | + |
| 108 | +2. **Phase 2**: |
| 109 | + |
| 110 | + - Symptom Tracking |
| 111 | + - Basic Educational Content |
| 112 | + |
| 113 | +3. **Phase 3**: |
| 114 | + - Naturopath Directory |
| 115 | + - Enhanced Educational Content |
| 116 | + - Community Support Features |
| 117 | + |
| 118 | +## Deployment Strategy |
| 119 | + |
| 120 | +The application will be deployed to Google Cloud Platform: |
| 121 | + |
| 122 | +1. **CI/CD Pipeline**: |
| 123 | + |
| 124 | + - GitHub Actions for continuous integration |
| 125 | + - Automated testing and building |
| 126 | + - Deployment to GCP environments |
| 127 | + |
| 128 | +2. **Environments**: |
| 129 | + |
| 130 | + - Development |
| 131 | + - Staging |
| 132 | + - Production |
| 133 | + |
| 134 | +3. **Infrastructure as Code**: |
| 135 | + - Configuration managed through version control |
| 136 | + - Infrastructure provisioning scripts |
| 137 | + |
| 138 | +## Security Considerations |
| 139 | + |
| 140 | +1. **Authentication and Authorization**: |
| 141 | + |
| 142 | + - Secure user authentication system |
| 143 | + - Role-based access control |
| 144 | + |
| 145 | +2. **Data Protection**: |
| 146 | + |
| 147 | + - Encryption of sensitive data |
| 148 | + - HTTPS for all communications |
| 149 | + - Healthcare data compliance standards |
| 150 | + |
| 151 | +3. **API Security**: |
| 152 | + - Rate limiting |
| 153 | + - CORS configuration |
| 154 | + - Input validation and sanitization |
| 155 | + |
| 156 | +## Performance Optimization |
| 157 | + |
| 158 | +1. **Frontend Optimization**: |
| 159 | + |
| 160 | + - Code splitting for improved load times |
| 161 | + - Image optimization |
| 162 | + - Lazy-loading modules and components |
| 163 | + |
| 164 | +2. **Server-Side Optimization**: |
| 165 | + - Caching strategies |
| 166 | + - Database query optimization |
| 167 | + - Resource monitoring |
| 168 | + |
| 169 | +## Development Guidelines |
| 170 | + |
| 171 | +1. **Coding Standards**: |
| 172 | + |
| 173 | + - Follow Angular style guide |
| 174 | + - Use TypeScript for type safety |
| 175 | + - Write unit tests for components and services |
| 176 | + |
| 177 | +2. **Git Workflow**: |
| 178 | + |
| 179 | + - Feature branch strategy |
| 180 | + - Pull request reviews |
| 181 | + - Semantic versioning |
| 182 | + |
| 183 | +3. **Documentation**: |
| 184 | + - Code documentation with JSDoc |
| 185 | + - API documentation |
| 186 | + - User guides for complex features |
| 187 | + |
| 188 | +## Conclusion |
| 189 | + |
| 190 | +EczEase is architected as a modern, scalable web application using Angular, Analog.js, and GCP. The architecture supports the incremental development of features while maintaining high standards for performance, security, and user experience. |
| 191 | + |
| 192 | +This document should be treated as a living document and updated as the architecture evolves. |
0 commit comments