TG-I flask-react-app

In every application there is a control of employees and categories involved in the process.

In this project an API was developed that allows querying, creating and editing this information, about employee and category.

Libraries and Tools

Backend

• 🐍 Python
• 🧪 Flask
• 🧪 Flask-Cors
• ⚗️ SQLAlchemy (Object Relational Mapper - ORM)
• 🚧 Pytest (for testing)

Frontend

• ⚛️ React
• 🛣️ React Router
• 💅 Material UI
• 🛜 Axios
• ⚡️ Vite
• ⚒️ ESLint
• ✨ Prettier

Project Organization

Backend

The API was designed using the Model-View-Controller (MVC) pattern:

View (Directory that contains the classes for the project activities)

• They have the entity name and the suffix 'View'
• CategoryView and EmployeeView

Controller (Action methods)

• They have no prefixes or suffixes
• Category and Employee

Model (The logical structure of a database)

• There is only one database file that is responsible for managing the database of both entities
• DataBase

Frontend

Routes

To list, the pattern used was the name of the category with the first capital letter and the suffix "List", CategoryList.

To create and update, the pattern used was the name of the category with the first capital letter and the suffix "Form", CategoryForm.

The Home screen has a path to the functionalities of the Category and Employee entities, in the Home component.

Types

• There is only one type file that that contains the types of the entities.
• types

Project Setup

Backend

First, create a virtual env to host the project dependencies. Install the necessary dependencies with the following commands:

Linux:

cd Backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

Windows:

cd Backend
python3 -m venv .venv
env\Scripts\activate.bat
pip install -r requirements.txt

Then, initialize the API server:

python main.py

To run the tests:

pytest -v

Note

You must first create the database. The database information is at the end of the file.

Frontend

Previously, nodejs has to be installed. Then, install the necessary dependencies with the following commands:

cd Frontend
npm install

Then, initialize the dev server:

npm run dev

MariaDB Configuration with Docker Compose

Start the container with:

bash

MARIADB_ROOT_PASSWORD="your_password" docker compose up

Note

You can start and daemonize it immediately by passing the -d flag. In this case, you will need to stop the container using Docker Desktop or docker stop {container}.

To create the database, you need to execute an SQL script. You can use tools like DBeaver or any other SQL IDE for this purpose. Simply connect to your MariaDB instance and run the provided SQL script to set up the database schema. You can find the Script in SQLScript.

Navigate the project

• Backend
• Frontend
• Tests
• DataBase