A simple tool to help you get an overview of the workload.

View the live site here.

• UX
  • Introduction & Project Goals
  • User Stories
  • Development Planes
  • Skeleton
  • Design
  • Features
• Technologies
  • Languages
  • Tools
  • Libraries
  • Database Management
• Testing
• Bugs
• Deployment
• Credit
• Acknowledgements

Task Manager is a simple way to keep a comprehensive overview of the workload. It`s divided into different departments, but all departments can see all tasks on every department and also create a new task on the appropriate department.

The Project Goal is to make the days at the office more easy and transparent across the different departments.

This is the third of four Milestone Projects the developer needs to complite, to achieve the Diploma in Software Development.

The main requirements on this project was to build a full-stack website, where users could manage a common dataset, using HTML5, CSS3, JavaScript, Python, Flask and MongoDB.

• As a general user I want to:

  • Se a simple application with calm colors without a lot of distractions
  • Se the workload accross the departments
  • See who made the task
  • Have the opportunity to Sign Up for access to more features

• As a logged in user, in addition to the general above, I want to:

  • Be able to create tasks on the department of my own choice
  • Edit and delete tasks created by me
  • See my created tasks on my profile page

• As an Admin user, in addition to the above, I want to:

  • Create a new department
  • Edit department
  • Delete department

• A simple Task Manager to keep track of the workload with the easy-to-use management system, using the basic CRUD functions: Create, Read, Update and Delete.

  • Create Tasks
  • See all Tasks
  • Update Tasks
  • Delete Tasks

• Develop a tool to make the workdays more easy and transparent

• The user feels included

• The user have the opportunity to update on workload

• The user gets a simpler and more clear workday

In order to create an application that fulfilled the expectations as described above, the developer used her experience from her daily work.

Divided into three categories, the website will focus on the following target audiences:

• Roles:

  • Regular employees in all departments
  • Leaders in all departments
  • Top leaders
  • Business owners

• Demographic:

  • Newly hired
  • Old trotters
  • Likes to stay up to date

• Psychographics:

  • Organised
  • Structured
  • Work culture

• Content that is visually appealing with calm colors
• Content is well structured
• Easy to navigate the application using the respective buttons
• Easy to understand how to use the application
• Easy to read typography
• Operational link to GitHub, Slack and LinkedIn that opens in a new tab
• Opportunity to Sign In
• Opportunity to create, edit and delete own tasks
• Tasks have a descreption and due date
• See all tasks accross departments
• Admin user has the opportunity to mange the departments

Wireframes was made in Balsamiq. As in previous projects feedback on using Figma, was that Balsamiq was a better choice.

First it was thought that each page would have different background image, but the developer thought the coffee-bean background was great on all pages to keep it consistent. The developer also desided to make a profile page, so that the signed in user have the opportunity to see only the tasks created by them.

The design of this application has been created based on a "keep it simple" mindset. It has a lot of different user personalities, and it is not an application to hang out on. The users is at work, and it is a quick in and out application. Calm colors without distractions and unnecessary content.

When entering the application you immediately see all tasks, the user does not have to sign up / in unless they want to create, edit or delete a task.

Jinja was used to extend the base.html page, for consistency accross all pages.

• Fonts

Google Fonts: Roboto, sans-serif. This Font is used because it is a clean and simple Font.

• Icons

Fontawsome provided all the icons used in the application.

• Colours

All the colours where picked to ensure a calm and harmonious impression.

* Navbar, Footer and Containers: Silver Pink, #bcaaa4
* Buttons : Isabeline, #efebe9 and Cinereous, #a1887f
* Text and Icons: White, #fff and Isabeline, #efebe9
* Collapsible and dropdown: Cinereous, #a1887f
* Hover: Pale Silver, d7ccc8

Color Sheme from Coolors

The web application has a responsive layout with a reverse mindset relative to the mobile-first way of thinking, as it will be used at the office, and desktop screen. But of course it can also be used from a phone.

Features that have been implemented:

• Search Tasks

• Sign Up

• Sign In

• Create, edit and delete Tasks

• Create, edit and delete Departments

• Profile Page

• Flash messages if username exists or wrong password

• Flash messages when logged in or out

• Flash messages when manage tasks or departments

• Custom 404 Page

• Custom 500 Page

• Favicon

• Links to the developers GitHub and LinkedIn

• General link to Slack, just because it is amazing

Features that will be implemented in the future:

• Sort Tasks by date
• See how many tasks that been solved
• Assign tasks to another user
• Warning when delete, and confirm button
• Anonnymous suggestion function

• HTML5
• CSS3
• JavaScript
• Python

• Git
  Git was used for version control by utilizing the GitPod terminal to commit to Git and push to Heroku and GitHub.

• GitHub
  GitHub was used to store the project after pushing from Gitpod.

• Heroku
  Heroku was used to deploy the website.

• Balsamiq
  Balsamiq was used to create wireframes before starting on the project.

• Am I Responsive?
  Am I Responsive? Was used througout the building of the project to make sure the it was responsive, and also for the Mockup.

• Font Awsome
  Font Awsome was used to get all the icons on the website.

• Google Fonts
  Used to import the desired font.

• Coloors
  Coloors was used to create the color sheme.

• Lighthouse
  Used to audit the site for quality.

• Unsplash
  Unsplash was used to get the background image and the error image for error pages.

• Favicon
  Favicon was used to make the Favicon Image.

• Black
  Black Playground, Python code formatter.

• The W3C Marcup Validation
  The W3C Marcup was used to validate the HTML.

• jigsaw.w3
  Used to validate CSS.

• jShint
  Used to validate JavaScript code.

• PEP8
  Used to validate the Python code.

• Materialize
  Materialize was used for responsivenes along with custom components.

• jquery
  jquery was used along with Materialize for installation of CSS components.

• Werkzeug
  Werkzeug is a comprehensive WSGI web application library

• Flask
  Flask was used as the web framework.

• ItsDangerous
  Its Dangerous allows data to safely be sent and received using Python secret keys.

• PyMongo
  Containing tools for working with MongoDB

• Flask-PyMongo
  Flask-PyMongo bridges Flask and PyMongo.

• BSON
  This is a required dependency for MongoDB management system.

• Jinja
  Full-featured template engine for Python, used to extend from base.html.

• MongoDB
  MongoDB was the chosen NoSQL database for this project.

• MongoDB Atlas
  MongoDB Atlas used to host the database in the cloud.

The whole test process can be seen in the TESTING.md file.

Bugs are stored in the TESTING.md file.

The deployment of the web application was done using GitPod, pushed to GitHub, and deployd on Heroku using the following instructions:

1. Create a requirements.txt file using command pip3 freeze --local > requirements.txt
2. Create a Procfile with the terminal command echo web: python app.py > Procfile and at this point checking the Procfile to make sure there is no stray line as this can cause issues when deploying to Heroku.
3. The new requirements file and Procfile committed to GitHub.
4. New app created in Heroku by clicking "New" and "Create New App" and giving it an original name and setting the region to closest to location.
5. From Heroku dashboard click "Deploy" -> "Deployment Method" and select "GitHub"
6. Search for GitHub repo and connect.
7. In the dashboard click "Settings" -> "Reveal Config Vars"
8. Set config vars:

1. Navigate to GitHub, log in
2. Locate my repo
3. On the right side of the screen, click Fork
4. This creates a copy in your own repository to make changes in GitPod
5. Once finished with changes, add commit and push to your own GitHub
6. Click Pull Requests and select "New Pull Request" button.

1. Navigate to the GitHub Repository
2. Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally

For more information on how to clone a repository, follow the instructions taken from GitHub Docs.

The developer has used previous README.md files from MS1 and MS2 as an inspiration. Also previos projects, and The Walkthroug Project with Tim Nelson.

Mentor Sandeep Aggarwal was really helpful with the bug related to not get the search function to work, and error whith the edit_task did not work as it should. As well as tips and tricks along the way.

Credit for deploy section: Deployment to Heroku from the Code Institute Learning videos.

Also credit to Suzybee for a more simple way to describe how to fork and run project locally than I had in my previos README.md files.

Images

Background image by: Justus Menke on Unsplash

Error image by: Daniel Tatfjord on Unsplash

• My Mentor - Sandeep. He is really amazing to speak with. He is easy to understand, solution oriented and always in a good mood. He is also good at giving feedback on what could have been done in a better way for another time. Really feel I learned a lot from our sessions. He is also good at motivation, and tell me what is good. Really appreciate him!

• My kids and husband for their patience. The fact that they let me do this, I really appreciate it. My husband also participated in the user testing.

• My friends and family for support, and participation in the user testing.