Visão Geral

Este curso ensina equipes de produto a desenvolver aplicações React JS de forma colaborativa entre desenvolvedores e designers UX. O foco é integrar desenvolvimento, design e experiência do usuário, criando produtos digitais consistentes, interativos e de alta qualidade.

Objetivo

Após realizar este curso, você será capaz de:

• Criar aplicações React com foco em UX
• Colaborar eficientemente entre desenvolvedores e designers
• Aplicar design systems e padrões de interface
• Implementar componentes reutilizáveis e consistentes
• Criar microinterações e animações para melhorar experiência
• Entregar produtos digitais interativos e de alta qualidade

Publico Alvo

• Desenvolvedores React que trabalham em equipes de produto
• Designers UX/UI que desejam entender implementação em React
• Gerentes de produto e tech leads
• Estudantes e profissionais que querem colaborar em projetos interdisciplinares

Pre-Requisitos

• Fundamentos de JavaScript
• Conhecimento básico em React JS
• Noções de design e UX

Conteúdo Programatico

Module 1 – Introduction to React for Product Teams

1. Overview of React JS in product development
2. Collaboration between developers and UX designers
3. Defining project requirements and user flows
4. Setting up a React project for teamwork

Module 2 – Components and Design Systems

1. Creating reusable and consistent components
2. Implementing design tokens
3. Integrating UI components with UX guidelines
4. Handling component variants and states

Module 3 – Layouts and Responsiveness

1. Building responsive and adaptive layouts
2. Flexbox, CSS Grid, and Tailwind
3. Maintaining consistency across devices
4. Collaboration on layout decisions

Module 4 – State Management

1. Managing state with React Context API
2. Sharing state between components
3. Synchronizing UI with user interactions
4. Optional: Redux or Zustand for complex state

Module 5 – UX-Focused Features

1. Forms, inputs, and validation
2. Interactive feedback and error handling
3. Animations and microinteractions with Framer Motion
4. Improving user flows and usability

Module 6 – API Integration

1. Fetching and displaying dynamic data
2. Handling REST APIs and GraphQL queries
3. Loading states and error handling
4. Syncing data with real-time updates

Module 7 – Accessibility (A11y)

1. Implementing accessible components
2. Keyboard navigation and focus management
3. ARIA roles and semantic HTML
4. Testing with screen readers

Module 8 – Team Collaboration Best Practices

1. Component libraries and shared repositories
2. Version control, Git workflows, and branch strategies
3. Communication between dev and UX teams
4. Documentation and design handoff

Module 9 – Testing and Quality Assurance

1. Testing interactive components
2. Ensuring UX consistency through unit and integration tests
3. Visual regression testing
4. Continuous integration and deployment

Module 10 – Capstone Project

1. Building a full React application collaboratively
2. Applying design, state, APIs, accessibility, and animations
3. Reviewing and iterating based on UX principles
4. Deploying a polished product-ready application