Skip to content
/ the-reading-room Public
generated from Code-Institute-Org/gitpod-full-template

Code Institute Milestone 3 Project developed using HTML5, CSS3, JQuery, Python3, and MongoDB utilising Flask and Materialize frameworks

the-reading-room.herokuapp.com/
2 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

simonjvardy/the-reading-room

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

167 Commits

.github/ISSUE_TEMPLATE

.github/ISSUE_TEMPLATE

 
 

.theia

.theia

 
 

static

static

 
 

templates

templates

 
 

testing

testing

 
 

wireframes

wireframes

 
 

.gitignore

.gitignore

 
 

.gitpod.dockerfile

.gitpod.dockerfile

 
 

.gitpod.yml

.gitpod.yml

 
 

Procfile

Procfile

 
 

README.md

README.md

 
 

TESTING.md

TESTING.md

 
 

app.py

app.py

 
 

googlee1197bb415036e21.html

googlee1197bb415036e21.html

 
 

requirements.txt

requirements.txt

 
 

robots.txt

robots.txt

 
 

sitemap.xml

sitemap.xml

 
 

Repository files navigation

The Reading Room

The Reading Room is a (fictitious) book review 'club' website providing reviews on a range of books and book categories. The idea for this project is to provide the visitor with an interactive website allowing registered users to create new book reviews for the enjoyment of all site visitors. If a visitor likes a book review, they are able to select a hyperlink to an online retailer's website, where they are able to purchase a copy of the book.

Please note: This is only to simulate an affiliate marketing business model for educational purposes and in no way endorses or implies a business relationship with the chosen retailers.

Responsive Layout Screenshots

I created the The Readng Room logo to present an intuitive image based on research of similar contemporary book review blog websites (details of these websites can be found in the Credits section). The muted, almost monochromatic colour scheme was chosen for a clean simple site allowing the reviews to be the main focus.

Contents

UX (User Experience)

Project Goals

The goal of this project is to build a a website that allows site visitors to read book reviews created by registered users and to find links to online retailers to purchase books they like.

The features on the website will:

  • Show an interactive list of book reviews containing book details and short user reviews for all site visitors.
  • Provide links to online retailers for the associated books reviewed.
  • Allow visitors to register a user account to log in to the site and create their own book reviews for others to see and read.

I achieve this by:

  • Providing a Registration form with username and password for users to create an account
  • Providing a log in page for existing users to log in to their account
  • Enabling users who are logged in to create new book reviews or edit their own previous book reviews.

User Goals

  • Read book reviews created by other users.
  • Create book reviews for others to read.
  • Link to online retailers to purchase the books they like.

User Stories

New Site Visitor

  • As a user, I want to see a navigation bar at the top of the page where I can navigate to each of the different site pages.
  • As a user, I can see a collapsed navigation bar icon on mobile devices that opens up to give access to the site navigation links when clicked.
  • As a user, I can see a site logo or name in the navigation bar.
  • As a user, I can see a hero image welcoming the user to the site.
  • As a user, I can see Call To Actions (CTA) to learn more about the book reviews available.
  • As a user, I want to see a page containing all the available book reviews.
  • As a user, I want to be able to search for book reviews.
  • As a user, I want to click on a book review to see more details about the book.
  • As a user, I want to be able to click links to online retailers to purchase the reviewed books.
  • As a user, I want to register a username and password to log in to the site.
  • As a user, I can see the website privacy policy and terms and conditions.
  • As a user, I can see a site map with links to all the site pages.
  • As a user, I can contact the site owner(s) using their social media channels.

Returning Site Visitor

  • As a user, I want to see my user account profile page.
  • As a user, I want to be able to click on a book review favourite button to save my favourite reviews.
  • As a user, I want to create, edit or delete my own book reviews.
  • As a user, I want to be able to wite a comment on a book review.

Site Administrator

  • As an Administrator, I want to be able to add, edit and delete the book rewiew genre categories

