Pro-task

A react application built as part of the Human Computer Interaction (HCI) course of my master's degree. Pro-task is a time management React application with AI voice control features using TensorFlow.js.

Demo

A live version of the WebApp is deployed on Netlify : https://pro-task-sk.netlify.app

Table of contents

• Features
• Technologies
• A Guide to Installation and Use
• Known Bugs Fixes

Features

1. AI command control
   The application provides voice commands to control the stack of tasks by that is activated with the speak button(:point_right: ) and listens for the word DO followed by the command keyword:
   ❌ Zero ❌ : Delete the top task of the stack
   ✅ One ✅: change the status of the top task of the stack to complete/uncomplete
   📍 NOTE : the Voice recognition machine stops listening after 10 seconds of silence. The mic icon 🎤 indicate the status of mic whether it is on (🔊) or off (🔇)

2. Responsive
   The Web App has a responsive design and adapts to all devices screen sizes, tested for variety of screen sizes. It independent of the device operating system and screen size. Refer to images folder to view the application on different devices.

3. Filter
   Filter the stack of the tasks based on the status of each task: Status :

• Uncomplete
• Complete

5. Support All Languages
   The tasks can be written in any language.
6. Accessability Features
   The design is implemented in minimilist and modern theme with all types of users in mind (age, experience, cognitive skills, disabilities). All items have a descriptive alternative text and tested using the screen reader extension of chrome browser
7. Easy to login
   For easy access of the application and seemless experience, you can directly access your tasks and make changes that are associated to each user without the need for login.

Technologies

The REACT Application is created using the npx command npx create-react-app app-name. According to the official react documentation, it sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. To create a project, run:

npx create-react-app my-app
cd my-app
npm start

Libraries

library name	Version	Description
npm	9.5.1	The world's largest software registry, used here to download and run package
javascript	V8 11.3.244.11	The language used to create the webapp and control the application
React	18.2.0	JavaScript library for creating user- interface
React DOM	18.2.0	This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package
React Scripts	5.0.1	This package includes scripts and configuration used by Create React App.
react-hooks	1.0.1	REACT components to fire off actions in stateless components.
util	0.12.5	This implements the Node.js util module for environments that do not have it, like browsers
emotion/react, emotion/styled	0.12.5	The needed libraries to implement a simple styling in React.
tfjs	4.5.0	TFJS is a library that wraps and it easier to interact with the compiled version of TensorFlow.js
speech-commands	0.5.4	The Speech Command Recognizer is a JavaScript version from tensorflow that enables recognition of spoken commands. To develop ML models in JavaScript, and use ML directly in the browser or in Node.js
mui/icons-material	5.11.16	Provides the Google Material Icons converted to SvgIcon components
mui/material	5.13.0	Material UI is one of the popular React UI frameworks

Development Tools

Purpose	Tool/s
IDE
Speech Recognition Model
UI Framework	X
Design
Screen Reader	chrome extension

A Guide to Installation and Use

Directory Tree

pro-task
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── pro-task.png
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── index.css
    ├── index.js
    └── reportWebVitals.js
    └── components
    │   ├── BasicCard.js
    │   ├── Form.js
    └── └── TodoList.js
    

Run the Application

Step1: Start by loading the node modules according to the shown above directory tree.

npm install

Step2: Start running the application locally using npm

npm start 

Build the Application

npm run build

Known Bugs and Fixes

1. Dependecies and versions issues i.e. Module not found: Can't resolve 'fs' error
   Step 1: Set the browser.fs property to false in your package.json file.
   Step 2: Edit your webpack.config.js file.
   For more info Follow this tutorial from Borislav Hadzhiev's blog
   
2. Loading node modules command is not working
   Step1 : Create new project using npx create-react-app app-name
   Step2 : Copy the node modules directory to your project