I used to lead a team to develop the design system of that product

#👨‍💻 Frontend Team Lead –

#Core Mission

Take end‑to‑end responsibility for building, testing, and maintaining an isolated frontend microservice that exposes reusable building blocks (components, hooks, services, utilities) to be consumed by existing modules across the product ecosystem.

The backend is built with Django (Django REST Framework), and our frontend consumes its REST API.

#🧩 Key Responsibilities

#1. Microservice‑oriented frontend development

• Design, develop, and maintain a standalone frontend service (e.g., a UI library, a federated module, or a component hub) that other teams can import and use without tight coupling.
• Ensure the service is versioned, documented, and published via a private registry / Storybook.
• Guarantee backward compatibility and provide clear upgrade paths.

#2. Agile collaboration (Scrum team)

• Work within a Scrum team in an agile environment: participate in sprint planning, daily stand‑ups, refinement, retrospectives.
• Manage the team’s backlog: write, refine, and prioritise user stories together with the product owner.
• Assign stories to developers based on skills, workload, and career development goals.
• Track progress using GitLab issues or Jira; ensure stories move from “To Do” → “In Progress” → “Code Review” → “Done”.
• Collaborate with product owners, backend engineers (Django team), QA, and UX designers to deliver high‑value increments each sprint.
• Proactively remove blockers and communicate risks early.

#3. Technical knowledge sharing & workshops

• Organise and deliver JavaScript workshops for team members to raise collective skill level.
• Topics include modern JS (ES2020+), React patterns, state management, testing strategies, and tooling.
• Foster a learning culture where junior and mid‑level developers grow through pair programming and guided exercises.

#4. Code quality & review (GitLab)

• Use GitLab as the central platform for source control, issue tracking, and CI/CD.
• Enforce a code review culture: every merge request requires at least one approval, with constructive feedback focusing on readability, maintainability, and test coverage.
• Support the team by unblocking developers, debugging complex issues, and acting as an escalation point for technical decisions.

#5. Code structure & best practices (JS/React)

• Define and evangelise coding conventions and project structure based on feature‑based organisation.
• Mandate best practices for:
  • React – functional components, hooks over classes.
  • Redux – use Redux Toolkit (slices, thunks) for predictable state management.
  • Hooks – compose custom hooks (e.g., useAuth, useDebounce) to encapsulate and reuse logic.
  • Context – apply for cross‑cutting concerns (theme, language, user permissions) but not for frequent updates.
  • CSS‑in‑JS – adopt styled‑components for component‑scoped styling, dynamic theming, and reduced CSS conflicts.
  • SASS – keep for legacy modules; new work prefers styled‑components.

#6. Component development from scratch

• Build UI components from scratch without relying on heavy third‑party libraries (except for utilities).
• Document each component interactively with Storybook – including props, variants, states (loading, error, disabled), and usage examples.
• Test each component with Jest (unit tests) and React Testing Library (integration tests).

#7. Testing discipline (TDD & full test pyramid)

• Champion Test‑Driven Development (TDD) : write a failing test first, then implement the minimum code to make it pass, then refactor.
• Implement the full test pyramid:
  • Unit tests – Jest + React Testing Library (pure functions, hooks, small components).
  • Integration tests – React Testing Library (component + API mock + Redux store).
  • End‑to‑end (E2E) tests – Cypress (critical user journeys: login, registration, core workflows).
• Ensure that no feature is considered “done” without corresponding tests.
• Integrate tests into the CI pipeline (GitLab CI) to fail builds on regression.

#8. Full‑stack awareness (consuming Django REST API)

• Design the frontend service to efficiently consume the Django‑based REST API:
  • Use typed API clients (e.g., openapi-generator with Django’s Spectacular/DRF schema, or axios + TypeScript interfaces).
  • Align with Django’s authentication mechanisms: JWT (via djangorestframework-simplejwt) or session‑based for BFF patterns.
  • Implement request/response interceptors for token refresh, CSRF token handling (when using Django sessions).
  • Handle Django‑specific error responses (e.g., DRF’s 400 with field‑level errors) and map them to user‑friendly messages (toasts, inline validation).

#9. Container UI for new microservices & UI library integration

• Build container UI for new microservices: create shell applications (e.g., via Webpack Module Federation or iframe wrappers) that host and orchestrate multiple independent frontend microservices.
• Integrate UI libraries from internal and external sources: consume shared component libraries (our own or third‑party) into the container UI and into each microservice.
• Act as maintainer of the UI ecosystem:
  • Bump dependencies, manage breaking changes, and deprecate obsolete components.
  • Write and update documentation (Storybook, README, integration guides) for consuming teams.
  • Provide support for teams that adopt the UI libraries (answer questions, review their integration).

#🌍 Leadership & Coordination (Distributed Teams)

• Lead a team of frontend developers distributed across Tunisia and Switzerland – manage workloads, conduct 1:1s, ensure alignment with product goals, and foster a collaborative culture despite time zone differences.
• Coordinate with an external team in Brazil – align on shared UI library adoption, API contracts, and cross‑team dependencies; organise joint refinement sessions and sync meetings to avoid integration friction.
• Bridge communication between the Tunisian/Swiss frontend team, the Brazilian external team, and internal backend/stakeholders to deliver cohesive features.

#🛠️ Technical toolbox (the “what I work with”)

#Reference Contact

• LinkedIn: Alfredo Benes