1
resposta

Esquema de pastas para o projeto back + frontend

Olá, boa tarde! Gostei bastante do curso, assim como todos os outros que fiz aqui na plataforma. Porém estou fazendo um projeto para testar o que aprendi e me surgiu essa dúvida referente às pastas do sistema, devo separar front e back? Exemplo:

PROJETO (raiz)
├── backend/                # Diretório do servidor (Node.js)
│   ├── config/             
│   │   └── database.js
│   │   └── server.js
│   ├── routes/ 
│   │   └── userRoutes.js
│   ├── packages.json      #Com os pacotes e dependencias do back
├── frontend/               # Diretório do cliente (React)
│   ├── public/             
│   ├── src/                
│   │   ├── assets/         
│   │   ├── components/     
│   │   │   └── Header.js
│   │   │   └── Footer.js
│   │   ├── pages/          # Páginas principais da aplicação
│   │   │   └── HomePage.js
│   │   │   └── LoginPage.js
│   ├── packages.json      #Com os pacotes e dependências do front

Na minha cabeça fica bem organizado dessa forma (eu saberia onde achar cada coisa), porém qual o "padrão" do mercado? Deveria criar o react-app e dentro dessas pastas geradas, criar um backend e lá colocar a lógica? É correto ter um package.json separado para eles?

Desculpa se a pergunta ficou longa ou complicada, agradeço a ajuda!

1 resposta

Oii, Jhonattan!

Fico feliz em saber que você tá gostando do curso e colocando em prática o que aprendeu. A organização de pastas em projetos full stack é uma questão importante e vai variar de acordo com as preferências da equipe ou da pessoa desenvolvedora.

Mas separar o front-end e o back-end em pastas diferentes é uma abordagem comum nas empresas, pois facilita a manutenção, a escalabilidade e a clareza do projeto.

Quando front e back estão separados, eles se comunicam via APIs.

  • O back-end expõe endpoints HTTP, como /api/users, para fornecer ou receber dados.
  • O front-end faz requisições para esses endpoints usando métodos como GET (buscar dados) ou POST (enviar dados).
  • A comunicação acontece via URLs, e, se estão em servidores diferentes (ex.: localhost:3000 para o front e localhost:5000 para o back), é necessário configurar CORS no back-end.

Se for um projeto pequeno ou apenas para aprendizado, a organização que você criou é ótima.

Um abraço e bons estudos.