Collaborations
Collaboration Approach of the NepWalk Frontend Team
We, the frontend team at NepWalk, work closely with design, backend, QA, and Scrum/PM teams to deliver user-focused features. Our collaborative approach aligns with the project’s vision and the Business Requirements Document (BRD) through these steps, each supported by a template to standardize communication and documentation:
1. Requirement Understanding
We sync with Scrum/PM to clarify feature goals, timelines, and dependencies, ensuring we’re aligned from the start.
Template ( Clickup Comment or Slack Message):
Feature: [e.g., Login Form, NPW-456]
Goal: [e.g., Enable email/password login]
Acceptance Criteria:
- [e.g., Validates email format]
- [e.g., Submits to auth API]
Dependencies:
- Backend: [e.g., Auth API by 2025-06-05]
- Design: [e.g., Figma by 2025-06-03]
Timeline: [e.g., Sprint 3, due 2025-06-10]
Questions: [e.g., Social login needed?]
2. R&D
We collaborate with backend on API specs and flows, and with design on technical feasibility, to plan a smooth implementation.
Template (GitHub Issue or app/<feature>/docs/research.md):
Feature R&D [e.g., Login Form, NPW-456]
API (Backend):
- Endpoint: [e.g., POST /api/auth/login]
- Data: [e.g., { email: string, password: string }]
- Link: [API docs]
Design:
- Figma: [Link]
- Notes: [e.g., Mobile-first, WCAG 2.1]
Feasibility:
- [e.g., Use react-hook-form for validation]
Action Items:
- Backend: Confirm API by [date].
- Design: Finalize Figma by [date].
3. Design Review
We work with designers to review final Figma files, confirming spacing, responsiveness, and accessibility (e.g., WCAG).
Template (Figma Comment or Slack Thread):
Feature: [e.g., Login Form, NPW-456]
Figma: [Link to final version]
Review:
- Spacing: [e.g., 16px padding]
- Responsive: [e.g., Breakpoints at 320px, 768px]
- Accessibility: [e.g., ARIA labels added]
Feedback: [e.g., Increase button contrast]
Next: Designers update by [date].
4. Component Planning
We plan reusable components with input from backend for API alignment and QA for known bug insights.
Template (GitHub Issue or app/<feature>/docs/components.md):
Feature Component Plan [e.g., Login Form, NPW-456]
Components:
- [e.g., LoginForm, ErrorMessage]
Folder:
- app/login/components/
Dependencies:
- Shared: [e.g., Button (`components/Button/Button.tsx`)]
- External: [e.g., react-hook-form@^7.45.0]
API:
- [e.g., POST /api/auth/login]
QA:
- Bugs: [e.g., Form reset issue, NPW-123]
- Tests: [e.g., Invalid email, empty fields]
Next: Backend confirms API by [date].
5. Development
We build UI, integrate APIs, and write tests, staying in touch with backend for integration and QA for test coverage.
Template (GitHub PR Description):
PR: [e.g., NPW-456: Login Form]
Changes:
- [e.g., Added LoginForm with react-hook-form]
- [e.g., Integrated /api/auth/login]
Dependencies:
- [e.g., Button (`components/Button/Button.tsx`)]
- [e.g., react-hook-form@^7.45.0]
Tests:
- [e.g., Unit: LoginForm.test.tsx]
Notes:
- Backend: [e.g., Tested with mock API]
- QA: [e.g., Check empty field validation]
6. Internal Review
We review code internally, get design and QA feedback, and use linters to ensure quality.
Template (GitHub PR Comment):
PR: [e.g., NPW-456]
Review:
- [ ] Code: TypeScript/naming conventions
- [ ] Design: Matches Figma
- [ ] Accessibility: WCAG 2.1
- [ ] Tests: Unit tests pass
- [ ] CI: ESLint/Jest passed
Feedback: [e.g., Fix button padding]
Reviewers: [e.g., @designer1, @qa1]
7. Release & Deployment
We align with Scrum/PM for sprint releases, provide frontend notes and tests, and ensure CI-passed PRs for deployment.
Template (GitHub Release Notes or app/<feature>/docs/release.md):
Feature Release [e.g., Login Form, NPW-456]
Summary:
- [e.g., Login form with email/password validation]
Dependencies:
- [e.g., Button (`components/Button/Button.tsx`)]
- [e.g., react-hook-form@^7.45.0]
Notes:
- [e.g., Accessibility: ARIA labels added]
- [e.g., Tests: 100% coverage]
CI:
- PR to TEST passed
Next: QA validates in TEST by [date]