Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion frontend/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
# testing
/coverage
/coverage/ios
/cypress/screenshots

# production
/dist
Expand Down
39 changes: 26 additions & 13 deletions frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
## Core Technologies

### Ionic + React

- **Purpose**: Cross-platform user interface core that enables building high-quality native and web app experiences
- **Benefits**:
- **Benefits**:
- Single codebase for iOS, Android, and web
- Extensive library of UI components
- Native device functionality access
Expand All @@ -15,6 +16,7 @@
- Platform-specific styling

### React

- **Version**: Latest stable (18+)
- **Features Used**:
- Functional components
Expand All @@ -25,6 +27,7 @@
## Data Management

### Axios

- **Purpose**: HTTP client for making API requests
- **Implementation**:
- Centralized API instance with interceptors
Expand All @@ -33,6 +36,7 @@
- Request cancellation support

### TanStack Query (React Query)

- **Purpose**: Asynchronous state management, caching, and data fetching
- **Key Features**:
- Automatic caching and background refetching
Expand All @@ -44,26 +48,30 @@
## UI Components & Styling

### Font Awesome

- **Purpose**: Comprehensive icon library
- **Implementation**:
- Specific icon subset import to reduce bundle size
- Standard usage pattern for consistent icon presentation

### Google Fonts

- **Purpose**: Rich typography
- **Fonts Used**:
- Primary: [Specify primary font]
- Secondary: [Specify secondary font]
- Loading strategy: Web Font Loader with fallbacks

### Remark Markdown

- **Purpose**: Markdown renderer for content display
- **Features**:
- Custom renderers for application-specific components
- Syntax highlighting for code blocks
- Security measures for user-generated content

### Tailwind CSS

- **Purpose**: Utility-first CSS framework
- **Configuration**:
- Custom theme extending Tailwind defaults
Expand All @@ -74,20 +82,23 @@
## Testing Infrastructure

### Vitest

- **Purpose**: Core test framework
- **Configuration**:
- Component testing setup
- Integration with React Testing Library
- Coverage reporting

### React Testing Library

- **Purpose**: User-centric approach for UI component tests
- **Practices**:
- Testing user interactions over implementation details
- Accessibility testing integration
- Common testing patterns and utilities

### Mock Service Worker

- **Purpose**: API mocking for tests and development
- **Implementation**:
- Request interception
Expand All @@ -97,12 +108,14 @@
## Cursor Rules & Code Style Guidelines

### General Formatting

- Indent using 2 spaces
- Maximum line length: 100 characters
- UTF-8 encoding for all files
- LF line endings

### React Component Structure

```jsx
// Imports grouped by:
// 1. React/framework imports
Expand All @@ -120,17 +133,17 @@ interface ComponentProps {
const ComponentName: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
// Hooks at the top
const [state, setState] = useState<StateType>(initialState);

// Effects after hooks
useEffect(() => {
// Effect content
}, [dependencies]);

// Event handlers and other functions
const handleEvent = () => {
// ...
};

// Return JSX with consistent formatting
return (
<div className="tailwind-classes">
Expand All @@ -149,8 +162,9 @@ export default ComponentName;
```

### Naming Conventions

- **Components**: PascalCase (e.g., `UserProfile`)
- **Files**:
- **Files**:
- Component files: PascalCase matching component name (e.g., `UserProfile.tsx`)
- Utility files: camelCase (e.g., `formatDate.ts`)
- **Functions**: camelCase (e.g., `handleSubmit`)
Expand All @@ -159,41 +173,47 @@ export default ComponentName;
- **CSS Classes**: kebab-case (e.g., `user-profile-container`)

### API and Data Fetching

- Use TanStack Query hooks for all data fetching
- Centralize API calls in dedicated service files
- Implement proper error handling for all requests
- Use consistent data transformation patterns

### State Management

- Prefer local component state for component-specific state
- Use Context API for shared state across multiple components
- Implement TanStack Query for server state
- Document all context providers and their purpose

### Testing Standards

- Minimum test coverage: 80%
- Test user interactions, not implementation details
- One test file per component/utility (e.g., `Component.test.tsx`)
- Use meaningful test descriptions that explain expected behavior

### Performance Considerations

- Memoize expensive calculations with useMemo
- Optimize renders with React.memo for pure components
- Use useCallback for function references passed as props
- Implement virtualization for long lists

### Accessibility Standards

- All interactive elements must be keyboard accessible
- Proper ARIA roles and attributes where applicable
- Maintain proper heading hierarchy
- Ensure sufficient color contrast
- Support screen readers with appropriate alt text and aria labels

## Version Control Guidelines

- Use feature branches for all new development
- Conventional commit messages (feat, fix, docs, style, refactor, test, chore)
- Pull request templates must be followed
- Code must pass all automated checks before review
- Code must pass all automated checks before review

## Helpful Hints

Expand Down Expand Up @@ -229,7 +249,6 @@ Adjust the Prettier configuration as desired.

### Prerequistes


### Clone the Repository

Open the [repository][repo] in a browser. Follow the instructions to clone the repository to your local machine.
Expand Down Expand Up @@ -354,10 +373,6 @@ A detailed test coverage report is created in the `./coverage` directory.

> **NOTE:** This is the command which should be utilized by CI/CD platforms.

### `npm run test:e2e`

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.

### `npm run build`

Builds the app for production to the `dist` folder.
Expand Down Expand Up @@ -408,7 +423,6 @@ This project uses GitHub Actions to perform DevOps automation activities such as
- [Yup][yup]
- [Testing Library][testing-library]
- [Vitest][vitest]
- [Cypress][cypress]
- [ESLint][eslint]
- [GitHub Actions][ghactions]

Expand All @@ -425,4 +439,3 @@ This project uses GitHub Actions to perform DevOps automation activities such as
[vitest]: https://vitest.dev/ 'Vitest Testing Framework'
[ghactions]: https://docs.github.com/en/actions 'GitHub Actions'
[eslint]: https://eslint.org/docs/latest/ 'ESLint'
[cypress]: https://docs.cypress.io/guides/overview/why-cypress 'Cypress Testing Framework'
10 changes: 0 additions & 10 deletions frontend/cypress.config.ts

This file was deleted.

6 changes: 0 additions & 6 deletions frontend/cypress/e2e/test.cy.ts

This file was deleted.

5 changes: 0 additions & 5 deletions frontend/cypress/fixtures/example.json

This file was deleted.

37 changes: 0 additions & 37 deletions frontend/cypress/support/commands.ts

This file was deleted.

20 changes: 0 additions & 20 deletions frontend/cypress/support/e2e.ts

This file was deleted.

Loading