Site Owner Goals

  • As a site owner, I want to create an interactive website allowing the user to easily understand the site's purpose and features.
  • As a site owner, I want the visitor to create a user account with a password to log in and access more site features.
  • As a site owner, I want the user to be able to log out of their account.
  • As a site owner, I want an ADMIN user account to administer the site content.

Back to contents

Design Choices

Fonts

I've chosen fonts that complement eachother using a combination of serif and sans-serif fonts to lend a feeling of printed words on a page or in a book.

The fonts I have chosed for this are Playfair Display for the headings and Source Sans Pro for the body text.

The Logo font was created using Special Elite to give the look of an old typewriter. This is also used for the error handling messages and the titles in the footer.

Colours

I've chosen the colours from the Materialize CSS teal palette to give a clean light feel with pastel shades. This gives some separation for the different page sections without overpowering the layout and taking the focus away from the book reviews.

Colour palette

  • Teal Darken-4 (004D40) - Dark Teal Green
  • Teal (009688) - Teal Green
  • Teal Lighten-5 (E0F2F1) - Very Pale Teal Green
  • White (FFFFFF) - White

These colours will compliment each other well to create a calm but visually pleasing accent to the white background of the site.

Wireframes

I designed the site mock-ups originally using pen and paper and then developing the designs further using Balsamiq wireframes.

I focussed on defining the basic layout structure of the site and identified how displays would change on different screen sizes such as mobile, tablet and desktop for each page.

Hand drawn drafts

The original hand drawn sketch wireframe was created as quick and rough method to try out page formatting ideas to form a basis for creating the wireframe within balsamic.

It represents the early stages of the design process for the website as ideas started to form and the flow of the design process from idea to finished website.

Final Wireframes

The final wireframes were created using Balsamiq adapted from the original hand drawn wireframe concepts. The image shows the homepage from the site in three display sizes to demonstrate the responsive page design and layout.

Back to contents

Technologies

Languages

  • Python3
    • Used to create the main application functionality
  • HTML5
    • Used as the main markup language for the website content.
  • CSS3
    • Used to style the individual webpages.
  • JavaScript
    • Used to create the interactive functionality of the website

Database

  • MongoDB Atlas
    • Cloud based document-oriented database used to store the backend data.

Libraries

  • MaterializeCSS
    • Used to design a mobile-first responsive website layout.
  • Flask
    • Python web framework
  • Werkzeug
    • A comprehensive WSGI web application library installed with Flask
  • PyMongo
    • PyMongo is a Python tool for working with MongoDB
  • Flask-Pymongo
    • Flask-PyMongo bridges the gap between Flask and PyMongo
  • DNSPython
    • DNS toolkit for Python
  • click
    • Python CLI utilities installed with Flask
  • itsdangerous
    • Python utility for hash-based message authentication installed with Flask(HMAC, SHA-512)
  • jQuery
    • Used for the initialisation of the Materialize CSS components functionality.
  • Jinja
    • Templating language for Python.

Tools

  • Git
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
  • GitHub
    • Used to store, host and deploy the project files and source code after being pushed from Git.
  • Gitpod
    • An online IDE linked to the GitHub repository used for the majority of the code development.
  • CodePen
    • An online code editor and open-source learning environment used to test small sections of code quickly and easily.
  • Visual Studio Code
    • A locally installed IDE connected to the GitHub repository for when there was no internet connection to use Gitpod.
  • Font-Awesome
    • Used for icons to enhance headings and add emphasis to text.
  • Google fonts
    • Used for the website fonts.
  • Coolors
    • An online tool used to choose the website colour scheme.
  • Favicons
    • Used to generate a favicon for the website title.
  • Am I Responsive?
    • A tool for taking a quick snapshot of the responsive breakpoints of the website to visualize how the site will look on different device screen sizes in one place. The resulting screenshot is also used as the README.md logo image.
  • What is my Screen Resolution
    • An online tool to find out the screen resolution on your device used for CSS @media queries
  • Adobe Photoshop CS4
    • A raster graphics editor used to manipulate the clock face background image.
  • randomkeygen.com
    • Random secure password & keygen generator used to create the Flask SECRET_KEY.

