Owl Nook

Overview

What is this website for?

The blog if for the user to find all kinds of information in one convenient place as well as share tips and funny things to the general internet.

What does it do?

Reddit type blog full of all kinds of posts. This includes news, tips and posts just for laughs from memes to your next book to your next cocktail party type drinks. Users can posts or just browse what other people have posted. Unregistered users have very little access to content nad must join to view the entire post.

How does it work

The website is going to be blog type layout. For those users who are there just to browse can expand on the post they are interested in but they will need to have an account to view the content. They can also save posts to read later. For those who love to share content they also need to have an account and can create posts and add photos at their own convenience. The website is built using the Django framework to handle creating user accounts and managing the website. The Postgres database is used to store general user data so that they can access their information later.

👉 Live Website 🖥️

👉 GitHub Repository

UX & UI design

User Stories

Role	Summary	Feature
ADMIN	approve comments	filter out objectionable comments
USER	register an account	comment, like and view full content
USER	leave comments on a post	be involved in the conversion
USER	upvote and downvote posts	interact with content
USER	save posts	access content easily at my own convenience
USER	open posts	read full text
USER	view the date/time of an individual post	see which content is most up to date/ or not.
USER	add categories to post	can get to the topics I want
USER	filter post	control what content i see first
USER	follow a user	easily see their posts
USER / ADMIN	view the number of likes on each post	see which is the most popular or viral
USER / ADMIN	create posts	post blog content
USER / ADMIN	view comments on an individual posts	read the conversation
USER / ADMIN	create draft posts	finish writing the content later

The Agile tool of choice to plan and manage my work is Trello. The workflow is illustrated here 👈

Design

Wireframes

Wireframes were created using Balsamiq Wireframes. The website design was inspired by the the Medium, Reddit and Philosophy template

The website design was based on a mobile first design and based on the features from the user stories. The website logo is to be fixed at the top right of the page and the bottom left of the footer. All register/login buttons will be in the header, fixed at the top right corner of the device.

📱 Mobile Wireframes

Click here for mobile pdf versions 👈

Homepage

The homepage is meant to be simple and allows the user to view incoming posts straight away wether they are a new user or a returning user. New posts are displayed large and clearly on at the top of the page. The featured image of the blog will be large and the title with other details displayed over it. Older posts are show underneath in smaller cards with the featured image on the left content and titles on the right. The page will infinitely scroll until the first post.
Blog post

The blog post page will have a centered title and the user will be able to see the author of the post easily. There will be a featured image represented by the blank image and the content below it. Registered users will be able to rate and post on comments
Category

Each blog post will have a category or topic that is assigned by the author of the post (category is displayed by the button under the content on blog post) When the user clicks on the button they are redirected to the category page where they will be able to view all posts in that category. Again the page will infinitely scroll.
About us

Pages that include information about Owl Nook, the legal pages and privacy pages will be based on this template.
Forms: Contact Us, Sign up, Login

All the forms wil be based on these templates using the appropriate for each. Ideally they will fill the entire screen and there should be no need to scroll vertically or horizontally.

📱 Tablet Wireframes

Click here for tablet pdf versions 👈

The tablet wireframes are very similar to the mobile wireframes with minor modifications the content and elements to fit the screen size.

🖥️ Desktop Wireframes

Click here for Desktop pdf versions 👈

The desktop wireframes are very similar to the tablet wireframes with minor modifications the content and elements to fit the screen size. The footer will be constantly displayed as the user scrolls including the categories on the right side of the page.

Colour Scheme

The colour scheme was generated randomly using the coolors generator. I wanted it to be a dark mode theme. Initially the generator started with 5 colours but they were too many. I reduced it to three (navy, coral and grey). When I began creating the mockups, the grey did not have enough contrast with the background, particularly with small text. As a result I added white to the colour palette.

