https://github.com/amanimagdi/data-flux-fullstack

This repository is for a full stack application provides in-depth analysis and manipulation of various data types (tabular data, RGB images and textual data), Flask on BE and ReactJs on FE.
https://github.com/amanimagdi/data-flux-fullstack

flask javascript numpy pandas python reactjs tailwindcss

Last synced: about 1 month ago
JSON representation

This repository is for a full stack application provides in-depth analysis and manipulation of various data types (tabular data, RGB images and textual data), Flask on BE and ReactJs on FE.

• Host: GitHub
• URL: https://github.com/amanimagdi/data-flux-fullstack
• Owner: amaniMagdi
• Created: 2024-07-25T07:30:21.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-29T09:11:23.000Z (over 1 year ago)
• Last Synced: 2025-01-22T14:43:21.644Z (about 1 year ago)
• Topics: flask, javascript, numpy, pandas, python, reactjs, tailwindcss
• Language: Python
• Homepage:
• Size: 10.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Data Flux

## Overview

The application's goal is to provide in-depth analysis and manipulation of various data types (Tabular data, RGB images), 

bolstered by an engaging reactjs front-end showcasing rich animations and visualizations, alongside a complex back-end developed with Python and Flask.

This project consists of a frontend and a backend:

## Backend  (data_flux)

The backend directory contains the server-side code and related files for the application. Below is an overview of its structure and purpose:

### Directory Structure

-   **`app/`**: This directory contains the core application code.

    

    -   **`routes/`**: Defines the routes and endpoints for the application. This is where you set up the HTTP request handling logic.

    -   **`services/`**: Contains service layer code responsible for business logic and data processing.

    -   **`static/`**: Holds static files such as images used by the application.

	   -   **`config.py`**: Configuration file for application settings, including environment-specific settings and secrets.

	  -   **`extensions.py`**: Contains setup code for third-party extensions and libraries used by the application.

    

	-   **`models.py`**: Defines the data models and schema for the application’s database. This file includes ORM (Object-Relational Mapping) definitions for database tables.

    

	-   **`__init__.py`**: Initializes the `app` package and sets up the application. This file typically contains the app setup and configuration code.

    

-   **`requirements.txt`**: A file listing all the Python dependencies required for the backend application. Use this file to install dependencies using `pip install -r requirements.txt`.

    

-   **`run.py`**: The main entry point for running the application. This script typically initializes the application and starts the server.

- **`projectenv/`**: This directory is used for the virtual environment where dependencies are installed. It is typically managed by `venv`.

## Frontend (data_flux_fe)

The frontend directory contains the client-side code for the application. Below is an overview of its structure and purpose:

### Directory Structure

-   **`node_modules/`**: Contains all the dependencies for the frontend project managed by npm.

    

-   **`public/`**: Holds static assets such as the `index.html` file and any other public resources.

    

-   **`src/`**: Contains the source code for the frontend application, including components, styles, and configuration files.

    

-   **`package-lock.json`**: Locks the versions of the npm packages to ensure consistent installs.

    

-   **`package.json`**: Lists the npm dependencies and scripts for managing the frontend application.

    

-   **`postcss.config.js`**: Configuration file for PostCSS, a tool for transforming CSS with JavaScript plugins.

      

-   **`tailwind.config.js`**: Configuration file for Tailwind CSS, a utility-first CSS framework.

## Video Tutorial

https://github.com/user-attachments/assets/0df487ca-cc53-448c-805f-3bcdb813cf29

## Future Enhancements

### Backend

To improve the organization, maintainability, and testability of our codebase, we plan to implement the following changes:

-   **Separate Routes and Services**: We will refactor the code to separate routes from services. Routes will handle the HTTP request and response cycle, while services will contain the business logic and interact with the data layer. This separation will make our codebase more organized and easier to manage.

-   **Handle Textual Data**: Future updates will include the capability to handle textual data effectively, allowing for better data processing and management.

-   **Utilize Docker for application containerization with Kubernetes**: for deployment and scaling, ensuring the application's resilience and maintainability.

### Frontend

To enhance the user experience and improve the application's responsiveness and interactivity, we plan to:

-   **Enhance Responsive Design**: Further optimize the design for mobile devices, including making the sidebar responsive for mobile view to ensure a seamless experience for users accessing the application on smaller screens.

-   **Apply Animations**: Add animations for transitions between different application states, button clicks, data loading phases, and user interactions. This will improve visual feedback and enhance the overall user experience.

-   **Add Global Interceptor for Error Handling**: Implement a global interceptor to manage 500 error codes and provide a more user-friendly experience in case of server errors.

-   **Handle Image Cropping and Resize**: as this logic has been developed from backend but still not implemented from frontend side.

## Contributing

Feel free to contribute to this project by opening issues or submitting pull requests.