| Live Project | Admin Panel |
| README | Project Board | Testing | Research | Credits |
Pixel To Page is a blog app designed to encourage, inspire and guide programmers in the use of bullet journals.
Developed as part of Code Institute Full Stack Software Develeoper Skills Bootcamp, Pixel To Page serves as my final individual assessment project to deliver a full stack application providing CRUD functionality to end users.
This README and associated documentation serve as both technical documentaion and a record of my own personal learning.
Pixel To Page has offered a learning opportunity in how to deliver a positive user experience as part of a full stack application.
As part of this project I set out to create a final deliverable that offered a complete experience for the end user that was enjoyable across all devices through responsivity, but also a had greater consideration of UX features that have a positive impact on accessibility.
As such my final product is slightly different to that of which I initially intended.
This is in part due to my learning more about accessibility and user experience and thus changing design to reflect this new knowledge, but more so the alterations have come through my learning as a developer.
Whilst implementing features I would have moments of realisation about how to more effectively use the feature, or how I could combine it with another approach in order to improve the user experience. As a result, this meant exploring many avenues of Django development that were not intended scope for this project, but I believe to be of great value to my learning and future as a developer.
This exploration has meant the implementation of many features that greatly increase the user experience, but at times have taken time from other areas of the project I wished to deliver upon in more detail, this documentation being a prime example. With this new found knowledge I believe I would be able to generate a much more concise plan for a full stack project with greater use of user stories that were reflective of feature sets and development steps.
Setting out to create a blog with a very specific intended audience I took to researching and sourcing inspiration from the conventions of both the Bullet Journal community as well as the Tech Community to establish some general conventions.
Taking these inspirations, I then began compiling basic ideas for color palette, potential layout and a list of features that would be beeneficial to the end user.
A brief bullet point list of the key objectives for Pixel To Page.
This includes learning outcomes, stakeholder requirements, personal goals and more.
- Fulfil the primary Learning Objectives as defined by Code Institute.
NOTE: Full details in the linked documentation. - Provide positive user experience across all devices
- Maintain a focus on accessibility for delivered project
- Document in detail the development and learning process
Following Agile Methodologies user stories were generated and compiled into a GitHub Project Board
Each story was assigned relevant labels for MoSCoW Prioritisation, Epic and Users
After ideation establish required prioritisation of tasks for MVP delivery.
MoSCoW Priority Color Key
| Color | Priority | MoSCoW Priority Description | Implementation % |
|---|---|---|---|
| 🟢 | Must Have | Absolutely essential elements that must be included at any cost. | Max 60% |
| 🟡 | Should Have | Important elements that should only be included with careful consideration. | Further 20% |
| 🟠| Could Have | Desirable elements that would ideally be included if resources allow. | Final 20% |
| 🔴 | Won't Have | Elements that are out-of-scope, unfeasible or actively counterproductive | None |
| ID | User Story | MoSCoW |
|---|---|---|
| #1 | As a User I can sign up or login so that I can engage with full site functionality. | 🟢 |
| #2 | As a Registered User, I can login to my profile page so that I can update my details and see previous activity. | 🟢 |
| #3 | As a Registered User, I can select notification preferences so that I can be alerted about relevant content. | 🟠|
| ID | User Story | MoSCoW |
|---|---|---|
| #4 | As a Site Admin, I can update my home page so that I can present users with the latest content and engage them using appropriate call to action functionality. | 🟢 |
| #5 | As a User, I can read the home page so that I can easily identify new and noteworthy content. | 🟢 |
| #6 | As a User, I can toggle theme so that I can have a more enjoyable experience | 🟡 |
| #7 | As a User, I can access the website using stored theme preferences so that I do not have to manually toggle each time | 🟠|
| ID | User Story | MoSCoW |
|---|---|---|
| #8 | As a Site Admin, I can update my about page so that users can access and view the content I share | 🟢 |
| #9 | As a User, I can access and read an bout page so that I can better understand the author and content | 🟢 |
| ID | User Story | MoSCoW |
|---|---|---|
| #10 | As a Site Admin, I can draft, post, update and delete blog posts so that I can share my content and update as necessary. | 🟢 |
| #11 | As a Site Admin, I can categorise my blog posts so that I can feature specific posts as necessary | 🟢 |
| #12 | As a User, I can view, filter and navigate a summary of blog posts so that I can access relevant content | 🟡 |
| #13 | As a User, I can read blog posts so that I can engage with relevant content. | 🟢 |
| #14 | As a Registered User, I can like & share blog posts so that I can easily find previously liked posts and share content with the wider community. | 🟠|
| #15 | As a User, I can share blog posts so that I can easily share content with the wider community. | 🟠|
| ID | User Story | MoSCoW |
|---|---|---|
| #16 | As a Site Admin, I can approve, deny and delete comments so that I can ensure all community engagement is appropriate and follows TOS. | 🟢 |
| #17 | As a Registered User, I can comment on blog posts so that I can contribute to the community and conversation. | 🟢 |
| #18 | As a User, I can read comments on blog posts so that I can read the ongoing conversations. | 🟢 |
| ID | User Story | MoSCoW |
|---|---|---|
| #19 | As a Site Admin, I can upload resources so that users can download for their own journal. | 🔴 |
| #20 | As a User, I can download resources so that I can use them to improve my own journal experience. | 🔴 |
| ID | User Story | MoSCoW |
|---|---|---|
| #21 | As a Site Admin, I can approve, deny and delete community posts so that I can ensure all community engagement is appropriate and follows TOS. | 🔴 |
| #22 | As a Registered User, I can upload my journal images so that I can share my ideas with the community and engage in feedback and conversation. | 🔴 |
Pixel To Page adheres to security requirements by taking advantage of already well established security procedures.
This includes the implementation of AllAuth and use of CSFR tokens.
AllAuth is a free, well established authentication package for Django.
Including AllAuth as part of this project allows users easy and familiar registration and associated features with the knowledge that their data is safe and secure.
Ensuring a positive user experience Pixel To Page makes use of various design features to negate potential issues for the user.
- Familiar registration user experience with AllAuth
- Navigation using conventional design, including a profile image
- Ability to create, edit and delete content through a responsive interface
- Alert and error messages providing feedback
- Auto scroll feature for ease of navigation
- Custom error pages with information and relevant links
CSRF (Cross-Site Request Forgery) tokens have been included as part of the project to prevent vulnerabilities to malicious attacks and ensure that only forms from trusted domains can be used to POST data back into the database.
The code below is included as part of the deployment process on this page.
For more information please consult the Django Documentation.
CSRF_TRUSTED_ORIGINS = [
"https://*.codeinstitute-ide.net",
"https://*.herokuapp.com"
]As part of the development process for Paper To Pixels it was important to understand and fully develop the architecture in advance in hopes of minimising potential issues during the PostgreSQL Database implementation avoid retrofitting requirements.
I used Lucid Chart to compile my Entity Relationship Diagram (ERD).
Within the ERD I identified each of the models and their relationships required for my MVP.
I have also included models that were part of my user stories for features of future scope for the project, and as such have given each table an appropriate label that corresponds to the MoSCoW Prioritisation.
After creating the ERD I exported a PNG with transparency which was then modified using Affinity Photo 2 and exported in WEBP format.
During development I gained a much better understanding of how to build a full stack project and how to effectively utilise my database models.
As a result of thise I have included a number of models that allow for input of data that can be utilised by the admin for the update of content on the home page without requiring access to the code. The intention is for these to be included within a front end for in the future, along with forms applicable to authors to generate post content.
My other database models have also been updated to include additional data for ease of usability and implementation of future scope features.
Initial ERD
Initially my wireframes had been designed within Figma.
Unfortunately, whether due to fault of my own or technical issues within Figma, my account had been reset to the default status thus remving the wireframes I had been using / modifying for the project.
I plan to attempt to recover these, but for the process of submission I chose to quickly recreate the basic wireframes within Affinity Photo 2 due to time constraint and a greater level of comfort and familiarity with the tools.
Affinity Photo 2
Desktop
Home
Home Footer
Category
Post Detail 
Post Comment
Tablet
Home
Category
Category Navbar
Post Detail
Mobile
Home Footer
Category Navbar & Footer
Post Detail
Through much deliberation, trial and error and sourcing of inspirational images and palettes, I finally chose this palette for a number of reasons.
Dark Theme - Winter Palette
| ID | Name | Type | CSS Variable | HSL | HEX |
|---|---|---|---|---|---|
| 1 | Seasalt | - | --color-text |
hsl(0, 0%, 98%) | #FAFAFA |
| 2 | Rich Black | - | --color-background |
hsl(229, 41%, 5%) | #070912 |
| 3 | Rich Black | - | --color-background-muted |
hsl(229, 41%, 10%) | #0F1324 |
| 4 | Celeste | - | --color-heading |
hsl(186, 91%, 87%) | #BFF6FC |
| 5 | Mauve | - | --color-accent |
hsl(251, 100%, 84%) | #BDAEFF |
Initial Unused Palette
My initial color palette before adding styling and opting to refine.
Variables had not yet been assigned and the inclusion of lch was present whilst researching color spaces.
| ID | Name | Type | CSS Variable | LCH | HSL | HEX |
|---|---|---|---|---|---|---|
| 1 | White | - | --color- |
lch(100% 0 0) | hsl(0, 0%, 100%) | #FFFFFF |
| 2 | Seasalt | - | --color- |
lch(98.27% 0 0) | hsl(0, 0%, 98%) | #FAFAFA |
| 3 | Celeste | - | --color- |
lch(93.26% 19.23 207.57) | hsl(186, 91%, 87%) | #BFF6FC |
| 4 | Mauve | - | --color- |
lch(74.65% 42.62 295.44) | hsl(251, 100%, 84%) | #BDAEFF |
| 5 | Prussian Blue | - | --color- |
lch(16.05% 15.32 257.06) | hsl(208, 49%, 16%) | #152A3D |
| 6 | Rich Black | - | --color- |
lch(6.14% 12.54 280.34) | hsl(229, 41%, 10%) | #0F1324 |
| 7 | Black | - | --color- |
lch(0% 0 0) | hsl(0, 0%, 0%) | #000000 |
| White | Seasalt | Celeste | Mauve | Prussian Blue |
Rich Black |
Black | |
|---|---|---|---|---|---|---|---|
| White | - | 🔴 1.04:1 | 🔴 1.17:1 | 🔴 1.96:1 | 🟢 14.68:1 | 🟢 18.43:1 | 🟢 21:1 |
| Seasalt | 🔴 1.04:1 | - | 🔴 1.13:1 | 🔴 1.88:1 | 🟢 14.06:1 | 🟢 17.66:1 | 🟢 20.11:1 |
| Celeste | 🔴 1.17:1 | 🔴 1.13:1 | - | 🔴 1.66:1 | 🟢 12.44:1 | 🟢 15.63:1 | 🟢 17.8:1 |
| Mauve | 🔴 1.96:1 | 🔴 1.88:1 | 🔴 1.66:1 | - | 🟢 7.45:1 | 🟢 9.36:1 | 🟢 10.66:1 |
| Prussian Blue | 🟢 14.68:1 | 🟢 14.06:1 | 🟢 12.44:1 | 🟢 7.45:1 | - | 🔴 1.25:1 | 🔴 1.43:1 |
| Rich Black | 🟢 18.43:1 | 🟢 17.66:1 | 🟢 15.63:1 | 🟢 9.36:1 | 🔴 1.25:1 | - | 🔴 1.13:1 |
| Black | 🟢 21:1 | 🟢 20.11:1 | 🟢 17.8:1 | 🟢 10.66:1 | 🔴 1.43:1 | 🔴 1.13:1 | - |
Preference & Inspiration
As Pixel To Page is intended to encourage programmers away from the screen to engage in creative tactile note taking, I drew inspiration from images I find to be beneficial for myself when seeking those creative motivations. As many of these images were landscape photography including mountains, lakes and other environments, I opted to also include the upcoming winter season as part of the initial theme for this project, with the intention of updating as the seasons change.
I used these images to extract a plethora of color palettes using Adobe's Color Theme From Image functionality and began to mix and match them according to my own preferences and contrast requirements.
Community Convention
As mentioned I opted to use the seasons as part of the selection process for the chosen palette, something that is very common among the bullet journal community. Continuing this approach and taking inspiration from the wider community I also chose to adopt a common convention of using more muted, pastel like tones which is popular, especially among Bullet Journal blogs. Although the specific approach for the websites is aimed toward programmers, I also opted to make the primary theme a dark theme, with the intention to implement an alternate light theme that would be more conventional to the bullet journal community.
Though HEX is a commonly used color space within programming, and one I am comfortable using after doing so for many years, I have opted to adopt a different approach for Pixel To Page and shall be using HSL. This decision has been made as a result of my learning throughout the Bootcamp, as well as much supplemental reading and learning.
Reading articles via daily.dev, particularly with regards to UX, UI, CSS, Front End and Accessibility, I began finding more information about recent changes and aditions available ans began to explore new posibilities opening up for developers in terms of styling and continued my research in hopes of learning more.
This brought me to the final decision of implementing HSL as my chosen color space, although I would like to pursue LCH in the future once I am more confident it is fully supported across all devices and broswers due to its increased color range and flexability.
- Colour Contrast Checker also has Chrome Extension
To corroborate the results from Colour Contrast Checker, each combination has also be checked using Adobe and WebAIM.
The table provides the contrast ratio score for each color combination used and a link to the WebAIM results page is also provided. I have also opted to include a key to quickly identify the pass rating of each color combination, which in this case due to the focus on accessiblity, has resulted in a full pass state for the intended combinations and no patial passes.
WCAG Color Contrast Score Key
| Pass All | Partial | Partial | Fail All | |
|---|---|---|---|---|
| Contrast Score | > 7:1 | > 4.5:1 | > 3:1 | < 3:1 |
| Color Key | 🟢 | 🟡 | 🟠| 🔴 |
| Text | Highlight | Accent | |
|---|---|---|---|
| Background | 🟢 19.03:1 | 🟢 16.84:1 | 🟢 10.08:1 |
| Background Muted | 🟢 17.66:1 | 🟢 15.63:1 | 🟢 9.36:1 |
I have opted to use clean sans-serif fonts as part of my design for both their aestetic appeal, especially as part of the tech community, but also due to their value as typefaces for accessibility.
- Righteous - Brand / Headings
- Josefin Sans - Primary Body
This section should be used to showcase the features of the final project.
This heading provides an overview of a general feature group, providing context and description.
Alert Messages
Upon user interaction immediate feedback messages are provided detailing the interaction.
As a consideration for accessibility these messages remain on screen until the user opts to remove them. This decision was made as result of learning more about how timed interactions cause issues for users with reduced motor function.
Post Category
As part of the post category page I chose to include all posts within cards that are fully responsive across devices.
At the top of the page is a responsive list that updates based upon categories within the database and will highlight the current page to the user identifying the categopry they are viewing.
Each card contains a featured image, which if not set for the post will default to the category image.
These images include alt text that can be input as part of the admin intercae to ensure accessibility is met.
Within the All Posts category page each card includes a direct link to the category beneath the image.
The title of the post directly links to the post detail page, as well as being able to use the read more button provided.
The post date is included for the user to ensure to ensure they can easily identify the post irder and find the latest most relevant content.
Comments
As part of the post detail page registered users are able to engage with the content and post comments.
This comment card includes the user profile image, which has a default if no image is provided.
The card includes the user's display name, but will revert to username if no display name is provided.
Upon clicking to edit a comment, the user will be automatically scrolled to the form field to make their desired changes.
Comments can be easily deleted but provide a confirmation modal to ensure no accidental changes occur.
Call To Action
As part of the main page there are various call to actions available.
These update automatically to reflect the user logged in status ensuring they are seeing relevant content.
Each aspect of the section can be easily updated within the admin panel, with the option of creating new cta / signup cards without publishing.
When wishing to activate a card, defensive design is implemented as part of the database to ensure that all other forms are deactivated upon activation of the desired card.
Edit Profile
As part of the design for user interaction, users are able to update their information that will be used to populate features across the site. Currently the profile image and username and bio for authors.
Form inputs have a focus color change to easily identify the current location being edited.
Featured Posts
The home page includes a featured post bootstrap carousel.
These posts can be easily changed out within the admin panel by using the featured status check as part of the post panel.
This ensure users are provided with the latest and most relevant content.
The carousel provides direct links to the post, detail about the title and category as well as a visual change for hover effect to indicate the availablity of the link to the user.
Footer
The footer includes a category section that updates with content as created in the admin panel.
Various other links have been provided including credits to sources for the project.
Social links provide access to my accounts on GitHub, Bluesky and LinkedIn for those wishing to conect.
The copyright date is auto populated with the current year, which will be updated to state 2024-current once 2025 arrives.
Home Page
The Home Page greets the user with a bright hero image section that introduces the site and links to a relevant page, in this case all posts. As with the call to action section, this hero section can be easily updated and toggled active within the admin panel.
Category links are present as part of the featured posts section to provide easy navigation, especially useful to mobile users who can quickly ;link through without the use of the hamburger menu.
Info
This info section has been included as a replacement for the about page that was initially intended as part of this project.
It offers the user an insight into the project and provides a link to relevant content. Currently it links to All Posts.
As with the hero and call to action, this can be easily updated from the admin panel.
Navbar
The navbar as standard provides the user with an easy to navigate menu that utilises effective styling to encourage the sign up process.
Upon login the navbar updates to reflect this status and provides the user with a previes of their profile image. This image can be updated easily using a Cloudinary upload, but defaults to a standard image if none is set.
Post Call To Action
As part of post detail view I have included a series of call to action elements.
Previous and next post links are provided in form of a post title with font-awesome angles icon. These update based upon the content within the database / on page and will navigate through all posts in a chronological order.
The author section provides some basic information about the post author. The intention for this is to replace the original about page and provide author profile pages as part of a future implementation. This data is populated from the profiles database model which includes a boolean field for author status. Upon implementation authors would gain the relevant access to created, update and delete posts within a front end form abd their user data would automatically populate this section of the page.
A simple set of category links are provided with a call to action prompt to encourage further engagement and reading of content.
The post comment count has been included here also as it helps to identify comments below being present without the need to scroll, thus encouraging further engagement and conversation.
Profile
The user profile page provides a clean interface for users to identify the data currently associated with their profile.
Links are provided to the edit page as well as other user interactions such as change pass word and sign out.
These pages would be updated in the future to also include author status, links to posts made/liked and any comments the user has made.
Scrollbar
On the post detail page I have opted to include a scrollbar.
This has been included to provide a positive user experience with interaction feedback allowing the user to easily identify how much of the content they have read / is remaining.
Sign In
The user sign in page as with other form inputs changes colour to provide feedback to the user.
Familiar responsive form elements are provided to ease the sign in process.
Information and a relevant link are also provided for users that may wish to sign up if they do not have an account to sign in currently.
Sign Out
As with other AllAuth intraction pages, users are provided with a familar form for positive user experience.
Upon sign out the user is returned to the home page with an alert message confirming the sign out has taken place.
Sign Up
The sign up page uses the same form design as other pages.
Upon form submission if any required elements are not met the user receives an updated message on screen on how to rectify the issue. This is provided as part of AllAuth and as such is a familiar inteface used across many websites.
Error
As part of defensive design pages have been included for the 404, 404 and 500 error messages.
Each page provides the user with information regarding the error and offers potential navigation options to other areas of the website.
-grey?logo=okta&logoColor=%23ffffff&color=%23ff6400){kind=icon}
The following deployment process uses guidelines and tools as provided by Code Institute.
- Code provided may refer to this specific project, or generic examples, requiring modification during your own deployment.
- This deployment process is version specific in many cases and does not default to the latest available version.
- If at any stage you are unable to access or perform the required steps, please consult relevant documentation / support for your platform / tool.
-
Login / Signup at GitHub.
-
Navigate to the Code Institute Full Template.
NOTE: Version used for this project last updated 2024-06-18 -
Click 'Use this template' followed by 'Create a new repository' in the drop-down menu.
-
Input the details for your repository.
- Repository Name (mandatory).
- Repository Description (optional).
- Ensure repo is set to 'Public'.
- Click 'Create repository'.
The IDE Workspace for this project has been created and hosted on Gitpod via Code Institute.
IMPORTANT Once you have your IDE Workspace in Gitpod, be sure to pin it to retain your virtual environment throughout the course of the project.
- Navigate to your new repository.
- Click on the 'Open' button also identified with the Gitpod icon.
- Navigate to Code Institute Gitpod.
- Click 'New Workspace' or press 'Ctrl + O'.
- Search for your project repository.
- Click 'Continue' or press 'Ctrl + Enter'.
To create a for of this project navigate the the top level of the Repo.
- Navigate to the 'Code* tab.
- Click the drop-down menu to the right of the 'Fork' button.
- Click '+ Create a new fork'.
- Using the forked repo in your GitHub account follow the deployment steps on this page.
To create a local clone of this project, navigate to the top level of the Repo.
- Navigate to the 'Code' tab.
- Click the drop-down to the right of the 'Code' button.
- Select you preferred cloing method HTTPS, SSH of GitHub CLI and copy the URL using the 'Copy' button.
- Open the bash terminal in your local workspace.
- Ensure your working directory is the correct location for your cloned repository.
- In the terminal execute command
git clone <URL>replacing URL with the one copied in step 3. - Press 'Enter' to clone the repository.
- Using the
pip3 install -r requirements.txtcommand install the project dependencies. - Using the deployment steps on this page setup your env.py file for Cloudinary and PostgreSQL.
- Add the env.py file to .gitignore and continue following deployment steps for Django.
All commands unless otherwise stated are performed within the IDE Workspace bash terminal.
- Install Django (using the latest 4.2 version).
pip3 install Django~=4.2.1
- Create the requirements.txt file in the root directory.
pip3 freeze --local > requirements.txt
- Create your Django project with an appropriate name.
django-admin startproject pixel_to_page .
- Important - ensure the
.is included at the end.
- Apply pre-built Django account migrations.
python3 manage.py migrate
- Run the server to test the install.
python3 manage.py runserver
- Click on 'Open in new browser'.
- A new browser tab should open containing the Django project.
- Copy the INVALID HTTP_HOST header displayed on this page
'8000-therickyroy-pixeltopage-pqpue43ydq5.ws.codeinstitute-ide.net'
- Navigate to settings.py in the IDE File Explorer.
- Update the
ALLOWED_HOSTSto include what was copied in the previous step and'.herokuapp.com'.
ALLOWED_HOSTS = ['8000-therickyroy-pixeltopage-pqpue43ydq5.ws.codeinstitute-ide.net',
'.herokuapp.com']- Immediately below the
ALLOWED_HOSTSadd the following code to ensure your IDE and Heroku pass CSRF verification.
CSRF_TRUSTED_ORIGINS = [
"https://*.codeinstitute-ide.net",
"https://*.herokuapp.com"
]- Create your app assigning an appropriate name in lowercase, in this example our app is blog.
- This will create a your new app folder & file structure.
python3 manage.py startapp blog
- Navigate to settings.py and add your new app to
INSTALLED_APPS
- Note: Other apps removed for brevity.
INSTALLED_APPS = [
...
'blog',
]- Save all files.
-
Navigate to your Heroku Dashboard
-
Create a new app.
- Click 'New'.
- Click 'Create new app' from the drop-down menu.
- Give it a unique name (for this project
pixel-to-page). - Select the appropriate region (for this project
Europe).
- Disabling collection of static files.
- Navigate to app settings .
- Click 'Reveal Config Vars'.
- Add a new Config var.
- Key =
DISABLE_COLLECTSTATIC - Value =
1
- Key =
- Click 'Add'.
- Install the web server gunicorn and freeze requirements.
pip3 install gunicorn~=20.1
pip3 freeze --local > requirements.txt
- Create a new Procfile in the root directory.
- IMPORTANT Ensure correct capitalisation of P for Heroku to correctly identify the file.
- Declare the process in Procfile.
web: gunicorn pixel-to-page.wsgi
- Add deployed app to allowed hosts.
- This stage was already covered by adding
'.herokuapp.com'in step 6 of the initial Django setup process.
- Connect to GitHub Repo.
- Navigate to Deploy tab.
- In Deployment method, select 'GitHub: Connect to GitHub'.
- Search for your project repo and click 'Connect'.
- Specify Eco Dynos for resource usage.
- Navigate to the Resources tab.
- Ensure your app is using Eco Dynos supplied as part of Code Institute (see LMS for further details).
- Remove any Postgres DB Add-ons (this should already be empty).
- Navigate to CI Database Maker.
- Input your email address and follow the instructions provided.
- Open the received email and copy your database URL.
- Install Database Packages & freeze the requirements.
pip3 install dj-database-url~=0.5 psycopg
pip3 freeze --local > requirements.txt
- Note: If you have not closed your workspace you can navigate to the previous command to freeze the requirements using the up arrow in the terminal.
-
In the root directory create an env.py file.
-
Add
env.pyto the .gitignore file.
- Note: This may already be added within the file.
- Import os library to env.py and set the environment variables pasting in the URL provided by in your CI Database Maker email.
import osos.environ["DATABASE_URL"] = "Paste in PostgreSQL database URL"- Add in a secret key.
os.environ["SECRET_KEY"] = "Make up your own randomSecretKey"- You can use a generator such as RandomKeygen to construct a secure key for you.
- IMPORTANT Be sure your key does not contain quotations that may conflict with your syntax.
In Heroku
- Navigate to the Settings > Config Vars
-
Add your secret key
- Key =
SECRET_KEY, - Value =
The secret hey generated in previous step
- Key =
-
Add your Database URL
- Key =
DATABASE_URL - Value =
The URL provided by the CI Database Maker
- Key =
In settings.py
- Update the file to include the following directly beneath
from pathlib import Path
import os
import dj_database_url
if os.path.isfile("env.py"):
import env- Remove the insecure secret key that was previously generated and replace with the following code
os.environ.get('SECRET_KEY')- Comment out the old Database section code
# DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
# }- Note: Highlight all code and use 'CTRL + /' (On Windows) to comment out all lines together
- Add new Databases section linking to the variable on Heroku
DATABASES = {
'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))
}-
Save all files.
-
Make your migrations.
python3 manage.py migrate
Cloudinary has been used as the hosting platform for static media files within this project.
If you do not have an account you can signup for free using your Email, Google Account or GitHub Account.
Before install, locate your API Enironment Variable for use in the next steps.
- Navigate to Dashboard > Product Environment Settings > API Keys
- Reveal the API Secret following the instructions provided.
In Heroku
- Copy and paste the data on this dashboard to Heroku as shown below.
- Key =
CLOUDINARY_URL - Value =
cloudinary://<your_api_key>:<your_api_secret>@cloudname
In IDE Workspace
- Install Cloudinary and freeze the requirements.
pip3 install dj3-cloudinary-storage~=0.0.6
pip3 install urllib3~=1.26.15
pip3 freeze --local > requirements.txt
- Add your Cloudinary API Enironment Variable to env.py replacing the generic information as necessary.
os.environ["CLOUDINARY_URL"] = "CLOUDINARY_URL=cloudinary://<your_api_key>:<your_api_secret>@cloudname"
In settings.py
- Add Cloudinary libraries to
INSTALLED_APPS
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
'cloudinary_storage',
'cloudinary',
...
]- Note: Order is important, and other apps have been removed for brevity.
- Setup your static files.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')- Link file to the templates directory in Herkou
- NOTE: Place beneath
BASE_DIRline
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')- Change the templates directory to
TEMPLATES_DIR
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATES_DIR],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]In IDE File Explorer or Terminal
- Create 3 mow folders in the root directory.
- media
- static
- templates
-
Save all files
-
Install whitenoise and freeze the requirements
pip3 install whitenoise~=5.3.0
pip3 freeze --local > requirements.txt
- Wire up whitenoise to Django's MIDDLEWARE in
settings.py
'whitenoise.middleware.WhiteNoiseMiddleware',
- Note:
Whitenoise Middlewaremust be placed directly after theDjango SecurityMiddleware
- IMPORTANT
Set DEBUG in
settings.pyto False (line 31 in this project)
- Add all Changes
git add .
- Confirm all changes have been stged
git status
- Add your commit message
git commit -m "add: install django, project, blog and deployment requirements"
- Push to the remote repo
git push
-
Navigate to your Heroku Dashboard
-
Enabling collection of static files.
- Navigate to app settings .
- Click X to delete the
DISABLE_COLLECTSTATICconfig.
- Deploy Tab > Manual Deploy
- Choose
mainin the branch to deploy and clickDeploy Branch
This testing section contains a brief overview of essential regarding pass and compliance status.
All additional information regarding manual testing can be found within Testing & Validation.
- Content Forest Image Alt Test Checker
- Lighthouse Audit
- SEOptimer - Image ALt Tag Checker
- Toptal - Colorblind Web Page Filter
- WAVE - Web Accessibility Evaluation Tool
I have recorded these bugs, their solution status as well as documenting additional details in Testing & Validation.
These accreditations are to documentation and resource providers from which much supplemental learning has taken place, individual source credits can be found in appendix document Credits.
- Bootstrap
- Code Institute - LMS
- Codepen
- CSS Tricks
- Daily.Dev
- Django
- GitHub
- Logrocket
- Medium
- Mozilla - MDN
- Perplexity
- Stack Overflow
- W3C
- W3Schools
-
Freepik - Following Attributation Policy
-
General Pedro Art - Freelance Artist Used For Numerous Comission Pieces
-
Unsplash - Following Attribution Policy
Additional documentation included as part of the project.
- Additional Research - Personal supplemental learning & research
- Learning Objectives - Provided by Code Institute
- Media Credits - Specific source credit for all media within the project
- Testing & Validation - Documented testing, validation & bugs
Julia, for all her support and being kind enough to proof read and pickup those typos that slip through the net.
All Code Institute staff for providing ample learning opportunities allowing for the completition of this project, as well as my first steps into a career as a software developer. A particular thank you for the support, inspiration, guidance and the occasional nudge in the right direction for debugging.
- Amy Richardson - Learning Facilitator
- Mark Briscoe - Subject Matter Expert
- John Rearden - Coding Coach
- Robyn de Brún - Careers Coaching Executive
- Roo MacArthud - Coding Coach
My fellow bootcamp students for their support.
Most of all though a huge thank you to Rhiannon, for everything throughout the whole course and beyond.
For putting up with my long days and late nights, for listening to my rubber ducking even though it sounded like complete jibberish and for making sure I actually took the odd break.
Without her this would not have been possible.