{"id":15142608,"url":"https://github.com/danieldacosta/workflow-management-webapp","last_synced_at":"2026-01-28T19:36:29.927Z","repository":{"id":256676476,"uuid":"856100394","full_name":"DanielDaCosta/workflow-management-webapp","owner":"DanielDaCosta","description":"Workflow management application using React with TypeScript, FastAPI, and LangChain.","archived":false,"fork":false,"pushed_at":"2024-11-17T00:47:03.000Z","size":1132,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-12T21:49:27.836Z","etag":null,"topics":["fastapi","langchain","react","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/DanielDaCosta.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-09-12T01:47:27.000Z","updated_at":"2024-11-17T00:47:06.000Z","dependencies_parsed_at":"2024-09-12T11:41:23.210Z","dependency_job_id":"8b461631-9711-4cb5-a09e-15658e3f3f2f","html_url":"https://github.com/DanielDaCosta/workflow-management-webapp","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"ec9e8960f6c1ca457cea04bddc807d0d35f108d6"},"previous_names":["danieldacosta/workflow-management-webapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielDaCosta%2Fworkflow-management-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielDaCosta%2Fworkflow-management-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielDaCosta%2Fworkflow-management-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielDaCosta%2Fworkflow-management-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanielDaCosta","download_url":"https://codeload.github.com/DanielDaCosta/workflow-management-webapp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509164,"owners_count":20950233,"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":["fastapi","langchain","react","typescript"],"created_at":"2024-09-26T09:43:06.426Z","updated_at":"2026-01-28T19:36:29.886Z","avatar_url":"https://github.com/DanielDaCosta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Workflow Management Web Application\n\nThe objective of this project is to develop a comprehensive workflow management application using React with TypeScript, FastAPI, and LangChain.\n\n# Table of Contents\n\n- [Assumptions](#assumptions)\n- [Installation \u0026 Usage](#installation--usage)\n  - [Backend](#backend)\n  - [Frontend](#frontend)\n- [Explanation](#explanation)\n  - [Frontend](#frontend-1)\n  - [Backend](#backend-1)\n    - [FastAPI](#fastapi)\n    - [AI Integration](#ai-integration)\n- [Improvements](#improvements)\n- [Screenshots](#screenshots)\n\n# Assumptions\n- URLs provided by the user are valid.\n- The main source of information from the URL is text. For example, YouTube videos and images are not considered sources of information (this is further addressed in the Improvements section).\n- No edits are needed after the creation of a workflow.\n\n# Installation \u0026 Usage\n\n## Backend\n\n**Python v3.10.11**\n\nThe following commands creates a pyenv with the packages and runs the backend.\n```bash\ncd backend\nchmod +x start_backend.sh\nbash start_backend.sh\n```\n\nIf you already have your own pyenv with the packages, you can just run:\n\n```bash\ncd backend/app\nuvicorn main:app --reload\n```\n\n\n## Frontend\n\n**npm 10.8.1**\n\nThe following commands install the packages and runs the frontend.\n```bash\ncd frontend\nchmod +x start_frontend.sh\nbash start_frontend.sh\n```\n\nIf you just want to run the frontend:\n```bash\ncd frontend\nnpm start\n```\n\n\n# Explanation\n\n## Frontend\n\nThe frontend of the application is built with React and TypeScript. It features several components designed to manage workflows through various actions such as creation, execution, and deletion. The following TypeScript type defines each workflow:\n\n```typescript\ntype Workflow = {\n    url: string;\n    title: string;\n    id: string;\n    body: string;\n};\n```\nBelow is a description of each component:\n\n- **Create.tsx**: Responsible for creating a new workflow. It interacts with the backend via the `POST /workflow` endpoint.\n\n- **RunWorkflow.tsx**: Manages the execution of a created workflow and displays the output to the user. It communicates with the backend through the `POST /workflows/{id}/execute` endpoint.\n\n- **WorkflowDetails.tsx**: Allows the user to select and view detailed information about a specific workflow. It fetches data from the `GET /workflows/{id}` endpoint and provides functionality to delete the workflow via the `DELETE /workflows/{id}` endpoint.\n\n- **WorkflowList.tsx**: Lists all existing workflows by querying the `GET /workflows` endpoint.\n\n- **Home.tsx**: Combines all other components to create the main view of the application.\n\n- **Navbar.tsx**: Provides navigation between different pages of the application.\n\nIn addition to these components, I also included a reaction button on each workflow card to allow users to \"like\" a workflow. For managing this feature, I used Redux for state management.\n\n\n## Backend\n\nFor the database, I use Firebase to create a collection for storing all data due to its speed, affordability, scalability, and user-friendly NoSQL architecture. Firebase’s self-hosted nature makes it convenient for sharing; interviewers can easily access and utilize the data without additional setup, streamlining the demonstration process.\n\n### FastAPI\nSince the backend utilizes third-party tools like Firebase and OpenAI, all credentials are stored in a `.env` file for easy management. (**Note**: *For the purpose of the interview, I am temporarily including my private keys for code review and testing. These keys will be removed immediately after the interview process is completed to ensure security.*)\n\nAll the endpoints can be found on file `router.py`, containing each endpoint \n\n**Get Workflow by ID**\n- **Endpoint**: `GET /workflows/{id}`\n- **Description**: Retrieves a specific workflow document from Firestore using the provided `id`. Returns the workflow's details if the document exists.\n\n**Get All Workflows**\n- **Endpoint**: `GET /workflows`\n- **Description**: Fetches a list of all workflow documents from Firestore. Returns a list of workflows with their details.\n\n**Create Workflow**\n- **Endpoint**: `POST /workflows`\n- **Description**: Creates a new workflow document in Firestore using the provided workflow data. Returns a success message upon creation.\n\n**Delete Workflow by ID**\n- **Endpoint**: `DELETE /workflow/{id}`\n- **Description**: Deletes a specific workflow document from Firestore using the provided `id`. Returns a success message upon deletion.\n\n**Execute Workflow**\n- **Endpoint**: `POST /workflow/{id}/execute`\n- **Description**: Executes a workflow by fetching its details from Firestore using the provided `id`. Uses the `RAGPipeline` to process a prompt with the workflow's associated URL. Returns the result of the execution.\n\n### AI Integration\n\nFor the AI pipeline, I chose OpenAI's GPT-4o model due to its high performance and cost-effectiveness, combined with LangChain for enhanced functionality. Each document is processed in chunks and stored in the Chroma vector database, enabling efficient search based on user prompts.\n\nTo ensure modularity and ease of use, I implemented the solution using object-oriented programming. The core class, `RAGPipeline`, manages the loading, chunking, and searching of data. This approach allows for flexible modifications to components like `DocumentLoader`, `TextSplitter`, and `VectorStore` without affecting the overall system.\n\nBy structuring the code in this manner, we achieve a clean and maintainable architecture that supports easy updates and extensions.\n\nYou can also find a folder `notebooks` which was used for testing.\n\n\n# Improvements\n\nJust like any software code, there is always room for improvement. Due to time constraints, several potential enhancements could be made:\n\n- **URL Validation**: Currently, the system assumes that users will provide valid URLs. An improvement would be to implement URL validation to ensure correctness. Additionally, the project could be expanded to handle more diverse input types, such as YouTube transcripts. For example, users could upload a YouTube link, and the AI could extract the transcript and provide responses based on this context.\n\n- **Data Preprocessing**: Another important improvement would be to chunk and store the data beforehand, rather than performing these operations only during the 'Run' execution of the workflow. This change could enhance performance significantly. However, since the current process takes approximately 3 seconds to chunk and return data via the LLM, this approach was deemed acceptable for this assignment.\n\n- **Data Loading and Filtering**: I used LangChain's `WebBaseLoader` for loading data, which works well for many websites. However, it may return excessive or irrelevant text (e.g., image captions, footnotes) when dealing with complex websites that contain numerous HTML tags and images. An improvement would be to filter the text to include only specific tags, such as `\u003cp\u003e` tags. This approach would need to be tested to ensure it works across a variety of websites and minimizes the inclusion of unnecessary content.\n\n# Screenshots\n\n### Run Workflow\n![Run Workflow 1](images/Run-Workflow-1.png)\n![Run Workflow 2](images/Run-Workflow-2.png)\n![Run Workflow 3](images/Run-Workflow-3.png)\n\n### Home\n![Home Workflows](images/Home-Workflows.png)\n\n### Create Workflow\n![Create Workflow](images/Create-Workflows.png)\n\n### Workflow Details\n![Workflow Details](images/Details-Workflow.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldacosta%2Fworkflow-management-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanieldacosta%2Fworkflow-management-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanieldacosta%2Fworkflow-management-webapp/lists"}