• Overview
• UX
  • User Stories
  • Design
    • Frameworks
    • Color Scheme
    • Icons
    • Typography
  • Wireframes
  • Schema
• Features
  • Existing Features
  • Future Features
• Technologies Used
  • Front-End Technologies
  • Back-End Technologies
    • Flask
    • Heroku
    • Python
• Agile Project Management
• Testing
• Deployment
• Credits
  • Media
  • Acknowledgments

Medium Bloggy is a site for amateur bloggers and writers to show-case their work. You can view the deployed site here. The title of this site i.e 'Medium Bloggy' is a homage to the Medium.com website, upon which this site is loosely based. This site is an example of social journalism, which relies heavily on community involvement and engagement in order to create the content.

• User Stories were written from the perspective of x2 different user(s):
  • the non-registered user that wants to read blog articles, without contributing content.
  • the registered user that wants to write blog articles or comment on other articles.

"As a non-registered user, I ______________________________________________"

• should be presented with blog articles on the main page.
• should be able to click on an article on the main page to read more about it.
• should be able to search through articles.
• should be able to register an account with the site in order to publish articles, and comment on them.

"As a registered user, I ______________________________________________"

• should be able to login to the site in order to publish articles.
• should be presented with a profile page showing all of my posts.
• should be able to update and delete posts from my profile page.
• should be able to create comments on any other posts.
• should be able to delete comments that I have made.
• should be able to logout of my account.

• The overall concept was to emulate a printed newspaper by having a minimalist black and white color scheme, with a modern sans serif typography.

• StartBootstrap provide a free Bootstrap template called 'Clean-Blog'. This template was used to provide an initial style and coloring to the site. By the end of the project practically all of the template code was replaced with my own custom code.
• Flask 1.1 is a micro-framework that is used to render the back-end Python with front-end Bootstrap.

In keeping with the printed newspaper theme, minimalist colors are employed.

• #212529 body text and background
• #868e96 block quotes
• #ffa500 main page jumbotron
• #0085A1 hover

• Font Awesome 5.6.1 icons are used for the social media links, and the quotes in the footer.

• Google Fonts were used across the site, namely:
  • Lora - for body text.
  • Open Sans - for headings.

• Wireframes were created using Balsamiq Wireframes and can be viewed by clicking on links below.

The database consists of x3 collections, which we can represent as follows:

• Register Account: Anybody can register for free and create their own unique account. I have built-in authentication and authorization to check certain criteria is met before an account is validated. All passwords are hashed for security purposes.
• Log In to Account: For existing users, I have more authentication and authorization incorporated to check that the hashed passwords and username match the database.
• Log Out of Account: Users can easily log out of their account by clicking the logout button.
• View All Posts: On the index page, all blog posts are initially displayed, based on date of submission.
• Search Posts: The user can search for a relevant blog post, searched by Title or Subtitle.
• CRUD Posts: A registered user can create, read, update and delete their blog posts. By leveraging Flask-CKEditor it made it possible for users to add rich content to their blog posts like images, code syntax highlighting, etc. There are also lost of features in-built into the editor including spell-checking, linking, table insertion, font-styling, etc. All of these features make it intuitive for the user to create great blog posts.
• CRD Comments: A registered user can create, read, and delete comments made on any post. Again, commenting makes use of the CKEditor, allowing the user to create rich, well-presented content.
• Random Quote Generator: As this is a blogging site, I thought it would be a nice feature for the user to see a random quote for further inspiration. The quote is located in the footer, and a fresh one is retrieved on loading the page.

A full list of future features can be viewed in the Product Backlog, but we will briefly mention some of them here:

• Pagination: the ability to paginate blog-post search results.
• Bookmark: the ability for a user to bookmark articles as part of a 'Reading List'.
• Administrator Dashboard: the ability to login as an admin and have full oversight on content.

• PyCharm - used as the primary IDE.
• GitHub - used for remote storage of code.
• TinyPNG - used to optimize (.jpg, .png) images for faster loading.
• Balsamiq - used to create the project's wireframes.

