Process App is an automation application for managing processes and tasks for a large number of people. It is built using:
It utilizes 
The Process app allows users to manage processes consisting of different blocks of activity. Users can view a list of processes, click on a process to view its details, and interact with various blocks associated with the process. These blocks can include starting a process, completing a form, having a conversation, and receiving system notifications.
The app is divided into two main parts: ADMIN and USER.
The Process app utilizes the following additional dependencies:
Firebase is a comprehensive suite of cloud-based tools provided by Google for building web and mobile applications. It offers features such as authentication, real-time database, cloud storage, and more.
Crypto-Random-String is a JavaScript library that provides a simple way to generate cryptographically strong random strings. It is often used for generating unique identifiers or secure tokens.
Vuefire is an official Firebase integration for Vue.js. It enables seamless binding between Vue components and Firebase real-time database, making it easier to synchronize and manage data.
Vuex is a state management pattern and library for Vue.js applications. It provides a centralized store for managing the state of the application, allowing efficient data sharing and synchronization between components.
Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined utility classes. It allows developers to rapidly build custom user interfaces by composing utility classes, resulting in efficient and flexible styles.
To get started with the Process app locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your/repository.git
-
Install the dependencies:
npm install
-
Set up Firebase and configure your app.
-
Run the development server:
npm run dev
Alternatively, if you need to specify a host:
npm run dev -- --host
Open your web browser and visit localhost to see the Process App in action.
Log in as admin using a pre-made admin email and password.
The initial form of the application where the administrator (professor) creates a new process. The left column displays all the processes.
When creating a process, the administrator provides a name and details for the process and adds tasks to it. The interface consists of two panels:
- Console Panel (black color): Displays basic blocks available for the administrator.
- Window Panel: Adjusts based on the selected block from the console.
The administrator is shown four blocks on the console:
- View Process
- Create Tasks
- Conversation Session
- Event Log
After entering the process name and details, the administrator needs to add tasks to the process.
The name of the newly created process is updated in the left column.
Tasks are added and created by selecting the "Tasks" block on the console. This opens an additional "Tasks" column next to the console, displaying all tasks and an "Add New Task" button.
The "Tasks" block contains two categories:
- Edit Task
- Task Users
When creating a new task, the administrator provides its name, details, and can add fields for filling using the "Add Fields" button. The right column provides options for editing the fields.
The name and details of the task are filled. The name of the newly created task is updated in the "Tasks" column.
Fields can be added to the task using the "Add Field" button. The right column provides options for editing the field properties. Possible field types include Text Field, Number Field, File Field, Dropdown Field, Boolean Field, Blob Field, etc.
More fields can be added to the task. Once the task is completed, it can be saved or deleted. The "Next Task" option determines the following task in the process. It can be set as automatic (the task below it) or as a specific task, switch, if-else, or subprocess.
Additional tasks can be added to the process, and they will be displayed in the "Tasks" column.
Privileges for the task can be set in the "Task Users" category. The administrator can define task visibility, edit permissions, and completion permissions for different roles (e.g., PROFESSOR and STUDENT).
After the tasks have been added, we return to the "Process" block. Here, we can see tasks in progress with associated numbers indicating their status:
: Tasks started by users
: Tasks in progress
: Tasks finished by users
Tasks initially don't have numbers, but they receive numbers when users start the process and begin solving the tasks. Selecting a task displays additional statistics at the bottom, including:
- Tasks started: Number of users who started the task and the start date
- Tasks in progress: Number of users currently working on the task and the duration of the solution
- Tasks finished: Number of users who completed the task and the completion date
You can click on each user to view their process and progress.
In the "Process Diagram" category, the process flow and its tasks are graphically displayed.
In the "Process Analytics" category, the progress of the process and all its users is shown, both overall and for each task individually. It opens with an additional column next to the console where the Process Overview and Tasks are displayed.
By selecting a task, the statistics for that task are displayed, including:
- Tasks started: Number of users who started the task and the start date
- Tasks in progress: Number of users currently working on the task and the duration of the solution
- Tasks finished: Number of users who completed the task and the completion date
The "Process Users" category allows you to set privileges for the process:
- Process visibility: Who can see the process
- Process edit: Who can edit the process
- Process completion: Who can solve the process
Users in the process are labeled as "PROFESSOR" or "STUDENT" for easier sorting. The professor can invite other users to join the process, and a label can be added to each user for easier sorting. The "Automatic new user tag" feature automatically tags new users when they join.
The "Conversation Session" block contains all conversations related to the process. It opens with an additional column called "Sessions" next to the console, displaying all conversations and the "Add new session" button for adding new conversations.
The "Conversation Session" block has two categories:
- Edit Session
- View Session
When creating a new conversation, you can provide its name and details and set chat privileges, including session visibility (who can see the conversation) and session edit (who can edit the conversation). All users in the conversation are displayed, and additional users can be invited.
The "View Session" category provides a classic chat view similar to Slack or Discord.
The "Event Log" block contains all events related to the process. It opens with an additional column called "Log Event" next to the console, displaying all events.
The "Event Log" block has two categories:
- View Event
- Create Event
In "All Log Events," you can see the event details, including when the event occurred, who started it, and which event was triggered. The column on the right side is used for sorting events based on selection.
The "Process Events" category displays all events related specifically to the process, such as when the process is created, joining the process, and finishing the process.
The "Task Events" category displays all events related specifically to tasks, such as when a task is created, starting the task solution, and task completion.
The "Conversation Events" category shows all events related specifically to conversations, such as opening and closing a conversation.
Log in as user using a pre-made user emails and passwords.
A user (student) who joins a process sees two blocks in the console:
- My Process
- Conversation Session
The user can only see and interact with the processes they are assigned to. Pressing the "Start Process" button initiates their assigned process.
Once a user starts their process, a "Current Task" block is created, displaying the fields that need to be filled. The user can complete the task by filling in the fields and clicking the "Complete Task" button.
The process diagram is adapted to the user's assigned process automatically.
If you would like to contribute to Process App, feel free to open issues and submit pull requests. We welcome contributions from the community!
The Process App is released under the