The components and mockups were made using Figma. The components were generated from Creatt Studios wireframe kit. When I began creating the mockups the colour scheme was more or less the same. some elements like the accent colours were quite distracting. For example the horizontal rule under the blog title. I decreased the transparency so that to help breakup text and sections but without distracting the user from reading the content. the image below will show the same colours used originally by with varying degrees of transparency reducing by 20% each time.

Click here for pdf version 👈

Typography

The font used for headings and content text is Poppins, with a backup font of sans serif. The nature of the website means that there are sections where there will be a lot of text. Poppins is a font that looks good in large and small text and, the user can also easily distinguish letters. Depending on what the user posts, wether it be italic text for quotes, or title, The entire Poppins family of fonts and font weights will be available to the user.

Click here for pdf version 👈

Imagery

Blog images will be posted by a user. The user must post an image when posting a blog, otherwise a default image will be used. The default image is a woman sitting typing on a laptop on a ceramic desk.

Buttons and button groups

Buttons and any other button groups will be based on this template below. to ensure consistent formatting when the scope of the project increases.

Click here for pdf version 👈

Content Blocks

Content blocks will be derived from the following template even when the scope of the project increases.

Click here for pdf version 👈

Form elements

Form elements for the blog will be based in template below, This includes text input, textarea and checkboxes

Click here for pdf version 👈

Other elements and reference components

The following items were used for reference to aid creation of components for Owl Nook website.

Mockups

Links will open on the Figma website and no login is required.

Mobile wireframes 👈

Tablet wireframes 👈

Desktop wireframes 👈

Interactive prototype

The prototypes for tablet and mobile are not shown as they are identical to the desktop prototype. To interact with the prototype, click the play button on the top right corner of the screen as shown below 👇

This will allow you to view the flow of the website and some of the interactions with the buttons.

Desktop prototype 👈

Database

Conceptual ERD

The database for this project began a conceptual ERD to show the relationship between each entity. Each user entity that is created either be an admin or regular member. If the user is an administrator, they have permission to add, edit or delete the category names. The normal user will only have permission to read the category and assign it to a blog post.

Each user can create a blog post entity, a comment and a reading list to save a blog post to read at their convenience.

Click here for pdf version 👈

Physical ERD model

The physical ERD model will illustrate how the entities and their information will be added to the database. I will be using crow foot notation to demonstrate the relationships.

Each user entity has a User_ID attribute as the primary key. It will be used as the foreign key in blog post and whose attribute is Author.
User_ID attribute will also be used be used as the foreign key Member attribute in the Comment entity.
Each category has a Category_ID attribute as the primary key. It will be used as the foreign key in blog post and whose attribute is Category.
Each blog post has a Blog_Post_ID attribute as the primary key. It will be used as the foreign key in blog post and whose attribute is Category.
Blog_Post_ID attribute will also be used be used as the foreign key Blog_post attribute in the reading list entity.

Click here for pdf version 👈

ERD Model during development

During development, The custom user model was omitted from the project to due lack of form validation. Extensive research will need to be done to be able to effectively implement this feature at a later date. For the sake of submission I opted to use the all auth user model django's model instead.

The reading list model was removed from the project and instead was implemented by adding a new bookmark field in the blog post entity.

Existing Features

Common Features Across All Pages

Links
- Login button for returning users is clickable and highlighted, available on buttons and are usually coral for buttons and underlined in text (dedicated button removed for mobile to conserve space)
- All links are clickable and highlighted when hover over, with exception to user, write new blog, navbar search button and bookmark buttons for mobiles, tablets and desktops.
- Register button for new users available on all pages (changed to get started button on mobile for mobile devices)
Navigation bar
- Nav bar is consistent across all devices and pages.
- New users can clearly make a new account from the header
- Returning users can login into their account via button
- Search bar is located in header for tablets and desktop devices
- Logo is large and clear, showing the website name
- Search bar also available via side widgets on tablets and desktops.
- Search bar available via hamburger button for mobiles devices
Side Widgets
Search widget contains search bar for user to search for post on website
Categories widget contains current categories are are clickable to show related posts.

Specific to Pages

Features Left to Implement

