FE
Domain: Documentation / Translation

Difficulty: Intermediate

Description:
The current README lacks details for developers wanting to understand the architecture and extend the project. Write additional documentation covering:

• Project architecture overview (pages, components, utilities)
• API integration details (which endpoints are used where)
• How to add a new search page
• Component structure and patterns
• Environment variables and configuration
• Testing guidelines (when tests exist)

Expected Outcome:

• Extended README with Developer section
• Clear documentation of project structure
• API integration guide
• Component creation guide
• Easy onboarding for new contributors

Setup Steps:

1. Add new File: "Developer Guide."
2. Document project structure with file tree
3. Explain data flow and component patterns
4. Add API integration documentation
5. Include code examples

Second Steps

1 Clear project structure with file tree

2 Data flow explanation

3 API integration guide with examples

4 How to add a new search page (step by step)

5 Component structure and best practices

6 Environment variables and configuration

7 Testing guidelines

PROJECT EXPECTED

project-root/
├── src/
│ ├── api/
│ │ └── index.js # Centralized API calls
│ ├── components/
│ │ ├── common/ # Reusable UI components (Button, Input, Loader)
│ │ └── layout/ # Layout components (Header, Footer, Navbar)
│ ├── pages/
│ │ ├── Home/ # Home page (page-level components)
│ │ └── Search/ # Search page and related logic
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Helper and utility functions
│ ├── styles/ # Global styles and theme files
│ ├── App.js # App routes and top-level layout
│ └── main.js # Application entry point
├── public/ # Static assets
├── tests/ # Test files
├── .env.example # Environment variables template
├── package.json
└── README.md

Testing Guidelines

Tests are located in the tests/ directory

Use unit tests for components and utilities

Test API logic with mocked responses

Component Rules

One component per file

Use PascalCase for component names

Keep components small and reusable

Separate logic (hooks) from UI where possible

Description

This task adds a Developer Guide that explains the project structure, architecture, API usage, and contribution steps to make onboarding and feature development easier for new front-end developers

Scope:

Document project structure with a file tree

Explain architecture and data flow

Add API integration guide with examples

Provide steps to add a new search page

Describe component structure and best practices

Document environment variables and configuration

Include testing guidelines

Links/References:

• Current README: README.md
• Gerrit repository: https://gerrit.wikimedia.org/r/labs/tools/WdTmCollab