Back to contents

Features

Features Implemented

The following section describes the site design and page layouts to demonstrate the features implementsed.

Responsive Front-end Design

  • Responsive mobile first design using a MaterializeCSS framework.
  • Jinja2 templating framework for Python is used to create the site's front-end dynamic content.

Back-end Design

  • The app is created using Python3 and a Flask framework to render the HTML pages.
  • The site is deployed via a Heroku app linked to a GitHub repository.
  • The dynamic content is served utilising a MongoDB document based database.

Site Construction

Topology

  • User Logged Out Topology Logged Out

  • User Logged In Topology Logged In

  • Admin / Superuser Logged In Topology Admin User

Jinja Template Relationship

  • Template inheritance structure: Jinja Template layout diagram

Page Layout

Responsive Navbar

  • Responsive Navbar changes at smaller screen sizes Mobile Navbar

  • Navbar contains the site logo

  • Jinja template conditions removes menu items based on:

    • User logged in or out
    • If the user account is Admin or Superuser

    Mobile navbar logged out

    Mobile Navbar

    Mobile navbar logged in

    Mobile Navbar

Welcome Page

  • The welcome page contains a hero image utilising the Materialize CSS parallax feature

  • The CTA container shows the visitor welcome message and button inviting the user to find out more.

    Welcome Page

Book Review Page

  • The book review page shows cards containing all available book reviews

    • This page is available to all site visitors whether logged in or not.

  • Each card contains a floating orange button which opens the book page for that specific book review.

  • The search bar allows the user to search the available boo reviews using a text index on the book_review collection comprising the genre, author and title fields.

    Welcome Page

Book Page

  • Shows the book review details containing the full book review details.

    Book Page Buttons

    • The book cover image URL is an optional field.
    • It was decided to serve a URL to a book cover image rather than saving a file for simplicity of demonstrating CRUD Functionality. However, as a future development, allowing the user to save an image file using the Flask-PyMongo save_file() and send_file() helpers is highly desirable.

  • Allows the logged in users to create comments about the book review by linking t the create comment page.

    Comments

Book Page Buttons

Book Page Buttons

  • Favourite button

    • Writes the book ID, tile and author to the users collection as an object in the favourites array.

  • Shopping Cart

    • Opens the Amazon.co.uk website showing the book as a search term in the URL.
      • Saving a new book review creates a fake Amazon.co.uk affiliate link search URL using the following format: https://www.amazon.co.uk/s?k=[book]+[title]+[words]&tag=faketag
      • This format is a compromise as it only returns a general search for the book title because specific book product page uses an Amazon ASIN product number in the URL.
      • In the case of books, the Amazon ASIN number directly matches the book's shorter ISBN-10 barcode and can link directly to the book using the minimum URL format: https://www.amazon.co.uk/dp/[ASIN]
      • However, physical copies of books primarily show the longer ISBN-13 code on the back which will not work correctly if the user records that number when creating a new book review.

  • Book review edit button

    • Opens the edit review page.
    • Only available if the user created the review.

    Book review buttons

  • Book Review delete button

    • Opens the edit review page.
    • Only available if the user created the review.

  • Comments button

    • Opens the add comment page.
    • Only available to users logged in.

    Comments button

Add Review Page

  • Users who are logged in can create new book reviews by entering the book details and a book review in the add bok review form.

    • The Choose Genre select list reads data from the genres collection.

  • The ADD REVIEW button submits the form data to create a new document in the book_reviews table.

    Add book review

Edit Review Page

  • Only users who created the book review are permitted to edit the review.
    • Loading the page gets the current book data from the book_review collection and pre-fills the Edit Review form.

Edit Review Buttons

  • The red cancel button returns the user to the book review page without making any changes.

  • The green edit button updates the book_review document with the new data from all the form input fields.

    Edit book review