Website footer for social media links and help pages for user
User to be able to filter posts by date or popularity.
User profile page where user can choose their own avatar image and add a bibliography
Author bibliography details on post detail page
Logged in user can follow other users to later can notified if they make a new post
Logged in user can attach multiple categories to their posts
All users can create shareable page links to blog post to share with their friends
When user adds a bookmark, a comment, or like a page, page update data without reloading
User can have multiple bookmark lists and be able to name them
Scroll to top button
Currently the comments will show all the comments on the page, feature to load a few comments at a time

Technologies Used

Languages used

HTML - Add content and formatting to web page.
CSS - Add styling and colours to web page.
JavaScript - Add interactive features to web page
Python - Used to handle user input and get data back to user.

Frameworks, Libraries and Programs Used

Visual Studio Code - Source-code editor optimised for debugging, testing, syntax highlighting and extension support
Git - used to allow for tracking of any changes in the code and for the version control.
Github - used to host the project files
Heroku - used to deploy web application
Postgres - used as the DBMS to store user profile data and hosted on Heroku
Balsamiq Wireframes - used to create wireframes
Figma - used to create mockups and prototypes
Creatt Studios - component template to illustrate mockups
Google Sheets - Tabulate user stories
Zapier - Automate process of adding user stories from google sheets to Trello
Trello - Agile tool of choice to manage and plan web app.
MindNode - app used to draw mind maps to show entities and their attributes.
Lucid Chart - web app use to illustrated database schema.
Canva - webapp used to design logo and favicon.
Django - Python web framework to create web application and provide security to users.
Cloudinary - Cloud hosting service
Fontawesome - to insert icons in the website to make site more visually appealing and easy to navigate.
Favicon.io - used to generate favicon to webpage
Google Fonts - used to import 'Poppins' fonts in the style.css stylesheet.
TinyPNG - used to reduce resolution of images
Bootstrap - Used for the responsive layout as well as custom components such as image carousel, navigation bar, footer, cards, and collapse element.
jquery - Used in some of the clickable elements such as collapsible 'hamburger' nav bar and collapse element.
popper.js - Used in some of the clickable elements such as collapsible 'hamburger' navbar and collapse element.
Waypoint - Used ad infinite scrolling function to posts
TinyMCE - WYSIWYG text editor

Testing

Automated testing was carried out using Katalon

Tests can be found here 👈

I used live testing and recorded the interaction. I began by testing the links on the home page as an anonymous user. Test if i am able to access restricted content: and found the following

Limited access to post detail text. I am restricted to a few characters and prompted to login to view the rest
Bookmark, comments and like/dislike is functionality is disabled
Get started/login/register links direct to correct pages
Hard coding add post page, delete article, edit article, user draft, user bookmark - I am redirected to the login page

As a registered user I attempted the same steps as as anonymous user and I attempted to access the following content

I am able to log in to my account and I have access to article content text
Add bookmark button is enabled
Attempting to view empty bookmarks I am told my list is empty and prompted to add articles
Add bookmark button is clicked on an article and is added to my list
Like/unlike buttons update page
Test comment post by adding content
I have access to add posts or drafts, edit posts, add categories, delete my own posts from drafts, or article page (if I am author of page)
I attempted to hard code add posts or drafts, edit posts, add categories, delete my own posts from drafts, or article page (if I am author of page) urls of another user. I am denied access to other user's content.

Bugs

Form validation fails when user logs in, attempts to change password from profile or when user creates duplicate slugs due to None type value being returned.
New categories added by user on frontend are not searchable via search bar on front end - Fixed, template did not account for empty search dictionary
Not null at category - integrity error -> Fixed-default category was not saved in database, on add post or edit post submission, if user does not set a category this error was received.
attribute error when changing status of published post to draft -> Fixed redirect lazy to home page after changing blog status, rather than returning to post detail page
Waypoints infinite scroll renders duplicate posts when paginating with class based view pagination. -> Fixed - defined pagination function and page render manually
Jquery id selector won't input html onto add post + edit post page -> Fixed - used javascript syntax
TypeError None type object being returned after comment post. No get data is being requested -> Fixed by returning previous page
HTTP404 - django attempts to input slug of a drafted post. after submission. -> Fixed - reverse lazy to post drafts page after posting blog draft
Other bugs in trello here 👈

