Descubra como criar sistemas do zero utilizando React e Express, com um enfoque prático e completo. Neste artigo, exploraremos as etapas essenciais para desenvolver um projeto full stack, desde entender os requisitos do cliente até a implementação e integração do front-end e back-end. Aprenda como transformar requisitos em user stories, organizar tarefas em um quadro Kanban, e utilizar frameworks ágeis para aprimorar a eficiência do desenvolvimento. Este guia oferece uma visão detalhada do dia-a-dia de um desenvolvedor full stack, com ênfase em práticas e metodologias de mercado.

Apresentação do Instrutor

Vitor Esteves é um desenvolvedor experiente, com atuação tanto no Brasil quanto no exterior, e possui vasta experiência em back-end, front-end, full stack e DevOps. Atualmente, ele desempenha o papel de tech lead em uma empresa brasileira.

  • Experiência em desenvolvimento de software no Brasil e no exterior
  • Atuação em diversas áreas, incluindo back-end, front-end, full stack e DevOps
  • Papel atual como tech lead em uma empresa brasileira

Objetivo do Módulo

O módulo tem como propósito oferecer uma experiência prática e abrangente em desenvolvimento full stack, abordando desde a compreensão dos requisitos do cliente até a implementação de um sistema funcional, passando pela organização do trabalho em um quadro Kanban.

  • Experiência completa de desenvolvimento full stack
  • Compreensão dos requisitos do cliente e transformação em user stories e backlog do produto
  • Organização do trabalho em um quadro Kanban
  • Codificação e conexão entre front-end e back-end
  • Persistência de dados no banco para obter um sistema completo e funcional

Metodologia

Vamos seguir uma abordagem ágil, utilizando frameworks como Scrum e Kanban para organizar o trabalho. Começaremos entendendo os requisitos do cliente e transformando isso em épicos e user stories. Um épico representa uma funcionalidade de alto nível, que depois é dividida em user stories menores. Cada user story será uma tarefa no nosso quadro Kanban. Vamos priorizar as tarefas, movendo-as nas colunas “To Do”, “In Progress” e “Done” conforme formos implementando. O front-end será construído com React e o back-end com NodeJS + Express. Usaremos algum banco de dados como MongoDB ou PostgreSQL para persistir os dados. A comunicação entre front e back será feita através de uma API REST, com requisições HTTP. Ao final do módulo, teremos um sistema completo funcionando em ambiente local, pronto para ser implantado na nuvem.

  • Utilização de frameworks como Scrum e Kanban para organização do trabalho
  • Transformação de requisitos do cliente em épicos e user stories
  • Priorização de tarefas utilizando quadro Kanban
  • Construção do front-end com React e do back-end com NodeJS + Express
  • Utilização de banco de dados como MongoDB ou PostgreSQL para persistência de dados
  • Comunicação entre front e back através de uma API REST

Criando o Projeto

Vamos imaginar que recebemos o seguinte requisito de um cliente: “Quero um sistema para gerenciar meus contatos. Nele, deve ser possível cadastrar, visualizar, editar e excluir contatos. Cada contato possui nome, email e telefone.” O primeiro passo será quebrar esse épico em user stories menores:

  • Requisito do cliente para desenvolvimento de um sistema de gerenciamento de contatos
  • Divisão do épico em user stories menores

Visão Geral do Projeto

O projeto consiste em desenvolver um sistema de gerenciamento de contatos, permitindo aos usuários visualizar, editar e excluir informações de contatos. O desenvolvimento será realizado utilizando tecnologias modernas, como React para o front-end, Node/Express para o back-end e um banco de dados para armazenamento das informações.

  • Desenvolvimento de um sistema de gerenciamento de contatos
  • Utilização de tecnologias modernas, como React e Node/Express
  • Implementação de funcionalidades de visualização, edição e exclusão de contatos

Desenvolvimento Front-End e Back-End

O desenvolvimento do projeto será dividido em etapas, começando pela configuração do projeto front-end com React e do back-end com Express. Em seguida, serão criadas as telas e rotas principais, priorizando as funcionalidades essenciais. A integração entre front e back também será realizada de forma gradual, garantindo um fluxo completo de cadastro, edição e listagem de contatos.

  • Configuração do projeto front-end com React
  • Configuração do projeto back-end com Express
  • Criação de telas e rotas principais
  • Integração gradual entre front e back-end
  • Desenvolvimento de fluxo completo de cadastro, edição e listagem de contatos

Experiência Full Stack e Boas Práticas

Ao final do desenvolvimento, o projeto proporcionará uma experiência full stack, abrangendo desde o design e lógica no front-end até o armazenamento no banco de dados no back-end. O objetivo é seguir as boas práticas do mercado, garantindo um projeto sólido e funcional, e proporcionar aos participantes a oportunidade de aplicar seus conhecimentos em um ambiente desafiador.

  • Experiência full stack, abrangendo design, lógica e banco de dados
  • Seguimento das boas práticas do mercado
  • Oportunidade de aplicar conhecimentos em um ambiente desafiador

Conclusão

Ao final deste artigo, você terá adquirido conhecimento prático e aprofundado sobre o desenvolvimento de sistemas utilizando React e Express. Com a experiência completa de full stack, desde o design e lógica no front-end até o banco de dados no back-end, você estará preparado para enfrentar desafios reais de desenvolvimento de software. Esperamos que este guia prático o ajude a compreender as boas práticas do mercado e a construir projetos full stack de forma eficiente e eficaz.