Milestone Project 3

Introduction

The Readers Corner is my third project with Code Institute to show the knowledge I have gained in Python3, Databases such as MongoDB and Frameworks like Flask.
I have followed the CRUD form (Create, Read, Update, Delete) to create a web app where users can register, login, read reviews, add reviews, edit reviews, delete reviews, log out and delete their account.
The idea was to build a web app where users can share their favourite books through book reviews.

Table of Contents

• UX
• User Stories
• Technologies
• Wireframe
• Database Models and Schema
• Media
• Features
• Testing
• Deployment
• Credits and Acknowledgements

UX

User Stories

• "As a user, I want to immediately understand the purpose of the site"
• "As a user, I want to create my own reviews."
• "As a user, I want to easily access my own content."
• "As a user, I want to edit reviews I have created."
• "As a user, I want to be able to delete reviews I have created."
• "As a user, I want to be able to delete my account."
• "As a user, I want to be able to browse reviews created by other users."
• "As a user, I want to be directed to a site where I can buy a book."
• "As a user, I want a site that is visually appealing."
• "As a user, I want a site that is easy to navigate."
• "As a user, I want a site that is intuitive."

Back to Table of Contents

Technologies

The Technologies used in this project are listed bellow.

Languages

• HTML - used to create the structure of the application
• CSS - used to position and style the application
• JavaScript - used to for interactivity
• Python - used to handle backend
• Jinja - Python templating language

Libraries and Frameworks

• Flask
• Werkzeug
• Materialize CSS
• Google Fonts
• Font Awesome
• jQuery

Project Management

• Git
• Gitpod
• Github
• Heroku
• MongoDB

Tools

• Chrome DevTools
• WireFrameSketcher
• Am I Responsive
• Responsive Test Tool
• Lighthouse
• Coolors

Back to Table of Contents

Wireframe

The wireframes for this project do not represent the final project. To view the wireframes click here for PDF and here for PNG files.

Back to Table of Contents

Wireframes created with WireframeSketcher

Database Models and Schema

QuickDBD

User
-
UserID PK int
Username varchar(20)
Email email
Password password
UserReviews string FK >- Reviews.ReviewID
DateCreated datetime


Reviews
-
ReviewID PK int
Title varchar
Aurthor varchar
Genre varchar
BuyLink url
ImageURL url
Synopsis string
Review string
DateCreated datetime

Back to Table of Contents

Media

The main background image is by Alfons Morales on Unsplash.

Back to Table of Contents

Features

The main features of the Reader's corner are,

• A responsive design.
• Responsive navigation bar.
• Users can register an account.
• Users can add their own reviews.
• A user can read everyone's reviews.
• The user profile will show only the session users reviews.
• Users can edit their reviews.
• Users can delete their reviews.
• Users can delete their account.
• A buy me link will take the user to the books amazon page.
• A footer with social media links.
• A link to my Github in the footer.

Future Features

• A review rating system. A user can give a 1 to 5 star rating to other people's reviews.
• A search function. The ability to search the reviews based on genre, user name, user rating, author or book title.
• Lost password recovery feature.
• Sort reviews, Alphabetically, by Genre, User ratings, by Author or by User.
• Add reviews to a favourites list

Back to Table of Contents

Testing

Testing documentation can be found HERE

Back to Table of Contents

Deployment

The live project can be viewed here.

Commiting to Github

1. Using my terminal window I firstly use git pull https://github.com/Darian-Frey/Milestone-Project-Three.git to pull the most upto date version of my repository.

2. Once upto date I edit everything I need to and use git add . to stage all the edited files for commiting.

3. Using git status I usually view to see I have staged all the files I want to and I have no unwanted files being commited.

4. Next using git commit I commit to the local Repository and then git push to finally push the changes to the master branch.

Deploying to Heroku

1. Firstly I needed to go to my Account dashboard, here I can select New and Create New App.
2. I chose a unique app name, the region of Europe and then pressed create app.
3. Once Created I was brought to the deploy section of my app, here I decided to chose to deploy with Github.
4. Heroku then asked for the repo name of my app I wished to deploy.
5. I selected connect once my repo was found and I was then able to commit to the master branch on Github. It will then Deploy Automatically as I have automatic deploys turned on.
6. The site is almost deployed but I then needed to go to the settings section and let Heroku know of any enviroment variables such as the ip, Port, Secret key and database URI.

Cloning the repository

To run this repository locally:

1. Click "Code" at the top of this repository.
2. Select Download Zip or Copy the URL to your clipboard.
3. Open up Terminal and select the location in which you wish to clone this directory.
4. Then type git clone and copy https://github.com/Darian-Frey/Milestone-Project-Three.git
5. Press enter and you will have succesfully cloned this Repository.

Installing dependencies

Installing Dependencies is very simple and I have supplied a requirements.txt to help with this process. Once the repository has been cloned before it can be ran the user will need to open the terminal on their IDE and type pip3 install -r requirements.txt. All the dependencies should now download and you are ready to go.

Back to Table of Contents

Credits and Acknowledgements

I would like to thank the following.

• Excellence Ilesanmi for his support and advice through this project.
• Code Institute for this excellent course.
• Materialize CSS, W3Schools, freecodecamp and css-tricks for all the example code.
• Coolors for the colours and theme ideas

Back to Table of Contents