For Milestone Project Three, which requires the development of a full stack site that allows users to manage a common dataset, users can manage the cost tracking of a building development through the design and/or construction phases. The site allows users to view the current estimated cost and a list of changes which are impacting the cost movement from the original budget.

The website can be viewed here

Ultimately, the site serves the purpose of the developer, to:-

1. View the current cost position
The website shall enable the developer, and other persons involved and with access, the ability to view the live, current cost position of the development.

Whilst the developer will probably be most interested in the Total Cost, other users may be more interested in the list of changes - and their individual cost impact.

2. Implement Consistent, Best Practice Cost Control
The website shall enable the Cost Managers - those responsible for managing and reporting the current cost position of the development - to report costs immediately as they arise on a project.

The website will provide a consistent approach in the reporting of costs and changes, from project to project. This will support familiarity and understanding for users.

On any property development, there will be methods for tracking and reporting costs. A cost manager will normally implement a simple cost tracker utilising an Excel spreadsheet to list the changes and report this back to the Developer/Client.

I currently work for a developer and we require our cost managers to implement these procedures. The cost managers utilise the Excel cost tracker which can be viewed here

My aspiration is to incorporate the principles of this template into a more robust data management system which can be used for different construction projects by different developers / clients.

As such, the fundamentals and principles are crystalised in the User Stories below, which will be translated into the final website.

As a developer, I want to implement best practice cost control on my construction projects.

The functions of the website are to:-

1. Provide a visual summary of the current cost position of the development project. This is represented in a Dashboard.

2. View a list of all the changes impacting on the cost of a construction project. This is represented on the Register.

3. Ability to Add (create) / View (read) / Edit (update) / Delete changes which affect a construction project.

The website has been designed for use across multiple screen sizes, adapting content display to optimise the information to be displayed. The information shown on-screen is reduced to accommodate smaller display sizes. The changes are noted below:-

• Large (desktop) screens - full information displayed on-screen, including filter options.
• Medium (tablet) screens - filter sidenav becomes a slideout field, operated by floating button. The user can still access all information.
• Small (phone) screens - A final step is the reduction of information displayed on-screen. Only key information is shown on small screens. This is achieved by reducing the number of columns in the tables shown on the Dashboard and Register.

The primary purpose of website is to show the current cost of a construction project and a list of the changes that have affected the cost since the establishment of the budget.

The intention of the site is to give this information in a clear, concise manner. By giving users control of certain filters, it is envisaged that this will assist users understanding of the numbers being presented without the need for explanation. The filters should give users a better insight on the information and numbers being presented, and in turn control of the project by being able to make more informed decisions.

Whilst the website has reached a point of deployment for presentation, feedback and testing with users, the page requires further development before being deployed in a live situation.

Figma was used to develop a key concept into framework for developing the web page / app. Only a desktop framework was formulated at this stage.

A copy of the original wireframe can be found here: Figma or PDF

The Montserrat font (from Google Fonts) is the only font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly.

The web page is interactive in the following ways:-

• Filter - on the Dashboard and Register, the Filter acts to filter and change the data presented on screen.

  1. Cost - option to switch between 'Nett' and 'Gross' total figures
  2. Status - selection of Status will update totals or filter the register for only those selected
  3. Change Type - selection of Change Type will update totals or filter the register for only those selected
  4. Period - selecting will update the totals to only include the changes within the period selected.

• Add / Edit Changes - users can add or edit changes, affecting the database accordingly.

• Auto-update input information on the Add / Edit pages:-

  1. Numbers auto-format with thousand separators when fields entered/updated;
  2. Gross total auto-calculates to ensure that it is the sum of the preceding numbers.

An overview of the features on the website are listed below:

• Dashboard: The Dasboard provides a summary of the Cost Position of the project, providing users with a view of the Budget, accepted (Approved) and potential changes (Pending, WiP) and the Revised Estimate.

  Users can use the Filter to switch between Nett or Gross costs, or include / exclude changes depending on the Status or Change Type. By enabling users to carry out this function themselves, they will have a deeper understanding of the cost.

  