• HTML5 - used to provide content and structure.
• CSS3 - used to provide styling.
• JavaScript ES6
• Google Fonts - used to provide font styling.
• Am I Responsive? - used to show site responsiveness.

• Flask 1.1 - used as a web micro-framework.
• Flask-WTF 0.14.3 - for integrating Flask and WTForms.
• Flask-Bootstrap 3.3.7.1 - packages Bootstrap into an easy-to-use extension.
• Flask-CKEditor 0.4.4.1 - CKEditor integration for Flask.

• Heroku - to host the site.

• Python 3.9 - back-end programming language.
• MongoDB Atlas - to store database in the cloud.
• PyMongo 3.11.2 - Python API for working with MongoDB.

GitHub Projects was used to iteratively sprint through the development of this app. Each User Story became an individual Issue, and was placed in a Kanban board composed of the following columns:

1. Backlog - all user stories, ordered by value/priority.
2. Sprint - a subset of user stories to be completed in a x1 week sprint.
3. In Progress - user stories currently being worked on from current sprint.
4. Done - user stories completed, and tested.

Along with tracking user stories, Github Projects was also used to track bugs. The full list of user stories/bugs can be viewed here.

The testing process can be viewed here.

Local Deployment

In order to run this project locally on your own system, you will need the following installed:

• Python3 to run the application.
• PIP to install all app requirements.
• Any IDE such as Microsoft Visual Studio Code.
• GIT for cloning and version control.
• MongoDB to develop your own database either locally or remotely on MongoDB Atlas.

Next, there's a series of steps to take in order to proceed with local deployment:

• Clone this GitHub repository by either clicking the green Clone or download button and downloading the project as a zip-file (remember to unzip it first), or by entering the following into the Git CLI terminal:

git clone https://github.com/leithdm/medium-bloggy.git

• Navigate to the correct file location after unpacking the files.

cd <path to folder>

Create a env.py file with the relevant credentials. See the sample env.py file below, for example:

import os

os.environ.setdefault("MONGO_URI", "YOUR_MONGO_URI")

os.environ.setdefault("MONGO_DBNAME", "YOUR_MONGO_DBNAME")

os.environ.setdefault("SECRET_KEY", "YOUR_SECRET_KEY")

os.environ.setdefault("IP", "YOUR_IP")

os.environ.setdefault("PORT", "YOUR_PORT")

• Install all requirements from the requirements.txt file using this command:

sudo -H pip3 -r requirements.txt

• Sign up for a free account on MongoDB and create a new Database called blog. The Collections in that database should be as follows:

blog_comments

_id: <ObjectId>
text: <string>
comment_author: <string>
parent_post: <ObjectId>

blog_posts

_id: <ObjectId>
title: <string>
subtitle: <string>
body: <string>
img_url: <string>
author: <string>
date: <string>

users

_id: <ObjectId>
email: <string>
password: <string>
name: <string>

• You should now be able to launch your app using:

flask run

• The site should be running on localhost on an address similar to http://127.0.0.1:5000.

Remote Deployment:

This site is currently deployed on Heroku using the master branch on GitHub. To implement this project on Heroku, the following steps were taken:

1. Create a requirements.txt file so Heroku can install the required dependencies to run the app.

sudo pip3 freeze --local > requirements.txt

2. Create a Procfile to tell Heroku what type of application is being deployed, and how to run it.

echo web: python run.py > Procfile

3. Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.

4. In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables as follows:

IP : 0.0.0.0
MONGO_DBNAME: <your_MongoDB_name>
MONGO_URI : <link_to_your_MongoDB>
PORT : 5000
SECRET_KEY : <your_secret_key>

5. Your app should be successfully deployed to Heroku.

• Pictures used on this site were obtained from Unsplash. Credit goes to the following photographers: Alex Block, Rohit Tandon, KiwiHug

• Logomakr was used to create the site logo.