Arquitetura de projetos React com diferentes módulos

3 min readNov 24, 2020

Por ser uma lib, o React não cria muitas regras em como você deve organizar e estruturar seus projetos. E isso é muito legal, nos da a liberdade de criar como nós quisermos.

Hoje eu vou falar como eu fiz para organizar o iDoctor, que é uma aplicação que estou desenvolvendo para o meu TCC. Essa aplicação possuí três diferentes níveis de usuários: Médico(a), Secretário(a) e Administrador(a). E cada um deles possui uma aplicação diferente, com componentes, rotas, páginas, específicas para cada uma delas. Então para não criar uma bagunça dentro do código segui a abordagem que vou mostrar para você.

Mas antes de começar, deixa eu te explicar o que é o projeto

Resumidamente o iDoctor é um SaaS (Software as a Service) para gerenciamento de clinicas médicas, com o propósito de trazer um sistema simples e fácil de se utilizar.

Agora uma informação importante:

O projeto foi iniciado utilizando o create-react-app que gera para nós um boilerplate básico, contendo na raiz arquivos como .gitinore, package.json, README.md, e também gera as pastas public e src, onde manteremos o código da aplicação. Então caso você tenha alguma dúvida, recomendo dar uma lida na documentação acessando aqui.

Bora para o que interessa, como que eu estruturei o projeto?

Primeiramente eu separei a aplicação em módulos, criando um módulo para cada nível de usuário:

Criei uma pasta para cada módulo dentro da src/ que ficou dessa forma:

Dentro de cada modulo eu criei as seguintes pastas:

assets/
components/
pages/
routes/

Cada pasta dessa contém arquivos que só serão utilizados pelo módulo em si, nada que estiver dentro delas é compartilhado com outros módulos.

Mas ai você deve estar se perguntando, e os arquivos que são reutilizáveis?

Então vamos lá, além da pasta modules/, eu criei uma pasta shared/que contém tudo aquilo que é reutilizável dentro da aplicação, e ela ficou com essa estrutura:

Tudo o que é reutilizável fica ai dentro!

Agora vou te mostrar como ficou as rotas:

O arquivo de rotas ficou com a principal tarefa, que é de redirecionar o usuário para a rota que ele tem permissão, e eu tentei fazer da maneira mais simples possível:

Para cada user.type ele chama um arquivo de rotas que está dentro do módulo específico, ou seja, só as rotas daquele módulo vão ser visíveis para o browser, simples né?!

O arquivo de rotas dentro do módulo também ficou simples:

E é basicamente isso, tentei deixar a aplicação com uma estrutura bem simples, porque, convenhamos, pegar uma aplicação com aquelas estruturas extremamente complexas que dão voltas e voltas para resolver o mesmo problema é um pouco chato né?!

Esse é um print da estrutura final: