Welcome to my Fourth Full Stack Course project. This is a Project Management System.
The inspiration for this project was my side learning process of becoming a certified SCRUM master, as well as observation of project managers from my company using multiple trackers, which seemed impractical. As a SCRUM Master, one of the most needed items is to have a tool to collect and monitor workload, progress, and deadlines. The tool itself can be used in any project management world. In the current world, where Covid changed the way of doing the business and most of the things are done online, having a simple yet sufficient tool to track the progress of your team, project members and other function are essential to bringing efficiency to the company.
The goal was to create a tool, which in the future can be adjusted according to the specific customer needs.
As the next step on my path of becoming a software developer from zero to hero 😊, I'm presenting a Project Manager Tool. As mentioned in my last projects my ultimate goal is to change my career path and become a full-time developer. Here I will be showing my newly acquired skills, which are Django and DataBase. As part of my portfolio collection, which can be shown to my potential future employers, and potentially to be used by myself. I have decided to build a product that can support the day to day workload of Project Managers or SCRUM masters. The product is simple to use and intuitive, the navigation around the page is clear and gives users the ability to search and filter through things like date or status. The product can be adjusted in the future for specific customer needs, as well as certain features can be added if the business needs them. The current tool includes elements such as project name, task, due date, and owner. The tool can hold multiple projects, meaning the project manager or SCRUM master can have an overview of all actions open against each project they are working on. Having all in one space optimizes time and effort for task management.
A project goal was to create a set PM tool belt where project tasks can be monitored, this page has the potential to build more tools in upcoming project #5, where additional features like Gantt Chart, Critical Path, Delay Calculator, and Task Time Calculator could be added. Currently, the tool has abilities to store tasks against multiple projects, owners, and due dates. Users can select either a specific project or choose the owner of the task.
The reason for this web page is to create a tool that I can use as a potential PM SCRUM master in the future also to create a product that can be sellable. Therefore, in my thought process, I aimed to create a good basis in project #4 and expand on that in the future
- Color of body was: rgba(33, 37, 41, 1) the bs-gray-900 bootsrap pallet
- Image colors: mix of rgba(32, 149, 175, 1) rgba(41, 75, 113, 1) and rgba(30, 150, 113, 1)
- Font color: aliceblue
For security reasons, Database connection details are set up in an env.py. For production, these are stored in Heroku.
- Responsive design
- Navigation Menu (Site Wide)
- Postgress databases to store information and user login/profile information
- CRUD Functionality
- Filter list details functionality
- Filter due date range
- Hiding filter once not in use
- Pagination
- Login functionality
- Logout functionality
- Register functionality
During creation journey I did use:
- Chrome
- Chrome dev tool used to debug and test code while building
- Github
- For storing project
- Gitpod
- Code written in gitpod workspace
- W3School
- For problem solving and code searching
- Stack Overflow
- For problem solving and code searching
- PEP8 validator
- For checking python convention
- Heroku
- To deploy project into live environment
- Cloudinary
- To store static files
- Markdown
- To create project documentation
- Python OS
- asgiref==3.5.0
- backports.zoneinfo==0.2.1
- cloudinary==1.28.1
- coverage==6.3.1
- dj-database-url==0.5.0
- dj3-cloudinary-storage==0.0.6
- Django==3.2
- django-allauth==0.48.0
- django-bootstrap-datepicker-plus==4.0.0
- django-filter==21.1
- gunicorn==20.1.0
- oauthlib==3.2.0
- psycopg2==2.9.3
- PyJWT==2.3.0
- python3-openid==3.2.0
- pytz==2021.3
- requests-oauthlib==1.3.1
- sqlparse==0.4.2
- Django
- This project was created using the Django framework, the back-end logic and the means to run/view the Website.
- Bootstrap
- To provide styles to page
- balsamiq Wireframes
- To build wireframes
- Font Awesome
- Special Icons for links
- Google Fonts
- Google fonts are used in the project to import the Merienda font for the nav title.
- Multi Device Website Mockup Generator
- Multi Device Website Mockup Generator was used to create the Mock up image in this README
Code pass PEP8 without critical errors
Code pass W3C HTML without errors
Code pass W3C CSS without errors
Due to time constraints, the fully automatic test wasn't completed
- Due to time limits additional tests are not implemented
Page was built based on diagrams, user stories, and wireframes. In the first days of this project, I was focused on installing packets and building the connection with a database & Cloudinary. Once I built the connection with the database I did deploy the project to Heroku to avoid potential errors with the deployed version.
CRUD functionality over task list was the next phase of this implementation, to ensure the user is capable of manipulating data by adding, updating, deleting, and marking as completed to have full control over the information.
Adding Automatic test for CRUD functionality.
Adding Calendar picker to due date field to avoid potential issues with typing date in the different way as is expected by form, as well as improve UX by delivering visual ability to locate the chosen date on the calendar itself.
As per the Agile approach, the next feature appearing during the next iteration cycle was an issue with building a separate way to store Projects in the form of the list. This enabled users to have the ability to standardize project naming conventions and keep control over the data and future task creation.
To ensure the project data has CRUD functionality, I decided to build it in the class view model, which gave me an opportunity to learn this approach in a real situation.
The filter option was implemented to reduce displayed data and to give a better end user experience. To avoid an overwhelming number of displayed data the pagination was implemented.
Final bug fix run, where issues like registration error, query set conflicts were addressed.
The last stage of the process was styling the page in CSS and creating a ReadMe file.
- Create requirements.txt pip3 freeze --local > requirements.txt
- Create Procfile.
- Commit and push changes to Github.
- Move to the Heroku part of a deployment.
- Push the latest code to GitHub.
- Go to Heroku
- Select new in the top right corner.
- Create a new app.
- Enter the app name and select Europe as the region.
- Connect to GitHub.
- Search for repo-name.
- Select connect to the relevant repo you want to deploy.
- Select the settings tab.
- Add buildpack
- Select Python, then save changes.
- Make sure Heroku/Python is at the top of the list, followed by Heroku/Nodejs
- Navigate to the deploy tab
- Scroll down to Manual Deploy and select deploy branch.
- Go to the Resources tab in Heroku.
- Select Heroku Postgres from the Add-ons search bar
- Choose the Hobby Dev-Free plan.
- Click submit the order form.
- Go back to Gitpod bash terminal and install
- pip3 install dj_databse_url
- pip3 install psycopg2-binary
- Seve in the requirements file by:
- pip3 freeze > requirements.txt
See testing photos for more end product photo.
During development I did face multiple bugs:
Error
Fix
* Page wasn't rendering due to lack of implementing url by using jinja template
Fix
- Extending base.html template to allauth html files
- Issue with a file structure and which was not able to pull details from base.html
Fix
Moved the base.html to the main templates folder
Updated the other templates accordingly
- Typed DRI instead of DIR
Fix
- Display CSS setting in the Heroku deployed version (Alan, John)
-
Issue related with not using a correct folders structure, link to the static files was incorrectly written
-
Link to style sheet should be in the < head >
Fix
SECURITY WARNING: don't run with debug turned on in production!
DEBUG = "DEVELOPMENT" in os.environ
-
env.py set os.environ["DEVELOPMENT"] = "True"
-
import to urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [ path(...... ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
- Caused by using the same query set – fixed by separating queries
Fix
Delay with updating project list, waiting time approx. 5 min - the solution was discovered a few hours before the project deadline, however, due to complexity and potential impact to the overall project deadline, the decision was made to do not introduce the fix.
-
Heroku deployment instructions from Code Institute
-
Hello Django and Django blog from code institute
-
Stack overflow to support debugging
-
CI Tutor Support for Help with
- Issue with page rendering (Ger)
- Extending base.html template to allauth html files
- Display CSS setting in the Heroku deployed version (Alan, John)
-
GitHub Python Template Code Institute
-
Conflict Between pagination and filter deep understanding Filtering and Pagination with Django
-
Coding Buddy @Matt_5P for mental support and help with issues during the process