User Sign Up Page

  • New users are encouraged to create a new account to access more site features.

    • Usernames are required to be unique and are checked against existing usernames in the users collection.
    • The user is required to complete all fields and check-box before the new user is saved to the users collection
    • Passwords are hashed / salted before saving to the database (SHA256)
    • The member since date and last login date are also writted automatically at this point.

    Sign Up

User Login Page

  • The user name and password are validated against existing users in the users collection.

    • Users will not be allowed to log in if either the username or password are incorrect.

    Log In

Profile Page

  • The profile page displays the user's current account details.

  • The Favourites section displays a summary of the user's favourite books

  • The Book Reviews Written displays a summary of the user's submitted book reviews.

    Log In

Manage Genres Page

  • Only visible for selected users e.g. Admin or Superuser account holders.
  • The page shows all current documents from the genres collection displayed in individual cards.
    • Each card has an edit and delete button for that genre document.

Manage Genres Buttons

  • Add Genre redirects the user to the Add Genre page where a new genre category can be added

  • Edit button redirects the user to the Edit Genre page where the genre name chan be updated

  • Delete button deletes the genre category from the genre collection.

    Log In

Add Genre Page

  • Allows the admin or superuser to create a new genre category

  • The Add Genre button writes the genre_name to the new genre document.

    Log In

Edit Genre Page

  • Allows the admin or superuser to edit an existing genre category
    • Loading the page gets the current genre_name from the genres collection and pre-fills the Edit Genre form.

Edit Genre Buttons

  • The red cancel button returns the user to the manage genres page without making any changes.

  • The green edit button updates the genres document with the new data from the form input field.

    Log In

Add Comment Page

  • Any user logged in can create a comment on any book review.

  • The comment text, created date and username are saved as an object in the book_review table comments array.

    Log In

CRUD Functionality

Site Page Create Read Update Delete
Book Review All book reviews
Edit Review Single book review Update single book review
Book Page Add user favourite Single book review Delete single review
Sign Up Add new user
Log In User details
Profile User details
Profile Created book reviews
Profile Favourite reviews
Manage Genre All genres Delete genre
Add Genre Add new genre
Edit Genre Single genre Update genre name
Add Comment Add new comment

User Alerts

  • Coloured Flask flash alerts are used to feedback a range of different user actions:

    • Success Log In Add Favourite New Comment Review Added Review Updated

    • Advisory Genre Deleted Log Out Review Deleted

    • Warning Delete warning Edit Warning Profile Redirect

Defensive Programming

  • In order to try to maintain the site security, defensive programming to prevent "brute force" loading of restricted pages was introduced.
    • At its simplest level, certain pages are removed from view unless a user is logged in to the site.
      • This ustilises session cookies to validate whether a user is logged in or not.
    • The Python functions also contain checks on user input validity by employing if...esle statements as well as exception handling with try..except.
      • examples of this include preventing site visitors, who aren't logged in, from just entering a page URL to bypass the login process. This type of exception redirects the user to the login page with a warning flash message.

Additional Site features

  • A set of friendly HTTP Error landing pages for site visitors to see if a requested page is unavailable or cannot be accessed.

    • The pages provide a message to the user and a button to click to return the visitor to the homepage.

    • HTTP 404 Error HTTP 404 Error

    • HTTP 500 Error HTTP 500 Error

    • HTTP 503 Error HTTP 503 Error

Future Features

  • Site Admin User Account administration such as:

    • User account deactivation
    • User password change
    • moderating user comments

  • Allowing users to upload image files:

    • As an alternative to a URL on book reviews
    • For a profile page thumbnail image etc.

Database Design

genre collection

Field Description Collection Key Data type
Unique ID _id ObjectId
Genre Name genre_name String

users collection

Field Description Collection Key Data type Default Value
Unique ID _id ObjectId
User Name username string
SHA256 Hashed Password password String
Admin Account is_admin String "off"
Superuser Account is_super_user String "off"
Sign Up Date date_joined Date Object utcnow()
Last User Login Date last_login Date Object utcnow()

book_review collection