• Register: The Register is a complete list of all Changes stored in the DB. Like the Dashboard, the Filter will hide from view changes which are not selected.

  By clicking on a row, the Change will open to View/Edit.

  

• Add Change: Users can add a change by clicking on the '+' button on the Register page, which will bring them to this input page.

  The Change Nr auto-populates based on incrementing the Nr of records in the DB collection. The field is still editable in order that users can customise, as it is sometimes necessary to coordinate these values with other consultants working on projects.

  The Gross Cost also auto-calculates, and is the sum of the Nett Cost, Contingencies and Main Contractor On-Costs. This ensures that there is no manual error in the calculation.

  

• View / Edit Change: Users can View/Edit a change by clicking on the row on the Register, which will bring them to this page.

  On load, the input fields are Read Only, but on clicking the 'Edit' button, the editable fields will become active.

  A delete button is also included on this page. Deletion is permanent and therefore a warning pop-up is utilised to confirm the action before committing.

  

• Budget: This page allows users to amend the Approved Budget.

  

• Registration: This page allows users to Register for access to the web page.

  

• Log In

  

• Log Out: Removes all session cookies and ensures that pages / APIs cannot be accessed when not logged in.

  

In order to implement CRUD (Create, Read, Update, Delete) functionality on the website, MongoDB - a NoSQL database - is used. A number of collections were created to support the operation of the website. A record/extract from each collection has been inlcuded below for reference:-

• Register - this is the primary collection of the database, implementing full CRUD functionality which enables users to manage and track the cost of changes occurring on a project.
  
  Create [Y] Read [Y] Update [Y] Delete [Y]
  Users are able create records on the 'Add' page.
  The read functionality is implemented in a variety of different ways across the website, whether it is through the Dashboard and the computation of values of the records to display a summary, the full list of records of the collection on the Register, or viewing the details of the record on the View page. Records can be edited or deleted from the View page.

• Users - this collection is used to allow users to Login and new records are created when a user registers.
  Create [Y] Read [Y] Update [N] Delete [N] Update and Delete functionality could be implemented in future updates of the website.

• Status and Change Type - these collections are fixed and not intended to be changeable by Users. They provide the options in Input Fields to Add / Edit a change.
  
  Create [N] Read [Y] Update [N] Delete [N] It is not intended to permit users to add, change or delete these options in order that they are permanent and consistent. They are associated with wider functionality of the website, including the Filters, and allowing further CRUD functionality would disrupt them (without further wider development of the website).

• Budget - this collection is currently only intended to host 1 record.
  Create [N] Read [Y] Update [Y] Delete [N] The record is required from the outset, even if the budget has not been established and the values are '0'/zero, so there is no requirement for Create functionality. Likewise, the record cannot nor should be deleted.

The functions implemented on this website are for demonstration purposes only at this stage, there is further development required before the website can be deployed for a live development. Those features required before live deployment include:-

• Currency: Ability to change the default currency displayed for the project.
• Multiple Projects: Currently the website assumes that there is only one project. Extend the functionality of the application to enable the cost tracking of multiple projects.
• Filter memory: When a page reloads, the Filter currently returns to the default selection. Future development would consider maintaining selected filter options on page re-loads with a 'Reset' option to return to the default selection.
• Authorisation of Registration: After a user has registered, access will not be granted until an Administrator approves access and sets privileges.
• Update of User Profile: Currently the User Profile is limited to Read Only. This will be updated to enable the update of user details and also to delete if access is no longer required.
• Access privileges: Users will be granted different rights and viewer privileges dependent upon their role on the project. For example, a cost manager will be able to add and edit changes, whereas other users will only be able to view them. An Adminstrator role will also be introduced for controlling these access privileges.
• Graphical Representation: To enhance and make the user experience more engaging, the Dashboard can benefit from graphs or other figurative representations of the data in a more visually absorbing way.
• Upload Supporting Information: Whilst the DB stores the high level costs associated with the change, being able to upload supporting information (breakdown of costs, design information) to provide full details of the change would be beneficial to users.

• HTML5
• CSS
• Javascript
• Python

• MongoDB MongoDB provides the backend database for storing the information submitted from, and viewed on, the website.

• MaterializeCSS
  Materialize is generally used to assist with the layout, utilising the in-built grid system, and design functionality.

