Dask - Collaborative Task Manager Application for GitHub + DEV Hackathon
Tags: githubhack23, javascript, reactnative, firebase
Published: 2023-05-22 17:04:41

## What I built 

In the context of the Hackathon, I decided to build a mobile application which could help everyone to: 

- Organize their tasks into **personal projects**, and their projects will be saved into the mobile phone, not in the cloud.
- Work on the same project with many people like on Trello and Jira, so the application is working in realtime. In this case, projects are saved in the cloud and shared to all members of the project.

These are the two main point that my application called **Dask** offers to people.

### Category Submission: 

The project that I build enter in this following category.

**Phone Friendly**: Projects built for Mobile (PWA readiness, iOS/Android)

### App Link

The android version of the app is available from this Google Drive folder: https://drive.google.com/drive/folders/1M-2RGXzBcHROBmSufHQ4We_Odo3-oTkz?usp=sharing

For the Ios version, I haven't generated it because I didn't have a Macbook and Iphone. But we can use the source code to generate it because it's made with a cross platform tool (React Native).

### Screenshots 

#### Sign up screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52b9rggquarap2ulv1il.png)

#### Profile screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13uou7q9wioszxobxxc9.png)

#### Personal projects

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u58hu41l8t5xvn7h8mml.png)

#### Create a personal or a shared project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp57wk67a7esfx8983zr.png)

#### Change the status of a task

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xzkcfyvcdd85mbvfqsb.png)

#### Delete a task

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjh9urr1km9fp7mgt1kv.png)

#### Shared projects screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l93nod1fthkcflyxpbv.png)

#### Tasks of a shared project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6ynnye6ndi9g3jt48ri.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm0865hx0xlpmeeuqgv3.png)

#### Members

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7rk7p8u1gnrq63w7ggiq.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn4fljy47ju5h4r8i9aq.png)

### Description 

As said above, this project aims to help people to organize their tasks into project, it's not required to have an internet connection to starting managing **Personal projects**, because they are saved in the mobile phone directly.

For the **Shared projects** section, you have to be connected first into your accound, and after having created a shared project (so easy to do), you can invite other person to the project by searching for their profile based on their email adresses. And then, if on a specific shared project, there are 3 members actually connected, if some one for example: 

- Add a new task
- Delete a task
- Update the status of a task
- The owner add a new member

The rest of members will be notify directly and see the update on their mobile phone without refreshing the application.

### Link to Source Code 

- Mobile application source code: https://github.com/EssiJunior/Dask

- Realtime Backend source code: https://github.com/ngimdock/dask-websocket

### Permissive License 

MIT

## Background (What made you decide to build this particular app? What inspired you?) 

What motivate me to realize this project was the case where we have many women (10 for example), who want to do the market, in order to organize a wedding. We all know that, one person can't do it only, so we have to be many to go quicky. And also, things that are going to be purchased can not be at the same place, then we have to go in many places to find what we want to  buy. 

Okay now, it is not easy to know if one thing has been bought, and if a women doesn't find what she was supposed to buy she couldn't notify the rest of women to alert them, apart of if she decide to call each women. It's problematic. There's some issues like that that motivated me to realize **Dask - a Collaborative Task Manager**.

In Dask, you can organize your tasks into projects, invite people to collaborate, and all members will receive notifications and see what changed into the project, it's very cool.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

For the mobile application project, I create a GitHub Codespaces, where I configure a particular container that fit my project requirement. so, I: 

- Initialized a container with Nodejs + TypeScript because my React Native application is initialized on top of them.
- Installed some extensions like Prettier, GitHub Copilot and so on which help me to code more faster.
- I launched the development server and test the mobile app directly on my hardward device and it works very fine.

I was so happy while working on this project, I learnt many new things. Firstly I did know nothing about GitHub Codespaces before, but after having watching videos on it I learn how to use it and configure it.
Also, I learnt how to set up Firebase to React Native, something that I hadn't done yet, the result if wow.
Finally, it's my first time to set up a realtime behavior into a React Native app and it works very fine.

In conclusion, I learnt many things, thanks for this opportunity :)

### Additional Resources/Info

#### Technologies used

- **React Native** for mobile application
- **Firebase** for the backend (used to saved users accound, shared projects and tasks)
- **Nodejs + Socket.io** for the realtime behavior
- **SQLite** for managing local database into the mobile app (used to save personal project)
- **GitHub**, used to save the project online and collaborate easily with other people
- **Figma**, used to realized UI Designs

#### Collaborators
I received help from two friends who have participated to the project.

- @essijunior 
- @ngimdock