Field Description Collection Key Data type Default Value
Unique ID _id ObjectId
Genre Category genre String
Book Title title String
Book Author author String
Book Cover Image URL image_url String
Number of Pages number_pages Integer
Book ISBN-13 Number isbn String
Book Review Text review String
User Book Rating rating String
Created By username create_by String username
Created Date created_date Date Object utcnow()
Updated By mutator String
Updated Date mutation Date Object
Amazon Purchase Link purchase_link String "https://www.amazon.co.uk/s?k=[book]+[title]+[words]&tag=faketag"
Comments Array comments Array
Commments Array Object text String
Commments Array Object created_by String
Commments Array Object created_date Date Object utcnow()

privacy collection

Field Description Collection Key Data type
Unique ID _id ObjectId
Policy Section Title title String
Section Text Array text Array
Section Text Array Object Index String

terms_conditions collection

Field Description Collection Key Data type
Unique ID _id ObjectId
Policy Section Title title String
Section Text Array text Array
Section Text Array Object Index String

Data Types

  • ObjectId
  • String
  • Int32
  • Date
  • Array
  • Object

Back to contents

SEO

Search Engine Optimisation for the site was provided in three complementary ways:

  • HTML Sitemap links
  • XML sitemap file saved in the root directory
  • Google Search Console

HTML Sitemap links

  • Secondary HTML links to each page in the website were added to the footer section of each site page to allow users an alternative means of navigating the site easily.

XML Sitemap file

  • A sitemap.xml file was created to help search engines find, crawl and index the website more easily. It was created by using XML-Sitemaps.com and entering the URL for the deployed website and letting it automatically generate the required xml data for the whole site. The file was then saved in the GitHub repository root directory.

  • The following steps were used to generate the sitemap.xml file:

    1. Visit XML-Sitemaps.com and enter the URL of the website https://the-reading-room.herokuapp.com/
    2. Click Start
    3. The site pages will automatically be scanned
    4. Click View Sitemap Details
    5. Download the XML sitemap file
    6. Save the sitemap.xml file in the root directory of the GitHub repository

Google Search Console

  • Google Search Console was used to assist with testing and indexing issues with the website and to see how the site performs in Google search results.

  • The following steps were used to perform the indexing tests:

    1. Visit Google Search Console
    2. Click Add Property in the menu bar
    3. Enter the website URL https://the-reading-room.herokuapp.com/
    4. Click Continue
    5. Download the unique verification file created by Google
    6. Save the verification file in the root directory of the GitHub repository
    7. On Google Search Console, click Verify
    8. Once the verification passes, the site is available in the Google Search Console dashboard.

Even though this website has a small number of pages and have navigation links on each page making the Sitemap largely unnecessary, I felt is was a good experience and good practice to add these features in. Note: I haven't added a robots.txt file yet but may add this in the future when I understand more about search engine optimisation techniques.

Back to contents

Project Management

GitHub Projects are used to organize the planning and development of the website. Two GitHub projects are used to manage different aspects of the site development:

  • Development
    • Manages the project tasks and files.
  • Bug Fixes
    • Manages the triage and prioritization of the bug fixes.

The Projects are created using the following GitHub templates:

  • Automated kanban template for the Development project.
  • Bug Triage template for the Bug Fixes project.

The following kanban project cards are used to manage the tasks:

  • Backlog - this card is used to capture ideas for project tasks.
  • To Do - this is the current work queue for the project.
  • In Progress - this is the list of tasks currently in work.
    • New issues and pull requests are automatically added to this column using project card automation options.
  • Testing - Testing tasks list
  • Done - completed tasks

The following Bug Triage template project cards are used to manage the Bux fixes tasks:

  • Needs Triage - this card is used to capture new bugs prior to assigning a priority.
    • A triage card is more appropriate for larger projects than this but left in as this is where all new issues are assigned when linking a project to a new issue.
  • High Priority - this is the high priority queue for the project.
  • Low Priority - this is the low priority queue for the project.
  • Closed - completed tasks.

Markdown syntax is used to create "To-Do" list style checkboxes by adding - [ ] for an un-ticked checkbox and - [x] for a ticked checkbox on cards as a way of splitting a single complex task into a list of steps to be completed.

