Tasky - Task Manager Kanban Board

Tasky is a task manager app that upgrades the functionality offered by Trello. It allows users to create lists, tasks, keep track of what is completed but also add as many subtasks, subsubtasks, etc. as they want.

---

Table of Contents

1. Demo
2. Built With
3. Features
4. File Structure
5. Installation

Demo

demo.mp4

(back to top)

Built With

      Client

            

      Server

            

(back to top)

Features

• Register and log-in into their accounts. Input validation is added on both client and server side.

• Add new lists which are saved in the backend. Users can add as many lists as they want.

• Users can delete, and change the name of the list all of which will be saved in the backend.

• Users can reorder lists and that order will be saved.

• In each list, users can add new tasks, which are saved in the backend. Users can add as many tasks as they want.

• Each task can have as many subtasks as the user wants. Each of these subtasks can have their own subsubtasks, and so on. This can be as deep as the user wants.

• Users can hide or show any of these layers of subtasks in an intuitive way (shown by the accordion)

• Users can checkmark a task to indicate that it is completed. This will be saved in the backend.

• Implemented detailed recursive task logic that goes through the task tree to ensure completed logic is working correctly.

  Click to expand for a more detailed explanation

  If all subtasks of a task are completed, the task will be automatically checkmarked. Vice versa, if you uncheck a subtask of a task, the task will be unchecked. If the user moves an unchecked task to another list and its former parent task now has all of its subtasks completed, the parent task will be automatically check-marked. If a task is completed and a new subtask is added to it, the task will be marked as not completed.

  All of this will recursively be bubbled up or down for all parent and child tasks. I have decided that if the user marks a task as completed its children won't be marked as complete. The reason for this is that if the user checkmarks the master task as completed by accident and wants to revert back the decision, I don't want to forget how the subtasks were previously check-marked.

• Users can change task names, delete tasks, and move them to other lists. All of these changes will be saved in the backend. Moving a task or a subtask to another list will move it to the bottom of the list and will make it a main task.

• Added feature that shows how many of the tasks are completed in a list. This is shown in the list header. It will be colored green if all tasks are completed.

• Implemented comprehensive user authorization and authentication. Users can only see their own lists and tasks. They can't see other users' lists and tasks. They can not access certain pages without being logged in.

• The design is fully responsive for all devices.

(back to top)

File Structure

Tasky Task Manager Kanban Board Webapp
│
├── README.md                 # Project overview and documentation
│
├── client/                   # Contains React frontend components and assets
│   ├── .env                  # Environment variables for the client
│   ├── README.md             # Documentation specific to the client side
│   ├── package-lock.json     # Auto-generated file for npm dependencies
│   ├── package.json          # NPM package configuration
│   ├── public/               # Public assets like favicon and HTML template
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── logo192.png
│   │   ├── logo512.png
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src/                  # Source files for the React application
│       ├── ApiClient.js      # API client for interacting with the backend
│       ├── App.js            # Main React application component
│       ├── App.test.js       # Tests for the main application
│       ├── components/       # Reusable React components
│       ├── contexts/         # React contexts for state management
│       ├── index.js          # Entry point for the React application
│       └── logo.svg          # Logo file
│
└── server/                   # Contains Flask backend API files
    ├── flask_backend/        # Flask application and its configurations
    │   ├── blueprints/       # Flask blueprints for modularizing the application
    │   │   ├── bp_auth.py    # Blueprint for authentication routes
    │   │   ├── bp_lists.py   # Blueprint for list-related routes
    │   │   └── bp_tasks.py   # Blueprint for task-related routes
    │   ├── main.py           # Main file to run the Flask application
    │   └── models.py         # Database models for the application
    └── requirements.txt      # Required Python packages for the server

(back to top)

Installation

1. Clone the repo

   git clone

2. Create a virtual environment (Conda, Pipenv, etc.). Optional but highly recommended.

   conda create -n myenv python
   conda activate myenv

Frontend

1. Open the frontend folder

   cd client

2. Install NPM packages

   npm install

3. Run the app

   npm start

4. Open http://localhost:3000 to view it in the browser.

Backend

1. Open the backend folder

   cd server

2. Install the requirements

   pip install -r requirements.txt

3. Open 'flask_backend' folder

   cd flask_backend

4. Run the app

   python main.py

(back to top)