project-management-tool

PROJECT MANAGEMENT TOOL

GitHub commit activity GitHub last commit GitHub repo size

The Project Management Tool has as a purpose to help users and teams to organize their workload. A user can add a project, add tasks to it and assign these tasks to colleagues. Information such as deadline-dates and when a project or task were created, help them have controll of their work and prioritize their tasks. In addition the user can create his/hers profile and check out others’ profiles as well. This has a purpose to create a pool of proffessionals that provides information such as job-titles and bios to ensure that right people were chosen for every project. A quote on the landing page of the Project Management Tool is added to help start working motivated!

screenshot

UX

The purpose of the project is to organize work, so I want it to have a clear and simple structure so that one can navigate easily into the site. My colour palette consists of earthy and calm tones . Different colours are chosen to indicate the progress of progress and tasks and gray tones for done tasks to make them fade so that the user can easily skip them.

Colour Scheme

I used coolors.co to generate my colour palette.

screenshot

I’ve used CSS :root variables to easily update the global colour scheme by changing only one value, instead of everywhere in the CSS file.

:root{

    /*Colours*/
    --background : whitesmoke;
    --green : rgb(159, 200, 190);
    --pink : rgb(249, 218, 217);
    --orange : rgb(244, 190, 172);
    --darkpink : rgb(248, 137, 133);
    --black : rgb(42, 52, 50);

Typography

User Stories

The user stories created in the beginning of the project helped to organize the structure of the site.

New Site Users

Returning Site Users

Site Admin

Wireframes

To follow best practice, wireframes were developed for mobile, tablet, and desktop sizes. I’ve used Balsamiq to design my site wireframes.

Mobile Wireframes

screenshot

Desktop Wireframes

screenshot

Features

Existing Features

screenshot screenshot screenshot

screenshot

screenshot

screenshot screenshot

screenshot screenshot screenshot

screenshot

screenshot

screenshot

screenshot

screenshot screenshot

screenshot

screenshot screenshot

screenshot screenshot

screenshot screenshot screenshot

screenshot screenshot screenshot

screenshot screenshot

screenshot screenshot

screenshot screenshot

screenshot screenshot

screenshot screenshot

screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot screenshot

Future Features

Tools & Technologies Used

Database Design

Entity Relationship Diagrams (ERD) help to visualize database architecture before creating models. Understanding the relationships between different tables can save time later in the project.

class Profile(models.Model):
    first_name = models.CharField(max_length=200, unique=True, null=False, blank=False)
    last_name = models.CharField(max_length=200, unique=True, null=False, blank=False)
    featured_image = CloudinaryField('image', default='placeholder')
    user = models.OneToOneField(
        User, on_delete=models.CASCADE, related_name="name"
    )
    job_title = models.CharField(max_length=200, unique=True, null=False, blank=False)
    bio = models.TextField(null=False, blank=False)
    created_on = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.first_name

class Project(models.Model):
    title = models.CharField(max_length=200, unique=True, null=False, blank=False)
    user = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name="project_creation"
    )
    description = models.TextField(null=False, blank=False)
    created_on = models.DateTimeField(auto_now_add=True)
    deadline = models.DateTimeField(null=False, blank=False)

    def __str__(self):
        return self.title

class Task(models.Model):
    project = models.ForeignKey(Project, on_delete=models.CASCADE)
    title = models.CharField(max_length=200, null=False, blank=False)
    user = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name="task_creator"
    )
    assigned_to = models.ForeignKey(
        User, on_delete=models.CASCADE, related_name="task_owner"
    )
    description = models.TextField(null=False, blank=False)
    created_on = models.DateTimeField(auto_now_add=True)
    updated_on = models.DateTimeField(auto_now=True)
    status = models.CharField(
        max_length=20, choices=STATUS, default="To do", null=False, blank=False
    )
    deadline = models.DateTimeField(null=False, blank=False)

    def __str__(self):
        return self.title

screenshot

Agile Development Process

GitHub Projects

GitHub Projects served as an Agile tool for this project. It isn’t a specialized tool, but with the right tags and project creation/issue assignments, it can be made to work.