GitHub Projects - Development GitHub Projects - Bug Fixes

Back to contents

Version Control

Version control for this repository is managed within GitHub and Gitpod using separate branches used to work on specific aspects of the project. The following describes the repository branch structure:

  • Master - this is the default branch and the source for the repository deployment.
    • Documentation - this branch is used for updating the README.md and testing.md documentation only.
    • Development - this branch is used as the main working branch for the website development.
    • Features - this branch is used to try out new ideas and enhancements for the website.
      • Features and enhancements that are accepted are merged down into the Development branch.
    • Each individual bug fixes are raised within their own separate branches using the naming convention <GitHub Issue ID Number>-<bug fix description> e.g. branch name 12-correct-navbar-links

The following workflow steps are used to create and update branches within Gitpod and to push changes back to GitHub.

Gitpod Workspaces

  1. Open Gitpod from Github using the Gitpod button. This needs to only be done once at the start of the project.
  2. Start the Gitpod Workspace which opens an online IDE editor window.

Branches

  1. For changes to be made to any documentation files, the git command git checkout documentation is used to checkout and switch to the documentation branch.
  2. For changes to be made to other files under normal site development, the git command git checkout development is used to checkout and switch to the development branch.
  3. For changes to be made to new files for site enhancements, the git command git checkout features is used to checkout and switch to the features branch.
  4. To create a new branch for bug fixes, use the git command git checkout -b <branch-name> to create and switch to the new branch.

Working within a branch

  1. New or modified files are staged using the git add . command
  2. The changes are committed using git commit -m "<commit message>" command.
  3. If the changes are in a newly created branch, the committed changes are pushed from Gitpod to GitHub using the git push --set-upstream origin <branch-name> command as there is currently no upstream branch in the remote repository.
  4. For branches that have already been synchronized, the committed changes are pushed from Gitpod to GitHub using the git push command.

Merging branches in GitHub

  1. Opening the repository in Github, a new pull request is created for the updated branch and assigned to its related Development, Development - JavaScript or Bug Fixes project.
  2. The changes are reviewed to ensure there are no conflicts between the updated branch and the Master branch.
  3. The changes are then merged into the Master branch and the merge request is closed. The Project entry is automatically moved to the Done card.

Update Gitpod with the latest GitHub commits

  1. To update Gitpod with the latest commits From GitHub, the git checkout master command is used to checkout and switch to the master branch.
  2. Use the git pull command to update the master branch and reset the pointer.
  3. Now switch to the other branches in Gitpod using the git checkout <branch-name> command and use the git merge origin/master command to update each branch in turn.
  4. Use the git push on each branch to update the relevant GiHub Branches to the same commit as the Master branch.
  5. Repeat steps 3 - 17 regularly to ensure updates are saved and correctly version controlled in GitHub.

Back to contents

Testing

  • Testing information can be found in a separate testing.md file.

Back to contents

Bugs

To manage bugs and issues tracking, the default GitHub bug_report.md template has been created and activated within the repository settings Features > Issues section. All new bugs and issues are tracked within the GitHub repository Issues section . Open issues are managed within the GitHub Projects section

Each branch is then merged into the master branch using a pull request that is linked to the open issue. Once merged, and the bug report closed, the branch is deleted.

Fixed bugs and issues are marked as closed.

Back to contents

Deployment

The website was developed using both Gitpod and Visual Studio Code and using Git pushed to GitHub, which hosts the repository. I made the following steps to deploy the site using Heroku:

Cloning the-reading-room from GitHub

Prerequisites

Ensure the following are installed locally on your computer:

Cloning the GitHub repository

  • Navigate to simonjvardy/the-reading-room.
  • Click the Code button.
  • Copy the url in the dropdown box.
  • Using your favourite IDE open up your preferred terminal.
  • Navigate to your desired file location.

Copy the following code and input it into your terminal to clone the-reading-room:

git clone https://github.com/simonjvardy/the-reading-room.git

Creation of a Python Virtual Environment

