Skip to content

Frontend Development Workflow Guide

Jump to bottom
Yaroslav Kravtsov edited this page Jan 29, 2025 · 1 revision

Overview

This guide outlines the step-by-step workflow for frontend development in our project. It covers everything from reading an issue to merging a Pull Request (PR) and verifying the deployed feature in production.

Following this guide ensures consistency, quality, and smooth collaboration within the team.

1. Read and Understand the Issue

Before writing any code:

  • Read the GitHub issue carefully.
  • Check all requirements, designs (Figma), and references.
  • Ask questions on GitHub or Slack if anything is unclear.
  • Make sure you fully understand the task before starting.

2. Create a Branch From the GitHub Issue

  • Use the GitHub issue page to create a new branch directly.
  • Follow the project's branch naming convention to maintain consistency.

Tip: If unsure about branch naming, check previous branches or ask your mentor.

3. Open a Pull Request (PR)

  • Open a Pull Request (PR) from your newly created branch.
  • Use the provided PR description template and fill it out accurately:
    • Reference the related GitHub issue.
    • Clearly explain what changes are being made.
    • Add any relevant screenshots or GIFs if applicable.

Note: A PR should be opened at the beginning of the task, not at the end.

4. Local Development & Daily Workflow

  • Checkout the new branch locally.
  • Commit and push your work daily.
  • Ensure all CI checks pass at the end of each day.

Why push daily?

  • Coderabbit AI will review your code and provide feedback.
  • The CI/CD pipeline will generate a sandbox link where you can preview your changes.

5. Implement Tasks & Manual Testing

  • Follow the task list in the GitHub issue.
  • After completing each task:
    • Manually test your changes.
    • Verify the design matches Figma (pixel-perfect implementation).
    • Test across all screen resolutions to ensure responsiveness.

Tip: Use browser DevTools to simulate different screen sizes.

6. Morning Routine: Address AI Comments

  • Every morning, check the Coderabbit AI review comments.
  • Fix the suggested improvements before continuing with new tasks.

Reminder: This ensures code quality remains high throughout development.

7. Manager Review

Once you have implemented and tested everything:

  1. Request a review from your manager.
  2. Address feedback and make necessary fixes.
  3. Only proceed to the next step after manager approval.

8. QA Review

After manager approval:

  1. The QA team will test the feature.
  2. You must fix any bugs they report.
  3. QA must approve the feature before moving forward.

Important: Do not write automated tests until the feature passes QA.

9. Code Coverage & Testing Requirements

Before merging, you must cover your code with the following tests:

  • E2E (End-to-End) Tests: Validate core user flows.
  • Visual Tests: Ensure UI matches expected branding and design.
  • React Testing Library Tests: Check React components under different scenarios.
  • Unit Tests: Ensure logic correctness.
  • Mutation Tests: Measure test quality.
  • Memory Leak Tests: Detect leaks in complex states or third-party libraries.
  • Load Tests: Ensure performance and scalability.

Reminder: All tests must pass before merging.

10. Code Review Process

Code review involves:

  • Coderabbit AI for automated feedback.
  • Manager review for final approval.

Note: A PR cannot be merged until all CI checks pass.

11. Final Self-Review & Manual Testing

Before merging:

  • Review your own code one last time.
  • Manually test the feature again on:
    • Different browsers (Chrome, Firefox, Edge, Safari).
    • Multiple devices (desktop, tablet, mobile).

12. Merge & Production Verification

Once everything is approved:

  1. Request the manager to merge your PR into the main branch.
  2. Wait for automatic deployment to production.
  3. Test the feature in production to confirm it works as expected.

Reminder: Always verify your feature after deployment to catch any last-minute issues.

Summary

Step Description
1 Read the issue and clarify any doubts.
2 Create a branch from the issue.
3 Open a PR and provide a detailed description.
4 Work locally, commit daily, and ensure CI checks pass.
5 Implement tasks and manually test.
6 Fix AI comments each morning.
7 Request and address manager review.
8 Pass QA testing and fix any reported bugs.
9 Write and pass all required tests.
10 Get a final code review from AI and manager.
11 Perform self-review and final manual tests.
12 Merge, deploy, and verify in production.

By following this workflow, you will ensure high-quality, well-tested code that meets our project standards.

Additional Notes

  • Use Slack for communication if you are blocked.
  • Check GitHub notifications daily for updates.
  • Follow our PR review guidelines to ensure a smooth approval process.

If you have any questions, ask your manager or teammates.

Happy coding! 🚀

Clone this wiki locally