Through it, user stories, issues, and milestone tasks were planned, then tracked on a weekly basis using the basic Kanban board. The user stories made in the beginning of the project were distributed into flexible iterations based on their urgency and value for the project.

screenshot

GitHub Issues

GitHub Issues served as an another Agile tool. There, I used my own User Story Template to manage user stories.

It also helped with milestone iterations on a weekly basis.

MoSCoW Prioritization

I’ve decomposed my Epics into stories prior to prioritizing and implementing them. Using this approach, I was able to apply the MoSCow prioritization and labels to my user stories within the Issues tab.

Testing

[!NOTE]
For all testing, please refer to the TESTING.md file.

Deployment

The live deployed application can be found deployed on Heroku.

ElephantSQL Database

This project uses ElephantSQL for the PostgreSQL Database.

To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:

Cloudinary API

This project uses the Cloudinary API to store media assets online, due to the fact that Heroku doesn’t persist this type of data.

To obtain your own Cloudinary API key, create an account and log in.

Heroku Deployment

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

[!IMPORTANT]
This is a sample only; you would replace the values with your own if cloning/forking my repository.

Key Value
CLOUDINARY_URL user’s own value
CLOUDINARY_NAME user’s own value
CLOUDINARY_API_KEY user’s own value
CLOUDINARY_SECRET user’s own value
DATABASE_URL user’s own value
DISABLE_COLLECTSTATIC 1 (this is temporary, and can be removed for the final deployment)
SECRET_KEY user’s own value

Heroku needs two additional files in order to deploy properly.

You can install this project’s requirements (where applicable) using:

If you have your own packages that have been installed, then the requirements file needs updated using:

The Procfile can be created with the following command:

For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:

Either:

Or:

The project should now be connected and deployed to Heroku!

Local Deployment

This project can be cloned or forked in order to make a local copy on your own system.

For either method, you will need to install any applicable packages found within the requirements.txt file.

You will need to create a new file called env.py at the root-level, and include the same environment variables listed above from the Heroku deployment steps.

[!IMPORTANT]
This is a sample only; you would replace the values with your own if cloning/forking my repository.

Sample env.py file:

import os

os.environ.setdefault("CLOUDINARY_URL", "user's own value")
os.environ.setdefault("CLOUDINARY_NAME", "user's own value")
os.environ.setdefault("CLOUDINARY_API_KEY", "user's own value")
os.environ.setdefault("CLOUDINARY_SECRET", "user's own value")
os.environ.setdefault("DATABASE_URL", "user's own value")
os.environ.setdefault("SECRET_KEY", "user's own value")

# local environment only (do not include these in production/deployment!)
os.environ.setdefault("DEBUG", "True")

Once the project is cloned or forked, in order to run it locally, you’ll need to follow these steps:

Cloning

You can clone the repository by following these steps:

  1. Go to the GitHub repository
  2. Locate the Code button above the list of files and click it
  3. Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
  4. Open Git Bash or Terminal
  5. Change the current working directory to the one where you want the cloned directory
  6. In your IDE Terminal, type the following command to clone my repository:
    • git clone https://github.com/EfthymiaKakoulidou/project-management-tool.git
  7. Press Enter to create your local clone.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Open in Gitpod

Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.

Forking

By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner’s repository. You can fork this repository by using the following steps:

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the “Settings” Button on the menu, locate the “Fork” Button.
  3. Once clicked, you should now have a copy of the original repository in your own GitHub account!

Local VS Deployment

There are no differences between the local site and the deployed.

Credits

Though I did not get any code from this tutorial it helped me structure my project: https://www.youtube.com/playlist?list=PLXuTq6OsqZjbCSfiLNb2f1FOs8viArjWy

Content

Source Location Notes
Markdown Builder README and TESTING tool to help generate the Markdown files
W3Schools entire site syntax
Cgpt entire site for everything
Code Institute’s LMS entire site for setting the base for the development

Media

Source Location Type Notes
jpgtree logo image logo on the header
icons favicon image favicon on all pages

Acknowledgements