• Google fonts
  Google fonts is used to import the 'Montserrat' font into the style.css file which is used throughout the project.

• jQuery, incl UI
  jQuery is used for Javascript DOM manipulation.

• Git
  Git was used for version control by utilizing the terminal in VSCode terminal to commit and push changes to GitHub.
  In addition, in order to track the purpose of commits, the following pre-fixes have been adopted, which are taken from the Commit Message Guidelines outlined by Angular Framework:-

  • feat: new feature has been added to the code
  • fix: bug fixed during on-going testing
  • refactor: 'tidy up' of code
  • docs: addition of comments to code or writing of README file

• GitHub
  GitHub is used to store the projects code after being pushed from Git.

• Heroku
  Heroku is used for deployment of the website / application.

• Figma
  Figma was used to create the wireframes during the design process.

• Screen Recorder
  Screen Recorder used for creating videos (edited in Kapwing) of website features in operation.

1	Clearly see the current cost position of the project
2	Determine the cost movement from start (budget) to current / forecast position
(a)	Users can view the current cost position of the project on the Dashboard, including the Approved Budget and the Revised Estimate
(b)	Users can see the build-up to the Revised Estimate, so they know what changes are included in it
(c)	By switching the Nett and Gross Cost filter, users can be sure they know the basis of the cost.
(d)

3	View a full list of the changes impacting the development
4	Determine what changes in the latest period (30 days) have added to the revised total estimate
(a)	The Register has a list of all changes being recorded on the project
(b)	As users will be particularly interested in 'new' or 'updated' changes, the Register can be filtered accordingly to show only those 'new' or 'updated' changes within the last 30 days.
(c)

5	Depending on the purpose of my visit to the site, view only Accepted / Pending / WiP changes
6	View changes / cost impacts by the type of change to understand their impact on the development
(a)	On the Dashboard, the Filter can be used to show only those costs which are Selected. This may be useful where, for example, a Client only wishes to know their committed costs, I the budget and those changes which are approved. As such, Pending and WiP changes would not be included in the Revised Estimate and would be unchecked.
(b)
(c)	Similarly on the Register, the Filter can be used in a similar way. For example, a Client may wish to review only thos Pending changes for authorisation / acceptance.
(d)

6	Add new changes to the Cost Tracker with a breakdown of the cost
(a)	New changes may be added to the DB with a breakdown of the Cost.
(b)

7	Edit changes as details are updated or when the Status of a change is made
(a)	Changes listed on the Register can be made by clicking on the row to View / Edit the item
(b)

The W3C Markup Validator and W3C CSS Validator Services were used to validate the main pages of the project to ensure there were no syntax errors in the project.

W3C Markup Validator

In order to check the HTML, the code was copied by 'Text Input' on the validator, as the code is not passed and checked by the 'Address' method. There are no outstanding errors - screen captures of the results are shown on the links below.

Results

• Dashboard
• Register
• Add Change
• Edit Change

W3C CSS Validator - Results

There are no errors highlighted by the CSS validator.

JSHint has been used to check and test the Code Quality of the Javascript used on this page. The Javascript has been updated in line with warnings initially returned. The following items remain and which are deemed not critical to the functioning of the site:-

Whilst not addressed, this warning could be refactored in future to address the concerns raised.

These warnings are incorrect and the statements are not missing semi-colons

PEP8 online has been used to check compliance of the app.py file used in this application with PEP8 requirements. The file was updated in line with non-compliance results that were initally returned.

There are no non-compliance remaining in the app.py file.

The following tests were carried out to ensure functionality before deployment:-

Test: Changes can be added and filtered for each Status and Change Type

• Steps followed:
  • Add a change which correlates to each Status/Change Type option (ie 4 x 6 = 24 changes)
  • Rotate through each status and change type to add a change
  • Check Dashboard and Register functions for each Status and Change Type on the Filter
• Results: Dashboard and Register load as anticipated, with Status and Change Type filter operating to include / exclude applicable changes in the Totals on the Dashboard and list of changes on the Register.

Test: Test the Period Filter

