3
3
## Core Technologies
4
4
5
5
### Ionic + React
6
+
6
7
- ** Purpose** : Cross-platform user interface core that enables building high-quality native and web app experiences
7
- - ** Benefits** :
8
+ - ** Benefits** :
8
9
- Single codebase for iOS, Android, and web
9
10
- Extensive library of UI components
10
11
- Native device functionality access
15
16
- Platform-specific styling
16
17
17
18
### React
19
+
18
20
- ** Version** : Latest stable (18+)
19
21
- ** Features Used** :
20
22
- Functional components
25
27
## Data Management
26
28
27
29
### Axios
30
+
28
31
- ** Purpose** : HTTP client for making API requests
29
32
- ** Implementation** :
30
33
- Centralized API instance with interceptors
33
36
- Request cancellation support
34
37
35
38
### TanStack Query (React Query)
39
+
36
40
- ** Purpose** : Asynchronous state management, caching, and data fetching
37
41
- ** Key Features** :
38
42
- Automatic caching and background refetching
44
48
## UI Components & Styling
45
49
46
50
### Font Awesome
51
+
47
52
- ** Purpose** : Comprehensive icon library
48
53
- ** Implementation** :
49
54
- Specific icon subset import to reduce bundle size
50
55
- Standard usage pattern for consistent icon presentation
51
56
52
57
### Google Fonts
58
+
53
59
- ** Purpose** : Rich typography
54
60
- ** Fonts Used** :
55
61
- Primary: [ Specify primary font]
56
62
- Secondary: [ Specify secondary font]
57
63
- Loading strategy: Web Font Loader with fallbacks
58
64
59
65
### Remark Markdown
66
+
60
67
- ** Purpose** : Markdown renderer for content display
61
68
- ** Features** :
62
69
- Custom renderers for application-specific components
63
70
- Syntax highlighting for code blocks
64
71
- Security measures for user-generated content
65
72
66
73
### Tailwind CSS
74
+
67
75
- ** Purpose** : Utility-first CSS framework
68
76
- ** Configuration** :
69
77
- Custom theme extending Tailwind defaults
74
82
## Testing Infrastructure
75
83
76
84
### Vitest
85
+
77
86
- ** Purpose** : Core test framework
78
87
- ** Configuration** :
79
88
- Component testing setup
80
89
- Integration with React Testing Library
81
90
- Coverage reporting
82
91
83
92
### React Testing Library
93
+
84
94
- ** Purpose** : User-centric approach for UI component tests
85
95
- ** Practices** :
86
96
- Testing user interactions over implementation details
87
97
- Accessibility testing integration
88
98
- Common testing patterns and utilities
89
99
90
100
### Mock Service Worker
101
+
91
102
- ** Purpose** : API mocking for tests and development
92
103
- ** Implementation** :
93
104
- Request interception
97
108
## Cursor Rules & Code Style Guidelines
98
109
99
110
### General Formatting
111
+
100
112
- Indent using 2 spaces
101
113
- Maximum line length: 100 characters
102
114
- UTF-8 encoding for all files
103
115
- LF line endings
104
116
105
117
### React Component Structure
118
+
106
119
``` jsx
107
120
// Imports grouped by:
108
121
// 1. React/framework imports
@@ -120,17 +133,17 @@ interface ComponentProps {
120
133
const ComponentName: React .FC <ComponentProps > = ({ prop1, prop2 }) => {
121
134
// Hooks at the top
122
135
const [state , setState ] = useState< StateType> (initialState);
123
-
136
+
124
137
// Effects after hooks
125
138
useEffect (() => {
126
139
// Effect content
127
140
}, [dependencies]);
128
-
141
+
129
142
// Event handlers and other functions
130
143
const handleEvent = () => {
131
144
// ...
132
145
};
133
-
146
+
134
147
// Return JSX with consistent formatting
135
148
return (
136
149
< div className= " tailwind-classes" >
@@ -149,8 +162,9 @@ export default ComponentName;
149
162
```
150
163
151
164
### Naming Conventions
165
+
152
166
- ** Components** : PascalCase (e.g., ` UserProfile ` )
153
- - ** Files** :
167
+ - ** Files** :
154
168
- Component files: PascalCase matching component name (e.g., ` UserProfile.tsx ` )
155
169
- Utility files: camelCase (e.g., ` formatDate.ts ` )
156
170
- ** Functions** : camelCase (e.g., ` handleSubmit ` )
@@ -159,41 +173,47 @@ export default ComponentName;
159
173
- ** CSS Classes** : kebab-case (e.g., ` user-profile-container ` )
160
174
161
175
### API and Data Fetching
176
+
162
177
- Use TanStack Query hooks for all data fetching
163
178
- Centralize API calls in dedicated service files
164
179
- Implement proper error handling for all requests
165
180
- Use consistent data transformation patterns
166
181
167
182
### State Management
183
+
168
184
- Prefer local component state for component-specific state
169
185
- Use Context API for shared state across multiple components
170
186
- Implement TanStack Query for server state
171
187
- Document all context providers and their purpose
172
188
173
189
### Testing Standards
190
+
174
191
- Minimum test coverage: 80%
175
192
- Test user interactions, not implementation details
176
193
- One test file per component/utility (e.g., ` Component.test.tsx ` )
177
194
- Use meaningful test descriptions that explain expected behavior
178
195
179
196
### Performance Considerations
197
+
180
198
- Memoize expensive calculations with useMemo
181
199
- Optimize renders with React.memo for pure components
182
200
- Use useCallback for function references passed as props
183
201
- Implement virtualization for long lists
184
202
185
203
### Accessibility Standards
204
+
186
205
- All interactive elements must be keyboard accessible
187
206
- Proper ARIA roles and attributes where applicable
188
207
- Maintain proper heading hierarchy
189
208
- Ensure sufficient color contrast
190
209
- Support screen readers with appropriate alt text and aria labels
191
210
192
211
## Version Control Guidelines
212
+
193
213
- Use feature branches for all new development
194
214
- Conventional commit messages (feat, fix, docs, style, refactor, test, chore)
195
215
- Pull request templates must be followed
196
- - Code must pass all automated checks before review
216
+ - Code must pass all automated checks before review
197
217
198
218
## Helpful Hints
199
219
@@ -229,7 +249,6 @@ Adjust the Prettier configuration as desired.
229
249
230
250
### Prerequistes
231
251
232
-
233
252
### Clone the Repository
234
253
235
254
Open the [ repository] [ repo ] in a browser. Follow the instructions to clone the repository to your local machine.
@@ -354,10 +373,6 @@ A detailed test coverage report is created in the `./coverage` directory.
354
373
355
374
> ** NOTE:** This is the command which should be utilized by CI/CD platforms.
356
375
357
- ### ` npm run test:e2e `
358
-
359
- Runs all end-to-end (e2e) tests using the Cypress framework. See the [ Cypress CLI] ( https://docs.cypress.io/guides/guides/command-line ) documentation for more information.
360
-
361
376
### ` npm run build `
362
377
363
378
Builds the app for production to the ` dist ` folder.
@@ -408,7 +423,6 @@ This project uses GitHub Actions to perform DevOps automation activities such as
408
423
- [ Yup] [ yup ]
409
424
- [ Testing Library] [ testing-library ]
410
425
- [ Vitest] [ vitest ]
411
- - [ Cypress] [ cypress ]
412
426
- [ ESLint] [ eslint ]
413
427
- [ GitHub Actions] [ ghactions ]
414
428
@@ -425,4 +439,3 @@ This project uses GitHub Actions to perform DevOps automation activities such as
425
439
[ vitest ] : https://vitest.dev/ ' Vitest Testing Framework '
426
440
[ ghactions ] : https://docs.github.com/en/actions ' GitHub Actions '
427
441
[ eslint ] : https://eslint.org/docs/latest/ ' ESLint '
428
- [ cypress ] : https://docs.cypress.io/guides/overview/why-cypress ' Cypress Testing Framework '
0 commit comments