Projeto Flask e React

Introdução

Este projeto exemplifica a integração entre um backend Flask e um frontend React, mostrando como essas tecnologias podem ser combinadas para criar uma aplicação web moderna e dinâmica.

Tabela de Conteúdo 📋

1. Introdução 💡
2. Tecnologias Utilizadas 💻
3. Estrutura de Diretórios 📁
4. Observação 🔍
5. Configuração e Banco de Dados ⚙️
6. Execução ▶️
7. Funcionalidades 🚀
8. Contato 📧

Tecnologias Utilizadas

• Backend (Python) 🐍:

  • Flask: Um framework web leve e flexível para Python, adequado para construir APIs.
  • Flask-SQLAlchemy: Uma extensão do Flask que fornece suporte fácil para interação com bancos de dados SQL.
  • Flask-CORS: Uma extensão do Flask que lida com a política de mesma origem (CORS) para permitir solicitações entre diferentes origens de domínio.

• Frontend (React) 🌐:

  • Template: O projeto React foi criado usando o template vite com o modelo react, fornecendo um ambiente de desenvolvimento rápido e moderno.

Estrutura de Diretórios

Os arquivos estão dividos em responsabilidades principais:

|  Diretório  |  Funcionalidade  |
|-------------|------------------|
| backend     | Configurar API   |
| frontend    | Exibir dados     |

• backend:

  • config.py: Arquivo de configuração para o Flask, onde as variáveis de ambiente e outras configurações são definidas.
  • main.py: O arquivo principal do backend, onde a aplicação Flask é instanciada e configurada.
  • models.py: Contém as definições dos modelos de dados para interagir com o banco de dados.
  • instance/mydatabase.db: Banco de dados SQLite para armazenar os dados da aplicação.

• frontend:

  • node_modules: Pasta que contém os módulos do Node.js necessários para o projeto.
  • public: Contém os arquivos públicos, como ícones, imagens ou favicon.
  • src: O diretório fonte do projeto React, onde os componentes, estilos e outros recursos são definidos.

Observação

Observação: Bibliotecas Python

As bibliotecas Python necessárias para executar o projeto estão listadas no arquivo requirements.txt. Isso facilita a instalação das dependências e garante que o ambiente de desenvolvimento seja reproduzível.

Configuração e Banco de Dados

A configuração da aplicação Flask, incluindo a URI do banco de dados e outras configurações, é especificada no arquivo config.py. O banco de dados SQLite é utilizado para simplificar o desenvolvimento, permitindo que os dados sejam armazenados localmente no arquivo mydatabase.db.

# Exemplo de configuração do Flask e SQLAlchemy
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///mydatabase.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False

Execução

Para iniciar o servidor Flask, basta executar o arquivo main.py localizado na pasta backend. Isso iniciará o servidor backend e estará pronto para receber solicitações.

Para iniciar o servidor React, navegue até a pasta frontend e execute o comando npm run dev. Isso iniciará um servidor de desenvolvimento para o frontend React e abrirá automaticamente o navegador padrão com a aplicação em execução.

Funcionalidades

O projeto possui funcionalidades para criar, listar, atualizar e deletar contatos. Essas operações são realizadas através da API Flask, que interage com o banco de dados SQLite para persistência dos dados.

Contato

Para mais informações ou para entrar em contato com o mantenedor do projeto, você pode visitar os seguintes links:

Autor

_{Yago Cortez}