Volo Requirements System is a full stack application that meets the requirement of a user creating projects and requirements for the corresponding projects.
This project was created to meet the criteria of the Code Institute Milestone Project 3.
View Repository in GitHub Pages:
https://github.com/mparker-landt/Milestone_Project_3
View Website Link:
https://volo-requirements-system-6e36ea052d2c.herokuapp.com/
Author: Marcus Parker
Github: mparker-landt
This web app is targeted towards a small business who want to add projects in development and add requirements related to the projects.
- As a first-time visitor I want to be able to see Projects and Project details.
- As a first-time visitor I want to learn how to add/edit and delete Projects and Requirements.
- As a first-time visitor I want to be able to sign up for an account to use the website.
- As a returning user I want to login to my account with a username and password.
- As a returning user I want to be able to explore the Projects and related requirements.
- As a returning user I want to be able to add/edit and delete Projects and their related requirements.
Wireframes were created with draw.io. The design was heavily influenced by a StartBootstrap demo that provided a professional feeling website whilst allowing for flexible customisation.\
- Home Page
- Project Card Modal
- Requirements Page
- Test Report Page
- Sign In Page
- Register Page
ERD Diagrams were drawn roughly with hand at the beginning of the project. After the database and tables were created in psql for the project the ERD diagrams was auto generated using the program pgAdmin4. This program allows for the visualistion and editing of the SQL database.
For the colour scheme a blue and white scheme were used. This was part of the Start Bootstrap demo but suited the professional aspect of the webpage whilst keeping a nice to look visual aspect.
- #4E73DF - Used for the menu, buttons and borders for content
- #FFFFFF - Used for the header, footer and certain font colours
- #F8F9FC - Used for main body of the pages, as it is off white the white of content on the page were made more visually appealing and attracted attention immedietaly.
The font used for the webpage was Nunito, a Sans Serif typeface.
Due to the professional setting for the application no images were used in the project. Icons for the website were aquired from Font Awesome.
The application offers the features:
- Register and Log in as a User
- Create, edit and view Projects
- View a projects requirements
- Create, edit and delete Requirements that can be linked to a Project.
The website was designed to be a simple yet functional multipage site that could be used in a professional work setting.
The base template for the user interface was aquired from StartBootstrap. The demo used was SB Admin 2 which was adapted upon to meet the demands for the project.
Designed to be desktop first and to provide information in a intuitive and clean manner.
- Page
- Header
- Footer
- Menu
- Projects Page
- Project Card Modal
- Requirements Page
- Sign In Page
- Register Page
- Error Pages
The website was designed to have many features added in the future:
- Requirements Freeze Archive - To meet the demand of changing requirements and mitigating scope creep a freeze function could be added that could capture the Project and its requirements on a certain date. These could then not be changed but would also be available to view and compare.
- Testing Pages - Project and Requirements could be linked to Test Reports to prove that the Requirements had been met. Data for the reports could include dates, authors and links to documents.
- Admin Levels - As well as normal users different admin levels could be created where super admins could add others and allow partial functionality for others.
- Profile Page Information - Users and admins could get a profile page that displays the ownership of Projects and Requirements changed by said user.
- Much more Project, Requirement and Test Report Information
- At risk colour identification - If date deadline inserted notifications could be enable on the UI to flag risks and attract attentions by users.
- Start Bootstrap - Used as a template to adapt the design of the UI from.
- Datatables - JavaScript library used for a better functional and visually appealing table.
- Font Awesome - Used to acquire icons for the project.
- Draw.io - Used to create the wireframes for the project.
- pgAdmin4 - Used to create the ERD for the project. This tool was also used to aid in visually inspecting the SQL database for the project and the contained tables and columns
- Miguelgrinberg Blog - A blog online that provided in great detail information and a walkthrough on how to build a Flask project in VS Code. This provided a tutorial on different topics such as templates, Web Forms, User Management, Date/Time implementation and Ajax.
Continuous testing of the application was performed throughout its development period. The testing was performed primarily on Mobile Firefox although Google Chrome was also used.
For the HTML and CSS testing was done with Google Chrome and Firefox Development Tools.
For functionality testing of the JavaScript and Python/Flask backend a test group was used to provide feedback and find bugs.
Full CRUD was tested by adding, editing and deleting Project and Requirements. User access was also tested by logging out as a user and trying to do the same.
Different user profiles were created to test the register and log in and log out functionality.
The website performance was tested using Google Chrome Developer Tools Lighthouse feature.
For the webpage the Performance, Best Practices and SEO were 97, 96 and 90 respectively.
The Accessibility score was 76 which although not bad could be improved throughout the website.
https://jigsaw.w3.org/css-validator
There were no warning or errors in the CSS code file.
https://jshint.com
Due to the JavaScript file being extremely simple there were no errors in jshint. The warnings visable were due to jquery being used and could be ignored.
Python PEP8 standards were tested by installing the extension Pylint. This allowed for the easy visualisation of errors and warnings when working on the code.
Although not all warnings were got rid of the ones left were suggestions or Pylint not working fully as expected.
This project was developed in an environment with the tools:
- VS Code - IDE to develop and view the code/
- Sourcetree - User application to connect to Github.
- Github & Git - Version and Source Control to save the code and see the history.
- Firefox Web Browser - User to view the frontend application and debug the frontend code.
To replicate the development environment:
- Open VS Code and start a new project.
- Create a virtual environment by running the command "python3 -m venv venv".
- Activate the vitual environment with the command "source venv/bin/activate".
- Install Flask "pip install flask".
- Install Flask modules that will be wanted with "pip install FLASK-NAME". This can also be done throughout the project when a module is needed.
- Make a folder called app and inside folders called templates and static. This is where the main program and content will be found in the project.
- Create a python file with an appropiate name such as run.py. Run the command set FLASK_APP=NAME.py to create an environmental variable.
- Test out the functionality and instructions by running "flask run" and navigating to the provided url.
The project is deployed on Github:
To acquire the code:
- Log into Github
- Navigate to the project link
- On the project page click the Code button
- Download the zip of the code
- Open the project in an environment of your choice
Forking the repository
- Log into Github
- Navigate to the project link
- On the project page click the Fork button
- Clone or download the zip of the code
- Open the project in an environment of your choice
Cloning the repository
- Log into Github
- Navigate to the project link
- On the project page click the Code button
- Copy the HTTPS or SSH link as preferred
- Clone the project using the link with the tool of your choice (Git Terminal, Github Desktop, Sourcetree etc)
The website was deployed live using Heroku to host the backend and frontend into a working package.
To replicate:
- Sign up to Heroku and set up a Two Step Verification method.
- Create an app in Heroku.
- Set up the config vars in Heroku settings, this includes the IP, Port and link and password to a database.
- In Deploy in Heroku link the app to a profile and repository in Github.
- In Heroku in settings in Buildpack choose the Python language.
- In the project files run "pip freeze > requirements.txt" to create a file for Heroku to know what to install.
- In the project files create a file called Procfile and the command "web: python NAME.py". This will link to a dyno in Heroku that will run the app.
- Push the project in git, this will be pushed to Heroku simultaenously and will build in Heroku.
- Click open app to go to the live deployed website.
With special thanks to:
- Lauren-Nicole Popich - Mentor from the Code Institute who provided help throughout the project and was always available for support.
- Sarah Price - A colleague who suggested the idea for the project and helped produce the first Wireframes and ERD in rough draft form.
- Blog - The blog Miguelgrinberg Blog about building a Flask Webpage was greatly used for learning for the project. Especially to set up the system of Flask and its Flask Modules in VS Code.