{"id":18301811,"url":"https://github.com/guicamargo19/fullstack_rest_api_react","last_synced_at":"2026-04-03T23:35:02.464Z","repository":{"id":237344934,"uuid":"794344128","full_name":"guicamargo19/fullstack_rest_api_react","owner":"guicamargo19","description":"Integração Front/Back-end com PostgreSQL e Docker","archived":false,"fork":false,"pushed_at":"2024-05-31T15:57:48.000Z","size":880,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T04:18:57.237Z","etag":null,"topics":["css","django","django-rest-framework","docker","docker-compose","eslint","html","javascript","postgresql","prettier","python","react-query","reactjs","rest-api","styled-components","vscode"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guicamargo19.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-01T00:06:27.000Z","updated_at":"2024-05-31T16:04:25.000Z","dependencies_parsed_at":"2024-05-06T14:48:56.559Z","dependency_job_id":"a563284d-3281-48c7-bcb0-85bf88c7c2f8","html_url":"https://github.com/guicamargo19/fullstack_rest_api_react","commit_stats":null,"previous_names":["guicamargo19/bnex_desafio-tecnico","guicamargo19/bnex-desafio-tecnico","guicamargo19/fullstack_rest_api","guicamargo19/fullstack_rest_api_react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guicamargo19%2Ffullstack_rest_api_react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guicamargo19%2Ffullstack_rest_api_react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guicamargo19%2Ffullstack_rest_api_react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guicamargo19%2Ffullstack_rest_api_react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guicamargo19","download_url":"https://codeload.github.com/guicamargo19/fullstack_rest_api_react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248017979,"owners_count":21034042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","django","django-rest-framework","docker","docker-compose","eslint","html","javascript","postgresql","prettier","python","react-query","reactjs","rest-api","styled-components","vscode"],"created_at":"2024-11-05T15:17:01.549Z","updated_at":"2025-12-30T19:05:16.857Z","avatar_url":"https://github.com/guicamargo19.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REST API Operações CRUD com ReactJS\n\nhttps://github.com/guicamargo19/fullstack_rest_api_react/assets/133445061/40622e4d-b4b1-4e10-b263-b2e0a1d7adf9\n\nO projeto viabiliza a criação de um elemento Produto, com a integral preservação de todos os seus dados. Através de uma\ninterface Front-end simples, minimalista e intuitiva, construída com **ReactJS**, são executáveis operações CRUD (Create, Read, Update, Delete).\n\nO Back-end, elaborado em **Django** com **Python**, incorpora a REST API mediante o **Django Rest Framework**, e o armazenamento de dados\né efetuado utilizando o **PostgreSQL**.\n\n- Projeto desenvolvido para desafio técnico em processo seletivo.\n\n## Sumário\n\n- [Instalação](#instalacao)\n- [Rodando o projeto](#rodando-o-projeto)\n- [Contribuindo](#configuracao-desenvolvimento)\n- [Ferramentas utilizadas](#ferramentas)\n- [Sobre](#sobre)\n    - [Back-end](#backend)\n    - [Front-end](#frontend)\n    - [Banco de dados](#banco-de-dados)\n    - [Docker](#docker)\n\n\n\u003cdiv id=\"instalacao\"\u003e\n\n## Instalação\n\nSiga estes passos para instalar e configurar o ambiente necessário para rodar o projeto em sua máquina local.\n\n### Pré-requisitos\n\nAntes de iniciar, você precisará ter instalado em sua máquina as seguintes ferramentas:\n\n- [Git](https://git-scm.com)\n- [Docker](https://docker.com/)\n- [Docker Compose](https://docs.docker.com/compose/install/)\n- **Node.js**\n- **npm (geralmente vem com o Node.js)**\n\nProjeto Front-end foi inicializado com [Create React App](https://github.com/facebook/create-react-app).\n\n### Clonando o Repositório\n\nSiga as etapas a seguir para configurar o ambiente de desenvolvimento:\n\n- Clone este repositório em sua máquina local.\n```bash\nhttps://github.com/guicamargo19/fullstack_rest_api_react.git\n```\n\u003c/div\u003e\n\u003cdiv id=\"rodando-o-projeto\"\u003e\n\n## Rodando o projeto no Docker\n\n1. Acesse a pasta back-end e crie o arquivo \".env\" a partir do \".env-example\".\n```shell\ncd back-end\n```\n2. Acesse a pasta back-end na raiz e execute o comando a seguir e certifique-se de que o Docker Desktop está aberto.\n```shell\ncd back-end\ndocker-compose up --build\n```\n\u003c/div\u003e\n\u003cdiv id=\"configuracao-desenvolvimento\"\u003e\n\n## Contribuindo\n\n1. Navegue até o diretório clonado\n```shell\ncd fullstack_rest_api_react\n```\n2. Crie e ative o ambiente virtual,(comandos podem variar entre Windows, Linux e Mac.)\n```shell\npython -m venv venv\nsource venv/bin/activate\n```\nApós a ativação do ambiente virtual, selecione o interpretador correto para ele, digitando na barra superior \nde pesquisa do VSCode: **\u003ePython Select Interpreter**\n\n3. Acesse a pasta back-end\n```bash\ncd back-end\n```\n4. Execute o seguinte comando para instalar as dependências:\n```shell\npip install -r requirements.txt\n```\n5. Acesse a pasta front-end e execute o seguinte comando para instalar as dependências:\n```shell\ncd front-end\nnpm install\n```\n\n## Dotenv file (.env)\n\nNo diretório back-end é possível encontrar o arquivo \".env_example\", sendo que,\na partir dele, deve-se criar o arquivo \".env\" que deve ser preenchido com variáveis de ambiente\ncom configurações necessárias para o banco de dados PostgreSQL. Certifique-se de criar este\narquivo no mesmo local do exemplo.\n\n## Nodemon\n\nO nodemon é uma ferramenta de desenvolvimento para aplicativos Node.js que monitora mudanças nos arquivos\ndo seu projeto e automaticamente reinicia o servidor quando detecta uma alteração. Eliminando assim a\nnecessidade de manualmente parar e reiniciar o servidor a cada vez que você faz uma modificação no código.\n\n- Instalação\n```shell\nnpm install --save-dev nodemon\n```\n- Adicionar ao Dockerfile do Front-end:\n```shell\nRUN npm install -g nodemon\n```\n- Adicionar \"volumes\" no docker-compose.yml na infraestrutura front-end-server:\n```shell\nvolumes:\n  - ../front-end:/app   # Diretório atual montado em /app no contêiner\n```\n- Adicionar em scripts no arquivo package.json o seguinte comando:\n```shell\n\"scripts\": {\n    \"start\": \"nodemon --exec react-scripts start\", } \n```\n## Testes\n\nForam implementados testes para verificar a integridade do Model, das Views e do\nSerializer neste projeto. Também foi utilizado DRF (APITestCase) para simplificar e criar testes \npara verificar se as operações CRUD estão funcionando como esperado.\n\nExecutando os testes dentro do Docker:\n```shell\ndocker-compose run --rm back-end-server python manage.py test\n```\n\n\u003c/div\u003e\n\u003cdiv id=\"ferramentas\"\u003e\n\n## 🛠️ Ferramentas utilizadas para construção do projeto\n\n* **Python** - Linguagem de programação de alto nível, interpretada de script, imperativa, orientada a objetos, funcional, de tipagem dinâmica e forte.\n* **Django** - Framework para desenvolvimento rápido para web, escrito em Python, que utiliza o padrão model-template-view.\n* **Django Rest Framework** - Biblioteca que permite a construção de APIs REST utilizando a estrutura do Django.\n* **ReactJS** - Biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.\n* **JavaScript** - Linguagem de programação interpretada estruturada de alto nível com tipagem dinâmica fraca e multiparadigma.\n* **Styled Components** - Uma biblioteca que nos permite escrever CSS em JavaScript enquanto construímos componentes customizados em ReactJS.\n* **HTML** - Linguagem de marcação utilizada na construção de páginas na Web.\n* **CSS** - Cascading Style Sheets é um mecanismo para adicionar estilos a uma página web.\n* **ESLint** - Linter, uma ferramenta de análise estática, para as linguagens Javascript e Typescript, sendo o mais popular do mundo para tais linguagens.\n* **Prettier** - Ferramenta para formatação de código, necessitando de configurações para que funcione no VSCode.\n* **PostgreSQL** - Um sistema gerenciador de banco de dados objeto relacional, desenvolvido como projeto de código aberto.\n* **Docker** - Conjunto de produtos de PaaS que usam virtualização de nível de sistema operacional para entregar software em pacotes chamados contêineres.\n* **NPM** - Gerenciador de pacotes padrão para o ambiente de tempo de execução JavaScript Node.JS.\n\n\u003c/div\u003e\n\u003cdiv id=\"sobre\"\u003e\n\n## Sobre\n\u003cdiv id=\"backend\"\u003e\n\n## 1. Back-End (Django com Python)\n\nBack-end desenvolvido em **Django** com **Python** e construção da Rest API com **DRF (Django Rest Framework)**, \nque mantém os dados da Entidade “Produto”. Ele provém toda a manutenção (CRUD) dessa entidade. \n\nO modelo da entidade produto possui três campos (nome, descrição e valor), sendo o nome um campo\ndo tipo CharField, o campo descrição do tipo TextField e o valor sendo um campo tipo DecimalField.\n\nProjeto está na pasta \"back-end\", onde dentro dela encontra-se o app Products, assim como a pasta backend onde\nse localizam os arquivos como settings.py e wsgi.py. No App Products é onde estão localizados o Model, as Views\nutilizando CBV (Class Based Views), os Serializers e os Testes.\n\nO Back-End é hospedado na porta 8000: [http://localhost:8000/api/products](http://localhost:8000/api/products)\n\n## API\n\nA interface JavaScript utilizada para para lidar com requisições e respostas HTTP é a Fetch API. Ela\nfornece uma maneira mais poderosa e flexível de dazer solicitações de rede. Alguns pontos fortes são a\nsimplicidade, as funções retornam promessas, o que permite o uso do métodos \".then()\" e \".catch()\" para lidar\ncom as respostas de forma assíncrona, suporte a CORS, permitindo que façamos solicitações de diferentes domínios e etc.\n\n## API Endpoint: Listar produtos\n  **GET /api/produtos**\n\nRetorna uma lista de todos os produtos.\n\n#### Resposta\n```\nHTTP 200 OK\nContent-Type: application/json\n\n[\n  {\n    \"id\": 1,\n    \"name\": \"Amigurumi - Triceratops\",\n    \"description\": \"Dinossauro\",\n    \"value\": \"200.00\"\n  },\n  {\n    \"id\": 2,\n    \"name\": \"Camiseta\",\n    \"description\": \"Rosa\",\n    \"value\": \"400.00\"\n  }\n]\n```\n-------------------------------------\n## API Endpoint: Criar produto\n\n**POST /api/produtos/**\n\nCria um produto\n\n#### Resposta\n```\nHTTP 201 OK\nContent-Type: application/json\n```\n-------------------------------------\n## API Endpoint: Atualiza produto\n\n**PATCH /api/produtos/${productID}**\n\nAtualiza o produto solicitado\n\n#### Resposta\n```\nHTTP 200 OK\nContent-Type: application/json\n```\n-------------------------------------\n## API Endpoint: Deletar produto\n\n**DELETE /api/produtos/${productID}**\n\nApaga o produto solicitado\n\n#### Resposta\n```\nHTTP 204 OK\nContent-Type: application/json\n```\n-------------------------------------\n## API Endpoint: Deletar todos os produtos\n\n**DETELE /api/produtos/**\n\nApaga todos os produtos\n\n#### Resposta\n```\nHTTP 204 OK\nContent-Type: application/json\n```\n\n\u003cdiv id=\"frontend\"\u003e\n\n## 2. Front-End (ReactJS com JavaScript)\n\nO projeto Front-end, assim como o Back-end, está localizado na pasta \"front-end\" na raiz do diretório. Desenvolvido com **ReactJS**\nutilizando **JavaScript**, o Front-end adota a estilização através de Styled Components (CSS-in-JS). Sua estrutura é caracterizada \npela simplicidade, composta por componentes que interagem entre si de forma coesa. Destacam-se elementos como o formulário de criação\ne atualização de produtos, o componente de listagem e os botões de remoção e atualização.\n\nO gerenciamento do estado dos componentes é realizado utilizando o **useState**, proporcionando a capacidade de criar e atualizar\no estado de um componente funcional de maneira eficiente.\n\nA integração com o Back-End é viabilizada por meio de requisições à API, gerenciadas de forma assíncrona através do **React Query**.\nEssa abordagem contribui para a melhoria e simplificação da aplicação React, enquanto o **useMutation** auxilia no tratamento das mutações\ndo lado do servidor, como as requisições HTTP.\n\nO Front-End é hospedado na porta 3000: [http://localhost:3000](http://localhost:3000)\n\n\u003c/div\u003e\n\u003cdiv id=\"banco-de-dados\"\u003e\n\n## 3. Banco de Dados (PostgreSQL)\n\nO banco de dados **PostgreSQL** é estruturado de forma simples, composto apenas por uma tabela, a qual abriga os dados dos produtos.\n\nApós a definição dos modelos no Django, é imperativo criar as migrações correspondentes para aplicar as alterações no banco de dados.\nIsso é realizado através do comando **\"python manage.py makemigrations\"**.\n\nUma vez que as migrações tenham sido criadas, é necessário aplicá-las utilizando o comando **\"python manage.py migrate\"**.\nEsta operação executa todas as migrações pendentes e atualiza o esquema do banco de dados de acordo com as definições do modelo.\n\nO DB-Server é hospedado na porta padrão 5432 do PostgreSQL.\n\n\u003c/div\u003e\n\u003cdiv id=\"docker\"\u003e\n\n## 4. Docker e Docker Compose\n\nO arquivo \"docker-compose.yml\" é responsável por definir três serviços distintos: 'db-server', 'back-end-server' e 'front-end-server',\ncada um com suas próprias configurações e dependências.\n\n- Utiliza-se a imagem 'postgres:latest' disponível no Docker Hub, que é uma imagem pré-configurada do PostgreSQL.\n- O ambiente é configurado com os dados necessários, como o nome do banco de dados, usuário e senha, os quais foram previamente especificados no arquivo \".env\".\n- A seção \"volumes\" mapeia um diretório de dados do PostgreSQL, garantindo a persistência dos dados entre reinicializações do contêiner.\n- Na seção \"network\", são definidas duas redes: 'back-end-server-network' e 'front-end-server-network'. Estas redes são utilizadas para separar a\ncomunicação entre os serviços, simplificando a interação entre os contêineres.\n\nNo que concerne ao 'back-end-server', foi especificado o \nseguinte comando para aguardar a inicialização do banco de dados antes de realizar as migrações e iniciar o servidor:\n````\nsh -c \"until pg_isready -h db-server -U backend_user; do\n              echo waiting for database;\n              sleep 2;\n             done;\n             python manage.py makemigrations --noinput \u0026\u0026\n             python manage.py migrate --noinput \u0026\u0026\n             python manage.py runserver 0.0.0.0:8000\"\n````\n\u003c/div\u003e\n\u003c/div\u003e\n\n## ✒️ Autor\n\nGuilherme Ferreira Camargo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguicamargo19%2Ffullstack_rest_api_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguicamargo19%2Ffullstack_rest_api_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguicamargo19%2Ffullstack_rest_api_react/lists"}