A Full Stack website allowing users to manage a common dataset documenting Bristol Graffiti Art. This project utilizes the Flask, Jinja, Python, JavaScript, MongoDB & MD Bootstrap technologies.
Bristol Blackbook was built from the idea of creating a database for documenting the urban artform graffiti, found on the streets of Bristol city.
Often most artists upload these images to Instagram under private accounts, restricted for anonymity. This means most people cannot see them, so I wanted to create a website that maintained this idea of user privacy and was not associated with any social media platforms. This allows users to anonymously view and contribute to the content.
I chose the name Bristol Blackbook as the blackbook is famously where graffiti writers practice their work, and often they collect the tags and works of other graffiti writers in these books when they meet others. For a graffiti writer, blackbooks are a good way of personally archiving a section of their history in graffiti, they capture the artists works permanently, their progression, and they often hold the memory of all artists that have contributed to the book.
There could be potantially multiple target markets for this website including:
The site is built to be inclusive, meaning all users have the potential to gain value from having access to the site.
The purpose and goals of this project are to:
I designed a logo for the site using the font ‘Sprayerz’ ontop of a spray type pattern, created in GIMP.
Fitting with the name Blackbook, I decided to design the site with a black background. I also implemented a pink/purple color scheme, taking inpiration from one of the Materialize gradient buttons used on the main welcome page and works page for the Enter & Sort By buttons.
For the main title font used within this project, I used a free font named ‘Sprayerz’, being imported from the font folder within static/. The font I used for the main site body including the navbar was ‘Kanit’, supplied by Google Fonts. I used ‘Anton’, a tall thicker font for the page headers, and then ‘Archivo Black’ for any info displayed.
For this project, I created a number of wireframes for the layout of different pages.
The diagram below outlines the structure and arcitecture of my database. Each seperate entity corresponds to a collection within my database. The population of entity parameters by other entity parameters is clearly displayed using arrows. These relational populations are either automatic or require the user to select from a list of values fed from the other collection.
Within MongoDB, I only had to create the empty collections - all data was entered and created on the frontend of the website.
This project was designed using an agile approach, utilising a Kanban board to track my development progress throughout the build. You can view the board I created using Trello here.
When users visit the sites main index page (/), they are taken to a landing page displaying information about the sites main purpose and how to contribute. From this page, users can either click an Enter button, or can use the navbar to move through the site further.
This page acts as the home page, displaying all available works uploaded to the database. The page displays 9 works per page, pagination pages and links are clearly visible at the bottom of the images panels. At the top, users are able to search works according to the artist name. Users are also able to filter results and order them in several different ways by clicking the Order By dropdown button in the top right. Each work is rendered as a medium sized image panel, which displays information for the work when hovered.
These pages display the logo with a form below allowing users to enter both a username and password. They allow users to either create a new account or login to an existing one by entering these unique values. Registration requires the user to enter their password twice. The application will run validation and authentication on passwords and usernames for character and invalid or existing data checks.
When a user logs into their account, they will be directed to their own profile page. This will display their name, as well as any content that have contributed to the site in a concise manner. They will also have the option to delete their account or any personally created content.
The logout route link is displayed in the top right corner of the navbar when users are logged into an account. Clicking logout will remove ‘user’ from session cookies, effectively logging them out.
This page allows users to upload a new work to the database. It allows users to first select whether the work is by an artist or crew, as this will modify the content accordingly. Users can then select from a list of existing Artists or Crews respectively, before selecting the applicable Style and Type of the work, as well as the year painted and image URL. Each of these inputs either take data directly from certain collections within the database, or allow users to input their own values with respective validation applied. All submitted data is then saved in the works collection and displayed on the site accordingly.
When a user clicks on a work, they will be taken to a dedicated page allowing them to view the image in full size without any clipping. This page also displays the information relating to the work object:- Artst, Style, Type, and Year Painted. If the user uploaded the work or is the admin, they will be shown buttons at the very bottom allowing them to edit or delete the object.
A work can be edited via the Edit Work page if the data assigned to the work object needs to be updated. A particular user only has access to edit a work if they were the one to originally upload it to the database. The admin can edit any work object.
Users can easily add artists to the database by navigating to this page and inputting an artist name, their respective crews, and submitting. Validation will check for character input as well as existing data in the Artists collection.
The Artists page displays all artists uploaded to the database. Clicking on any of these will take the user to the artist dedicated page. There is also an ‘Add Artist’ button that will direct users to that page if they are logged in.
Upon clicking an artists name, they will be taken to the artists individual page. This will display any information pertaining to the selected artist object, including any crew associations that artist may have, along with all works in their name. Please note when clicking on the artist name on a crew work, users will be taken to the crew page instead. If the user uploaded the artist or is the admin, they will be shown buttons at the very bottom allowing them to edit or delete the object.
An artist can be edited via the Edit Artist page if the data assigned to the artist object needs to be updated. A particular user only has access to edit an artist if they were the one to originally upload them to the database. The admin can edit any artist object.
Users are able to add new crews to the database by navigating to this page and inputting the crew name and image. Validation will check for character input as well as existing data in the Crews collection.
The Crews page displays all crews uploaded to the database, along with their main crew image. They are displayed in large card panels, breaking up the layout of the site and allowing the user to see the crew image clearly. Clicking one of these crew panels takes the user to the individual Crew page.
The Crew page shows all associated data for the selected crew object. Underneath the crew image, each artist associated with the crew is displayed. Below this, each work with the crew listed as the main artist is also displayed. Clicking either an artist name or work will redirect the user to its respective page. If the user uploaded the crew or is the admin, they will be shown buttons at the very bottom allowing them to edit or delete the object.
A crew can be edited via the Edit Crew page if the data assigned to the crew object needs to be updated. A particular user only has access to edit a crew if they were the one to originally upload it to the database. The admin can edit any crew object.
The admin is able to add new styles to the database by navigating to this page and inputting the style name and image. Only the admin is able to add styles as users should not have a reason to add any styles to the database. Validation will check for character input as well as existing data in the Styles collection.
The Styles page displays all of the different styles of graffiti. Users can upload works and correctly categorise them under a respective styles. These are also displayed in large card panels, further breaking up the layout of the site and allowing the user to see the style image clearly. Clicking one of these style panels takes the user to the individual Style page.
The Style page shows all associated data for the selected style object. Underneath the style image, each work executed and categorised within this style is displayed. Clicking any of these works will redirect the user to its respective page. The admin will be shown buttons at the very bottom allowing them to edit or delete the object.
A style can be edited by the admin via the Edit Style page. No normal users are allowed to do this.
The admin is able to add new types to the database by navigating to this page and inputting the type name and image. Validation will check for character input as well as existing data in the Types collection.
The Types page displays all of the different types of graffiti there can be. Users can upload works and correctly categorise them under their respective type, for example an individual work can be by the same artist in the same style, but may be on a freight train as apposed to on a legal wall. Each type is also displayed in large card panels, further breaking up the layout of the site and allowing the user to see the type image clearly. Clicking one of these type panels takes the user to the individual Type page.
The Type page shows all associated data for the selected type object. Underneath the type image, each work executed and categorised of this type is displayed. Clicking any of these works will redirect the user to its respective page. The admin will be shown buttons at the very bottom allowing them to edit or delete the object.
A type can be edited by the admin via the Edit Type page. No normal users are allowed to do this.
The admin panel facilitates the ability for the site administrator to easily delete any user in the database if they violate the correct use of the website. The page also displays buttons allowing for Styles or Types to be added to the database. All other content edit/delete admin privileges did not need to be included here as they are accessible across the site when logged into the admin account.
Each page contains the header which has a background image filling the entire width of the screen and extending down from the top of the window 300px in height. At the top sits the navbar and in the center of the header there is a black bordered box used as the title logo containing the text Bristol Blackbook. This box has a gradient border fading from white to black, and the text is underlined with a gradient matching the purple colour scheme for the entire site. The bottom of the header background image also has a gradient fading to black, allowing the image to blend with the body background effectively.
Due to the header, each page across the application naturally also contains the full width navbar at the very top of the window, facilitating effortless navigation across the site. This navbar sits at the very top of the header and has a black background with 70% opacity, allowing for the header image to be seen behind. The main logo is displayed in the far left, followed by page links for Home, Artists, Crews, Styles and Types, and on the far right sits the Login and Register page links. The content of the navbar changes when users are logged into an account. On the left additional links of New Upload, Add Artist and Add Crew are displayed, and the far right links are both entirely swapped to display the Profile and Logout route links. The navbar is also responsive, switching to a collapsable hamburger type menu on tablet and mobile devices. This works well due to the length of the links when logged in.
Each page has a full width footer at the bottom of the window, containing social media links and copyright information.
In case a user encounters a 404 or 500 error, they will be redirected to this page. It explains there was an issue and allows users to click to go back home.
I want to create a page that lists each of the shops in Bristol that sell decent spray paint. I will include their name, location, and opening times, as well as any known deals available, ontop of listing the general price range for each brand stocked.
The ability for users to grade each work on a 5 star rating system would ultimately grant the site owner a deeper level of insight into the users of their site. This would allow not only the site owner to have additional data on its audience, but other users will benefit from this feature as it will display the opinion and feedback of other fellow site users. Perhaps the most important aspect of this feature however is that the original uploader or even artist can benefit from these types of statistics by seeing the direct user rating of each created work.
Originally Disqus was used as a comment secion, however it was removed as I would like to create my own comments section in the future. This will allow site users to comment on content under their own usernames with their created account without any additional registration as seen with Disqus.
HTML5 is a Hyper Text Markup Language. Roughly 16% of my code was the HTML file index.html as it was used to create the structured content and elements essential to build the game.
CSS is a Cascading Style Sheet and was implemented via the styles.css file. All of the visible HTML content was positioned and styled using this language, making up roughly 24% of the entire code.
ECMAScript 6 - ECMAScript 2015, otherwise known as JavaScript 6, was used to hide the preloader upon page load.
Python is a programming language that was used to build the functionality of this project.
Flask is a Python microframework, used to create routes and template interactivity with Jinja.
Jinja is a templating engine for Python used with Flask to render all HTML data and content within this project.
Werkzeug is used with Flask to secure user authentication through password hashing.
PyMongo is a distribution of Python used to interact with the MongoDB database.
This was used to paginate the works on the main works page.
This was used to create and parse ObjectID’s from the MongoDB database.
Material Design Bootstrap is a free open source CSS framework, combining styles from Material Design with the main functionality of Bootsptrap. I used MDB to fill the site with boilerplate content when building the functionality, but it was also used to create responsiveness.
Font Awesome 5.8.2 was used for icons across the site.
Most of the fonts used within this project were provided by the Google Fonts API. The fonts used were ‘Anton’ ‘Kanit’, and ‘Archivo Black’.
Atlas is the cloud hosted version of MongoDB’s database service. This was used as my database for the project.
Visual Studio Code was the Integrated Development Environment (IDE) used to write the code for this project.
The Chrome DevTools was used for live editing and diagnosing problems. I also ran lots of auditing and testing using built in tools such as Sources, Lighthouse and Coverage.
The version control used in this project was Git, alongside GitHub.
This repository was hosted using GitHub with Git version control.
GNU Image Manipulation Program (GIMP) was used to create the logo and favicon website icon.
My web application was deployed online using Heroku.
Used to create the wireframes for this project.
Used to create the entity relationship diagram for this project.
DevTools Lighthouse - I ran extensive testing with the lighthouse tool. Any pages that did not return green 90+ scores in each area were worked on to solve issues that could be addressed. Some issues included image sizes and redundant code in Bootstrap files.
HTML Validator - All code passed except for a few duplicate IDs and warnings on external code. I was able to discover and fix a duplicate anchor link bug using this validator.
CSS Validator - All code passes this validator with no errors. Only warnings on external code from MDB.
JavaScript Validator - All code passed with no errors.
Python PEP8 Validator - Most of my code was python based. I ran my code through the PEP8 validator and made sure no issues were raised.
In place of unit testing my code, I manually tested that all site features and routes work as expected without error. Through the following tests, I demonstrate that the application has full CRUD functionality available from the frontend.
This project was automatically deployed to Heroku from my GitHub repository. To do this, first I created my repository containing my .gitignore file set to ignore my virtual environment and env.py files, then followed these steps:
Within the IDE’s terminal window, create a requirements.txt file by typing pip3 freeze —local > requirements.txt, and similarly create a Procfile by typing python app.py > Procfile.
Login or sign up for a new account on Heroku, then click New > Create New App from your dashboard.
Enter a name for your app and select the correct region before pressing Create App.
Select the Deploy tab and then click on the GitHub button under Deployment method.
Type your repository name in the search box next to the dropdown box displaying your GitHub account name. When the repository appears, click Connect.
In the Settings tab, under the Config Vars section, click the Reveal Config Vars button.
Enter the key value pairs as found in your env.py file as such:
Select the Deploy tabe again and click Enable Automatic Deploys under the Automatic Deploys section. Below this is the Manual Deploy section. Select your Master branch and click Deploy Branch.
Your app will now be built, and when its completed you should see the message “Your app was successfully deployed”. You can click View to launch the deployed app.
If you would like to run this code locally on your own machine, follow these steps:
First open your IDE and navigate to the working directory you want to use.
You then need to create a virtual environment to install all dependencies in a sandbox. To do this using venv use the following code:
When your virtual environment is created you need to activate it with the following code:
Follow this link to the repository for Bristol Blackbook.
In the top corner next to the About section, click the Code button with the downwards facing arrow icons.
Under the Clone section, make sure the HTTPS tab is highlighted, and copy the link displayed to your clipboard. It should look like this:
Open Git Bash in your IDE.
Then type into the terminal window git clone {URL} and replace the {URL} with the link copied from the repository page.
Upon hitting Enter the repository will be cloned into your current working directory.
To then remove the origin link to this repository from your IDE, type git remote rm origin.
Alternatively, you can download the repository directly as a compressed ZIP folder from the Code dropdown box, underneath the Clone section. Unpack this ZIP folder into your virtual environment location.
When the project is successfully cloned or downloaded and opened in the virtual environment, you need to install any dependancies and requirements by typing pip3 install -r requirements.txt into your IDE’s terminal window.
You next need to create an env.py file to store your environment variables. For this project, they are:
Then create a .gitignore file, and include this env.py file inside it to ensure your environment variables are never published publically by being pushing to GitHub.
You are now ready run this project and push any modifications to your own repository. To run, type into the terminal python app.py.
To read more about cloning repositories, you can read Cloning a repository.
Code for the preloader was taken from here - https://bootsnipp.com/snippets/GaeVl
Code for the pagination was taken from this guide - https://gist.github.com/mozillazg/69fb40067ae6d80386e10e105e6803c9
Small parts of code were re-used from the original Task Manager project for the Data Centric module.
All additional code was my own.
Most images were taken from the internet and are not my own. I asked permission to use most of the images from friends accounts.
I would like to thank my mentor Ignatius for the time he has spent with me going over this project. I would also like to thank all students that offered advice, all people who supported me in any way during the project, and all friends that took the time to look at the site during development.