78 lines
3.3 KiB
Markdown
78 lines
3.3 KiB
Markdown
# Project Requirements
|
|
|
|
This document outlines the key requirements, goals, and constraints for the frontend project.
|
|
|
|
## Core Goals
|
|
|
|
1. **Unified User Experience**: Create a consistent user experience across all applications within the monorepo.
|
|
2. **Code Reusability**: Maximize code reuse through shared components and utilities.
|
|
3. **Team Autonomy**: Allow different teams to work independently on their applications while maintaining consistency.
|
|
4. **Performance Optimization**: Ensure fast loading times and smooth user interactions across all applications.
|
|
5. **Accessibility**: Make all applications accessible to users with disabilities.
|
|
6. **Maintainability**: Ensure the codebase is easy to maintain and extend over time.
|
|
|
|
## Technical Requirements
|
|
|
|
### Architecture
|
|
|
|
1. Maintain the monorepo structure using pnpm workspaces and Turborepo.
|
|
2. Follow the established project structure:
|
|
- `apps/`: Contains the applications
|
|
- `common/`: Common features provided by the main company
|
|
- `cs/`, `wr/`, `as/`: Applications developed by different teams
|
|
- `packages/`: Contains shared packages
|
|
- `common/`: Common packages provided by the main company
|
|
- `assets/`: Shared assets (styles, images, etc.)
|
|
- `components/`: Shared UI components
|
|
- `business_components/`: Business-specific components
|
|
- `config/`: Shared configuration
|
|
- `network/`: Network-related utilities
|
|
|
|
### Development Standards
|
|
|
|
1. Use TypeScript for all code to ensure type safety.
|
|
2. Follow ESLint and Prettier configurations for consistent code style.
|
|
3. Implement comprehensive testing using Storybook for component development and testing.
|
|
4. Use Zustand for state management across applications.
|
|
5. Implement TanStack Query (React Query) for data fetching and caching.
|
|
6. Use Axios for HTTP requests.
|
|
|
|
### UI/UX Requirements
|
|
|
|
1. Use Tailwind CSS for styling with consistent design patterns.
|
|
2. Implement Radix UI for accessible UI primitives.
|
|
3. Follow Shadcn UI patterns for component design.
|
|
4. Use TanStack Table for data tables and Chart.js for charts.
|
|
5. Ensure responsive design for all screen sizes.
|
|
6. Maintain a consistent color scheme and typography across all applications.
|
|
|
|
## Constraints
|
|
|
|
1. **Performance Budgets**:
|
|
- First Contentful Paint (FCP): < 1.8s
|
|
- Time to Interactive (TTI): < 3.5s
|
|
- Total Bundle Size: < 500KB (compressed)
|
|
|
|
2. **Browser Support**:
|
|
- Support the last two versions of major browsers (Chrome, Firefox, Safari, Edge)
|
|
- No support required for Internet Explorer
|
|
|
|
3. **Deployment Constraints**:
|
|
- CI/CD pipeline must complete within 10 minutes
|
|
- Zero-downtime deployments required
|
|
|
|
4. **Team Constraints**:
|
|
- Multiple teams working on different applications
|
|
- Need for clear boundaries and interfaces between teams
|
|
- Varying levels of expertise with the technology stack
|
|
|
|
5. **Technical Debt**:
|
|
- Some legacy code exists in certain applications
|
|
- Need to gradually migrate to the new architecture
|
|
|
|
## Future Considerations
|
|
|
|
1. **Internationalization**: Prepare for multi-language support in the future.
|
|
2. **Theming**: Consider implementing a theming system for white-labeling.
|
|
3. **Mobile Applications**: Prepare for potential React Native integration.
|
|
4. **Micro-frontends**: Evaluate the possibility of moving to a micro-frontend architecture. |