Python Validation

python validator Pep8

Blog views.py

Line break warning before operator warnings on line 272 and 273

Rest of python files

Pass

CSS3 validator

css validator W3

Base css

CSS Value error has now been fixed
Warnings have not been addressed

Blog css

Passed validation

HTML5 Validator

Common Errors + warnings
Type attribute warning on style element has not been fixed
Type attribute warning on JavaScript sources element has been fixed
Cross origin attribute error has been fixed
hr element error in ul has been fixed
img elements with no alternative text errors have been fixed

Home Page

Errors above are now fixed

Articles Page

Errors and warnings above are now fixed

Edit Profile Page

Both CSS error not fixed, code is injected from a CDN link
Type attribute warning on style element has not been fixed
!DOCTYPE html value exists on page
Rest of errors have been fixed

Bookmarks Page

CSS errors not fixed, code is injected from a CDN link
Type attribute warning on style element has not been fixed

Compatibility Testing

Browser Compatibility

Screen size\Browser	Safari	Opera	Microsoft Edge	Chrome	Firefox	Internet Explorer
Mobile	✔️	Not Tested	Not Tested.	✔️	✔️	Not Tested
Desktop	✔️	Not Tested.	Not Tested.	✔️	✔️	Not Tested
Tablet	✔️	Not Tested.	Not Tested.	✔️	✔️	Not Tested

OS Compatibility was tested on iOS 14.5.1, MacOS Catalina, iPadOS 14.5 It is yet to be tested on Unix, Linux, Windows or Solaris Operating Systems.
The devices used in this testing include MacBook Pro, iPad Pro, iPhone 12 Pro Max, iPhone 7 Plus, Samsung Galaxy S10
The website was exhaustively tested for responsiveness on Chrome DevTools. Different viewport sizes were simulated ranging from as small as iPhone 5 (320px) to large desktop sizes (1200px and above).

Deployment

This website was published using Heroku.

Contribution

This website was published using Heroku.

Firstly you will need to clone this repository by running the git clone <https://github.com/datonex/owl-nook-dx/> command
If using VS Code type make sure you have th Git extension installed then type above code into your terminal
Navigate to project folder and start a virtual environment with python3 -m venv .venv
Activate you virtual environment with source .venv/bin/activate
Install dependencies with pip install -r requirements.txt
Make changes to the code and if you think it belongs in here then just submit a pull request

Deployment to heroku

Before you begin deployment, create a git repository on github either by manually creating a repository from a template (or a new one)
If you have the git hub CLI installed go to the folder you keep your projects and run, gh repo create <project-name> --public --template <template-name> This command will automatically initialise your local repository and create your folder for you. If you don't have a template don't enter --template
Follow step 3 to 5 from contribution
Start a django project with django-admin startproject <project_name> . the a django app with python manage.py startapp <appname>
Inside project-name create a new file env.py and put file name in your .gitignore

Open env.py and type the variables:

 import os
 # os.environ["DATABASE_URL"] = ""
 os.environ["SECRET_KEY"] = "random_secret_key"
 os.environ["HOSTNAME"] = "host_name"
 os.environ["CLOUDINARY_URL"] = "cloudinary_api_key"
 os.environ["DEVELOPMENT"] = "Development_key"

Locate settings.py in project_name and import the following:

from pathlib import Path
import os, dj_database_url

if os.path.isfile("env.py"):
  import env

Set your environments variables from above where prompted byt comments:

SECRET_KEY = os.environ.get("SECRET_KEY")

if "DEVELOPMENT" in os.environ:
    DEBUG = True
else:
    DEBUG = False

X_FRAME_OPTIONS = "SAMEORIGIN"

ALLOWED_HOSTS = [os.environ.get("HOSTNAME")]