• Steps followed:-
  1. Manually amend two Changes in the MongoDB collection, one for the 'date_added' field and the other for the 'date_changed' field. The dates should be one year earlier than the current date, ie more than 30 days ago.
  2. Check the dates have been updated on the website / Register by selecting each item in turn and clicking the item to View.
  3. Return to the Register and select the Period filters to check that the Filter operates as intended
• Results:-
  • The period filter operated as expected, but removing the Changes with dates outwith the 30 day period.

Test: Test empty values in fields on the Add Change page

• Steps followed:-
  1. Entered no values into fields (ie did not enter the field) and submitted form
  2. Check Register loads
  3. Click on Change to View/Edit and confirm item loads
• Results:-
  • Register and View/Edit Change pages do not load.
  • On checking the DB, any fields not inputted with a value become 'null'.
  • Consequently, Jinja2 is not able to input valid text within the field.
• Fix:-
  • JS function included to populate any empty fields with '0' before the form is submitted. This is implemented when the Submit button is clicked.
  • The Add change function now operates so that no values need to be inputted in order to function, the default value of these fields will now be '0'/zero.

Test: To test the thousand separator included in value fields, different values inputted to test the Add Change page

• Steps followed:-

  1. Entered values of

     • '100000' (one hundred thousand),
     • '1000000' (one million), and
     • '100000000' (one hundred million)

     to test how the form handles the values on (a) calculation of Gross Total and (b) submission of values to the DB

  2. Check that Gross Total is calculating properly

  3. Check Register loads

  4. Click on Change to View/Edit and confirm item loads

• Results:-
  • Value of 100,000 operates as expected.
  • Values of 1,000,000 and 100,000,000 do not calculate the Gross Total correctly. The function to omit the only omits the first ',' from the values, preventing the calculation.
  • The Register and View/Edit pages do load, but are not the correct/anticipated values.
• Fix:-
  • JS function which removes the ',' from the number strings updated to omit all ','.
  • This now allows numbers of 999,999 to function on the website as anticipated.

During the on-going testing and development of the site, bugs were discovered and resolved. These can be reviewed in the list of Git commits, specifically those with the 'fix' prefix.

For a list of the Git Commit history, this can be viewed here

During the development of the website, and again as a final, comprehensive and in-depth review, the following testing was carried out:-

• The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge and Safari browsers.
• The website was viewed on a variety of devices: Desktop, Laptop, iPad.
• Buttons were checked to ensure when hovered or active that they are responsive and operate uniformly.

There are no known bugs.

The website has been deployed on Heroku and is currently publicly accessible.

The development of the website has been undertaken on VSCode.

The steps from start to present were:-

Connection to GitHub repository

1. Creation of repository on GitHub, utilising Code Institute template.

2. Clone of GitHub repository to local machine but utilising GitBash to implement the command:- git clone https://github.com/dkeddie/MS3.git

Deployment to Heroku

3. Creation of a new App on Heroku
4. Go to 'Deployment Method' -> Select 'GitHub' and search for the repository that you want to deploy via Heroku from GitHub.
5. Go to 'Settings' and 'Reveal Config Vars' -> Input the settings required to deploy the website and connect to the Mongo Database as shown below ()
6. Go to 'Deploy' and select to Enable Automatic Deploys

The website is now deployed and can be viewed at: https://ms3dkeddie.herokuapp.com/

Should you wish to deploy your own version of the website, the following steps may be followed to host your own version on GitHub:-

1. Visit my GitHub Repository: MS3

2. Click dropdown 'Code' and copy url to 'Clone with HTTPS'
   

3. Select 'Import Repository' from the Menu dropdown, paste the url, give your new repository a name and click 'Begin Import'

4. Go to your new Repository. You may chose to launch the repository in an IDE of your chosing in order to make changes to the website, and customise it to your requirements.

5. To deploy the website, follow step 3 of the Deployment section immediately above.

All content and code was written by the developer, except where taken from libraries or documented within this file or the Code files.

• Snackbars - flash messages which hover over the page are adapted and inspired from W3Schools
• Clickable table rows - code to make the row clickable to View/Edit the item was taken from electrictoolbox

Thank you to my mentor for feedback and advice given throughout the project.