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.

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.

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

Use this section to provide insight into your UX process, focusing on who this website is for, what it is that they want to achieve and how your project is the best way to help them achieve these things.

In particular, as part of this section we recommend that you provide a list of User Stories, with the following general structure:

• As a user type, I want to perform an action, so that I can achieve a goal.

This section is also where you would share links to any wireframes, mockups, diagrams etc. that you created as part of the design process. These files should themselves either be included as a pdf file in the project itself (in an separate directory), or just hosted elsewhere online and can be in any format that is viewable inside the browser.

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

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.

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.

  

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.

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.

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 👈

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 👈

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 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 will be derived from the following template even when the scope of the project increases.

Click here for pdf version 👈

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

Click here for pdf version 👈

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

• Helper Blocks 👈

• Navigation 👈

• Shadows and other shenanigans 👈

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

Mobile wireframes 👈

Tablet wireframes 👈

Desktop wireframes 👈

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 👈

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 👈

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 👈

For some/all of your features, you may choose to reference the specific project files that implement them, although this is entirely optional.

In addition, you may also use this section to discuss plans for additional features to be implemented in the future:

• Header - allows user to easily navigate across all pages

• Links that are hovered over

• Navigation banner

• Responsiveness

• Home Page

• Image grid to easily see a handful of places the user can visit. When the mouse hovers you get addition information about the location

In this section, you should mention all of the languages, frameworks, libraries, and any other tools that you have used to construct this project. For each, provide its name, a link to its official site and a short sentence of why it was 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 - Add code to allow app to access database.

• 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

In this section, you need to convince the assessor that you have conducted enough testing to legitimately believe that the site works well. Essentially, in this part you will want to go over all of your user stories from the UX section and ensure that they all work as intended, with the project providing an easy and straightforward way for the users to achieve their goals.

Whenever it is feasible, prefer to automate your tests, and if you've done so, provide a brief explanation of your approach, link to the test file(s) and explain how to run them.

For any scenarios that have not been automated, test the user stories manually and provide as much detail as is relevant. A particularly useful form for describing your testing process is via scenarios, such as:

1. Eg. Contact form:

• Go to the "Contact Us" page
• Try to submit the empty form and verify that an error message about the required fields appears
• Try to submit the form with an invalid email address and verify that a relevant error message appears
• Try to submit the form with all inputs valid and verify that a success message appears.

In addition, you should mention in this section how your project looks and works on different browsers and screen sizes.

You should also mention in this section any interesting bugs or problems you discovered during your testing, even if you haven't addressed them yet.

If this section grows too long, you may want to split it off into a separate file and link to it from here.

• Navigation bar

• Footer

• The Image grid

• Any image that is hovered on (desktop only) the text is uniformly aligned and shows correct information for another device the grid is hidden and a continuous prose is displayed instead.

• External links

• All social links in the footer bring the user to the relevant social pages

• Links to external websites, the booking and visa button bring the user to the right website in a new tab.

• Internal Links

• Logo and text all lead to home page

• Navigation links lead to relevant pages

• Contact us link leads to the correct page for all web pages

Pass

• Browser Compatibility

• 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.

• 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).

This section should describe the process you went through to deploy the project to a hosting platform (e.g. GitHub Pages or Heroku).

In particular, you should provide all details of the differences between the deployed version and the development version, if any, including:

• Different values for environment variables (Heroku Config Vars)?
• Different configuration files?
• Separate git branch?

In addition, if it is not obvious, you should also describe how to run your code locally.

This website was published using Heroku.

1. Firstly you will need to clone this repository by running the git clone <https://github.com/datonex/owl-nook/> command

2. If using VS Code type make sure you have the Git extension installed then type code into your terminal

3. Make changes to the code and if you think it belongs in here then just submit a pull request

• Placeholder image - Pexels, by cottonbro

• audio was obtained from here

• video was obtained from here

• Code Institute - Full Stack Frameworks module

• Startbootstrap - bootstrap blog template

• Startbootstrap - bootstrap blog home template

• Vole - random text generator

• Web fore front - Django model data types

• Google fonts Poppins font

• CodingWithMitch - Creating a custom user model

• Django user model - information about the django user model

• Infinite Scrolling infinite scrolling

• TinyMCE - python package

• Pyenchant - python package to handle TinyMCE spell checker

• Cloudinary - upload image logic

• Change attribute names in django

• Django forms

• Django forms source code

• Creating form widgets using Django

• Create user forms

• 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

• Thank you to my mentor for his support and guidance