Note: The process may be different depending upon your own OS - please follow this Python help guide to understand how to create a virtual environment

Install the App dependencies and external libraries

  • In your IDE terminal window, install the dependencies from the requirements.txt file with the following command:
pip3 install -r requirements.txt

Create the database in MongoDB

Please ensure you have an account created at MongoDB in order to build the database

Create env.py file

  • The env.py file should contain at least the following information:
import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "YOUR_OWN_SECRET_KEY")
os.environ.setdefault("MONGO_URI", "YOUR_OWN_MONGODB_URI")
os.environ.setdefault("MONGO_DBNAME", "YOUR_OWN_MONGODB_DATABASE_NAME")
  • Please ensure you add in your own SECRET_KEY, MONGO_URI and MONGO_DBNAME values.
  • Important: Add the env.py file to your .gitignore file before pushing your files to any public git repository.

Run the application

  • To run the application enter the following command into the terminal window:
python3 app.py

Deploying The Reading Room app to Heroku

Create the Heroku App

Please ensure you have an account created at Heroku in order to deploy the app

  • Log in to your Heroku account dashboard and create a new app.
  • Enter the App name.
    • This needs to be unique and the-reading-room is already in use so choose a suitable alternative name for your own App.
  • Choose a geographical region closest to where you live.
    • Options available on a free account are United States or Europe

Push your repository to GitHub

  • Commit and push your local repository to your GitHub linked repsitory

  • Ensure your local git repository has the following files in the root directory:

    • Heroku Procfile
    • requirements.txt

  • If these are not showing in your local Git repository for any reason, enter the following commands in the terminal window:

echo web: python app.py > Procfile
pip3 freeze --local > requirements.txt
  • Stage, commit and push your local Git repository to GitHub

Connect Heroku to GitHub

  • In the Heroku App Settings page, open the section Config Vars
  • Add all the environmant variables from your local env.py file into the Heroku Config Vars:
Key Value
IP 0.0.0.0
PORT 5000
SECRET_KEY YOUR_OWN_SECRET_KEY
MONGO_URI YOUR_OWN_MONGODB_URI
MONGO_DBNAME YOUR_OWN_MONGODB_DATABASE_NAME
  • In the Heroku App Deploy page:
    • Select GitHub from the Deployment Method options.
    • Select Connect to GitHub.
    • Log in to your GitHub account from Heroku to link the App to GitHub.
    • Search for and select the repository to be linked in Github.
    • Select Connect.
    • Select Enable Automatic Deployment from the GitHub Master / Main branch

Launch the App

  • Click Open App in Heroku to launch the App in a new browser window.

Back to contents

Credits

Images

You can find the images used for the site here. I have sourced them through various websites, which are either free to use or used under license:

  • Welcome Page

  • Book Review

All demonstration book review image URLs were sourced from Waterstones online bookstore (© Waterstones, 2021. Waterstones Booksellers Limited - All Rights Reserved) from their CDN image delivery URLs and used purely for educational purposes only to demonstrate the app backend CRUD functionality. Please visit Waterstones for some fantastic deals on the latest books!

Colour

  • The colour palette was identified on Coolors

Inspiration

The following websites were used as the starting point and inspiration for creating the website:

  • Waterstones Online book store for website design inspiration and features as well as URL links to their book pages.
  • Amazon UK Online retailer for website design inspiration and features as well as URL links to their book pages.
  • Kirkus Book Review website / blog for design inspiration and content ideas.
  • Instagram - Duchess Of Cornwall Instagram Book Club / Book review site

Acknowledgements

Back to contents

About

Code Institute Milestone 3 Project developed using HTML5, CSS3, JQuery, Python3, and MongoDB utilising Flask and Materialize frameworks

the-reading-room.herokuapp.com/

Topics

html5 mongodb css-framework python3 flask-application materializecss heroku-deployment milestone-3

Resources

Readme
Activity

Stars

2 stars

Watchers

1 watching

Forks

1 fork
Report repository

Contributors 2

  •  
  •  

Languages