In INSTALLED_APPS input the following packages installed from pip:

"django.contrib.messages",
"cloudinary_storage",
"django.contrib.staticfiles",
"django.contrib.sites",
"allauth",
"allauth.account",
"cloudinary",
"tinymce",
"app_name",

In TEMPLATES inside "DIRS" build your template directories in a tuple:

TEMPLATES = [
  {
      "BACKEND": "django.template.backends.django.DjangoTemplates",
      "DIRS": [
          os.path.join(BASE_DIR, "templates"),
          os.path.join(BASE_DIR, "owlet", "templates", "owlet", "allauth"),
      ],
    ...
  }
]

To set up your database put in:

if "DATABASE_URL" in os.environ:
    DATABASES = {"default": dj_database_url.parse(os.environ.get("DATABASE_URL"))}
else:
    DATABASES = {
        "default": {
            "ENGINE": "django.db.backends.sqlite3",
            "NAME": BASE_DIR / "db.sqlite3",
        }
    }

Finally building the static files:

STATIC_URL = "owlnook-dx/static/"
STATICFILES_STORAGE = "cloudinary_storage.storage.StaticHashedCloudinaryStorage"
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

MEDIA_URL = "/media/"
DEFAULT_FILE_STORAGE = "cloudinary_storage.storage.MediaCloudinaryStorage"

Create a cloudinary account and get your API environment variable with format CLOUDINARY_URL=cloudinary://*******************@datonex from dashboard
Create a Heroku account and login. Create a new app and select region closest to you.
From Navigation bar click on Resources.
Add Heroku postgres
Sumbit the form prompt
Commit your cahnges to github. then install the Heroku CLI (link is in Deploy from heroku navbar)
When Heroku CLI is installed, put in your terminal:
```
  heroku login
```
To login to Heroku
The connect your Git repository with: heroku git:remote -a some-app-test then heroku config:set DEBUG_COLLECTSTATIC=1 --app heroku-app-name at first deployment
Push your changes to heroku with git push heroku master or git push heroku main

Credits

Content

Wikipedia - South African culture

Blog content sources 👈 click to view content sources

Media

Images

Placeholder image - Pexels, by cottonbro

Inspiration

Medium - Medium blog
Bored Pand - Bored Panda blog
Philosophy template - wordpress website template by Colorlib
Philosophy template source code
ERD examples
ERD symbols and meanings
Colorlib templates
Drinking blog - articles inspiration
Buzzfeed - articles inspiration

Acknowledgements

Thank you to my mentor for his support and guidance

Name		Name	Last commit message	Last commit date
Latest commit History 102 Commits
.vscode		.vscode
README		README
blog		blog
owl_nook		owl_nook
owlet		owlet
static		static
templates		templates
tests		tests
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
README.md		README.md
build.sh		build.sh
manage.py		manage.py
requirements.txt		requirements.txt
runtime.txt		runtime.txt

datonex/owl-nook-dx

Folders and files

Latest commit

History

Repository files navigation

Owl Nook

Table of contents

Overview

What is this website for?

What does it do?

How does it work

UX & UI design

User Stories

Design

Wireframes

📱 Mobile Wireframes

📱 Tablet Wireframes

🖥️ Desktop Wireframes

Colour Scheme

Typography

Imagery

Buttons and button groups

Content Blocks

Form elements

Other elements and reference components

Mockups

Interactive prototype

Database

Conceptual ERD

Physical ERD model

ERD Model during development

Existing Features

Common Features Across All Pages

Specific to Pages

Features Left to Implement

Technologies Used

Languages used

Frameworks, Libraries and Programs Used

Testing

Bugs

Python Validation

Blog views.py

Rest of python files

CSS3 validator

Base css

Blog css

HTML5 Validator

Common Errors + warnings

Home Page

Articles Page

Edit Profile Page

Bookmarks Page

Compatibility Testing

Deployment

Contribution

Deployment to heroku

Credits

Content

Media

Images

Dependencies + help links

Inspiration

Acknowledgements

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages