Skip to content

Commit 8e7b2f4

Browse files
authored
feat(webapp): add landing page (#1)
1 parent bfe1308 commit 8e7b2f4

File tree

15 files changed

+1036
-250
lines changed

15 files changed

+1036
-250
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,5 @@ Thumbs.db
4040

4141
.nx/cache
4242
.nx/workspace-data
43-
.idea
43+
.idea
44+
.env

docs/ARCHITECTURE.md

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
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.

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@
1717
"@angular/platform-server": "^19.0.0",
1818
"@angular/router": "^19.0.0",
1919
"front-matter": "^4.0.2",
20+
"h3": "^1.15.1",
2021
"marked": "^5.0.2",
2122
"marked-gfm-heading-id": "^3.1.0",
2223
"marked-highlight": "^2.0.1",
2324
"marked-mangle": "^1.1.7",
2425
"mermaid": "^10.2.4",
2526
"prismjs": "^1.29.0",
27+
"resend": "^4.1.2",
2628
"rxjs": "~7.8.0",
2729
"tslib": "^2.4.0",
2830
"zone.js": "~0.15.0"

0 commit comments

Comments
 (0)