Books 2 Review

Introduction

Books 2 Review is a database website where users/clients can provide a review for a particular book for others to read and share their thoughts. This website will use the information provided by registered users to provide the information. If the users register, they can use more of the features such as adding books, reviews, amends and deleting review if necessary. The site will be designed to provide a simple but powerful attractive site for users to share their thoughts and opinions. This will also give them the opportunity to also learn about which books are recommended by other users.

Book reviewing website https://books2review-dt.herokuapp.com/
Welcoming book review website that makes it simplistic for reviews and books to be added when they have signed up to the website. This also gives the user the ability to read others book lovers books reviews.
This will share a book experience for other users looking for new books and encourages others to read books they have loved recently or in the past. Building a community helping each other with books to read or checkout.

UX

Project objectives

Books 2 Review's main objective is to allow users to add reviews and books they have read. This is for all users who sign up to the website to share reviews and also read others readers thoughts and feelings on a book. The user will also be able to edit and delete reviews. Only admin can add books to the website. This will be for site functionality and the site being controlled by admin personal.

User Goals

Easily accessible book review website for personal use sharing book opinions experiences
Ability to add books and reviews when required
Enjoyable experience discovering new books and adding thoughts and feelings on a book they have already read

Developer Goals

Demonstrate a solid understanding of MongoDB, Heroku and Python
Build a friendly and useful book review website
Build up portfolio with a great project
Make the site easy to use and navigate which provides a positive experience

Website Owner Goals

Have an easy-to-use site that encourages users to interact with it
Gain affiliate relationships to cross sell books

User Stories

As a book lover and wanting to share my experiences and find more books to read I want:

to find new books available to read
to read reviews of books by other users and get feedback on them
to be able to read the book description
to be able to register for the book webpage to track my reviews
to be able to add books of my choosing
to have the ability to create/add reviews on any book of my choice
To have the ability to update one of my reviews if I wish to change it
to navigate through the web page with ease
to add a like or dislike on the book I 'am reviewing
to see the latest reviews when selecting a book to view
to be able to search for books if a database is large or small
the ability to delete any reviews I want to change or start again.

Design

Inspiration:

The book idea come from my brother due to the knowledge given about how he works in library's. The information they hold and explained the data within a library is endless. So many books are released stored and recycled. Books are only removed due to purchase, damage or loss. With this design it will start with a book and continue to grow the more users that join the bigger the data collection. This will be growth in the number of books, reviews and users on the site. Books impress users by the description of the story, the title and user's opinion of a book. Overall, the main opinion that matters is the user but if it can help others have interest then there is a bigger outcome. If a review is good it will encourage users not only to get the book being reviewed but it will also broaden the users' mind. In the aspect of reading more books from the author producing more reviews and interesting others who might read similar books. Overall a book website was perfect for what is being created. Not only does it meet the requirements in providing useable information to others, it also provides a design interest and impact on the user. Therefore, I believed this would be perfect as I know how a library works in general, I understand the data aspect and believe everyone uses them for story's and to acquire knowledge. This spans into countless data.

Font

Dafont was a reliable webpage with interesting font to use therefore I have used the following (Badly Stamped). The font selected was from www.dafont.com it was perfect and suited for the theme of the site. I had I searched through several fonts and believed this was an excellent font giving the site a different dynamic and edge. It had the style that I was looking for and gave the font a better design overall on the webpage. Examples have been provided below.

when attempting to use the font for the website the font wasnt suitable for the website. As a result a more suitbale font was selected so the website wasnt impacted in a negative way. Due to wanting the site to be alot cleaner and simple for users the option to remove the badly stamped font was decided as the webiste the more simple it is the more appealing ti can be. Creating cleaner websites is the goal as they are alot better overall instead of a complex website where there is too much going on. As a result this decision was taken and the font-family: Nunito Sans, sans-serif was selected.

Colours

I used the colours selected above as the complicated each other. I searched several sites for good combinations of colours working well together giving a presence. The orange, white, dark grey and black worked very well for me. I believed the sight would be bright for the users and have specific criteria stand out where required. I tried several different colours to check and personally didn't find it appealing nor did it make an impact on the website when implementing the colour. The colours selected were popular across various sites such as https://www.tailorbrands.com/blog/logo-color-combinations. Therefore, as I had seen the colour group together and enjoyed the colours myself I decided it was best to use due to the presence it gave for the website idea and design.

Icons/Images

With the help of font awesome I was able to implement a varied number of icons on to the page. The icons help indicate the requirement or purpose of the section. Example being sign up for the website would be a pen and image logo to upload a picture for the book. The logos give more of a design effect on the website and make it more interactive for users. I believe the icons in the right place and correct icon used bring a custom design to the site and attention to detail supplied. This helps users enjoy and appreciate the site more that it has been created with effective detail and help support users in a hidden way. There are a few examples of the icons added below to show what has been used on the website.

Content Section

The content for website has been separated into the books that can be selected, reviews page for adding, updating, editing and deleting. On the home page the website will show the books via 3 books per row. Display the latest book at the bottom of the page. With the mobile device it will one book per row and tablet device will be 2-3 depending on size of the tablet.

For small devices this has been set to be viewed as 1 book per row. Depending on the tablet size it can be 3 books per row. I believe this can be implemented and can be improved on small devices in the future and something to work on. I believe the book should be the main object the users see this will improve the interest rate with interacting with the site for books and review information. The book site target is to capture the user's attention for new books to find and share with others. Including the objective for the users to find books with ease. Via scrolling or using the search bar to find the book they desire.

The users will have the ability to select the book present on the main page or search for a book via the search bar. When selecting a book of their choice the website will provide the user with the book details e.g., image and book description. If logged in the user will be able to add a review if they wish to do so. The user will also be able to review the latest 3 reviews on the book they are currently viewing. If there's no reviews then it will indicate no reviews available. This maybe the book hasn't been reviewed or it has been newly added. Once the user decides to add a review clicking the button, they'll be referred to a form requiring the book details and upload a book image if required.

Current format and size have been provided from amazon due to the clean book covers. Once the users upload the review, they can see the newly added view on the selected books content page. This will allow the user to add another review, amend a review or delete a review. If they add a review, they will get a time and date stamp automatically. When adding a review, the user can put a like on the book or dislike and thumb will indicate thumb up for yes, they like the book or a thumb down for no.

Users don't have access to deleting books only reviews the admins can remove books. This has been input so that other users of the books on the website or added reviews aren't reviewed in error.

Defensive Design

The defensive design was implemented for the information supplied via the form mainly on the website. This was controlling the information input into the website when add new reviews on the website. This would prevent any fields being missing causing website retrieval problems and ensure all the information is supplied when adding any information to the database website. Another measure implemented is if the user is tampering with the website which will provide a 404 error on the website alerting the user of the issue. This is necessary to ensure the users respect and use the sight correctly and what the sites purpose is. Providing accurate and correct book information with reader views supplied

Wireframes

Balsamiq frameworks was perfect to get a mock up design and use ideas in website layout and helped me decide site functionality. When creating the home space, it creates a wave of ideas. Designing and planning was much easier using Balsamiq frameworks previous was sketching my site design on paper and pen. If any changes are implemented then I can discuss the changes from the original idea and show how I've improved the design. This way it will indicate the improvements and the reasoning behind changing the design.

The created wireframes below will show the design and the idea of how I wanted the website to be laid out from my ideas. I will try and match the wireframe design to the website pages displayed and improve the project as I go if I deem the change necessary. The changes will be mentioned in the final part of the Readme file showing from the original design and the end product. Websites can change when designing due to either improvements implemented or due to errors that need to be fixed and resolved.

Features

Existing Features

Site Features for Non-registered/Registered Users

The book review website will display the latest books on the home page for the users. From here the user can search for a book following the correct criteria in the search bar which is a minimum of three characters using keywords instead of generic words such as the, and etc. The suer can also click the book present and select book details. As a n unregistered user, they have the ability to read the book details, read the review and register. The user cannot edit reviews, add books, manage reviews or delete the reviews.

The book details page when selected shows the information as required posting the latest comments on the page Maximum of 3 at this point in time. The comments will update each time a review is added for the specified book selected to complete a review. The users also see how many likes and dislikes the book has indicated by thumbs images with a up and down icon and number to indicate the amount of likes and dislikes. The book detail page allows users to edit and delete their review if it is visual via the top 3 comments. This is by selecting the collapsible review boxes and once the box jumps down the options if available to the user for their reviews, they can edit or delete the review. The users also have the options to add the review by selecting the review button which takes them to a form to complete for the book review the wish to provide.

Registered Users

As a registered user, the users can have the ability to login into their account and they can add reviews only the admin can add the books. This will include the details of the book title, author, description, book image and many more details. If the admin does not provide all the details necessary the book can’t be uploaded until all the fields have been completed.

If the user does not provide all the details necessary the book can't be uploaded until all the fields have been completed.

Once the details have been applied correctly. The user will receive an update stating they have successfully uploaded a book.

Once updated and completed successfully the user will be able to see the book on the home page. This will be the page the user is redirected to on the order once completed.

The user has the ability to add reviews to the website by selecting the book details on their chosen book. This will then lead them to the book details page and from here they can select an add review button to that particular book.

The user can then add a review the like button is automatically ticked by the user can change it to dislike the book if required by ticking the box.

Once the details have been applied correctly. The admin will receive an update stating they have successfully uploaded a book.

Edit Book Review Feature

The users can also go on to their reviews and edit if they wish to change something or delete the review. This is for users to control their rumours' accordingly and if errors need amending or they change their opinion the actions can be completed. The users would select the review they posted only this would be via the profile page or on the books page if the review is still available. This is because the reviews are the three most recent revises.

The user can change their vote or their review details. Once complete the user can save the details and this will reflect correctly and also produce an updated message once completed.

Delete Book Review Feature

Users have the ability to delete any reviews they no longer wish or if they just don't want it on their profile. Only the admin has the ability to delete any reviews for any user. When selecting the delete option the user has the red button for delete to select. Once they press this button, they can't reverse the action the review will be simply deleted and they will go back to the home page.

)

Features to Improve/Implement

1. e-book speech

Users will be able to play the description or short paragraph from the story. It would be for people with difficulty and people who want to hear the book out loud. It would be a great feature to have on the system.

2. Book Linking

Links when picking a book directing users to similar genres or other books from the author in relation to the book the user is viewing. This would require algorithms to be implemented to find the correct information.

3. Book Recommendations for users

When the user's login to their account on their profile not only will there be there reviews on the book but the users will also have books recommended by the website that they may interested in. This would help expand the books the users view and open up the various book options the user has and build a potential interest for the user.

4. Theme Swaps

The current theme is pleasant for users and matches well. The option for users to pick all the main colours such as red, green, blue, yellow etc they can pick a theme for the site they would enjoy they like. Boys blue and Girls pink for example. This would be more tailored to the users.

Scalable and Easy to Maintain Code

Make Code easier to maintain

Using a block content code including content read for each website main the generic design each and simple to keep everything the same and 100% accurate. This was easy for amending purposes and ensure the design was constant throughout the website. This enabled the different sites to be created a lot better and more efficiently when required. Its easy to break down the code with comments to ensure the information on the site was correct also and easy to debug code if necessary. Any issues with the code would come from the concept and not the base site block included on each page.

Technologies used

For the website the following programming languages have been used HTML, CSS, Heroku, MongoDB and JavaScript programming languages.

GitHub – The project required and believed GitHub was the best for storing the projects details and easily be used for remote access when required.
JQuery - used to simplify some DOM manipulation for certain functions
GitPod – Great toll to be sued for the development of the website and using the platform to complete the website as required. This helped fulfil the potential to complete the website.
Heroku – Launch the application code via Heroku used via deployment
Materialize – Helped support the coding queries necessary such as colours and grid information when necessary. The site also made footers very easy to include.
Favicon - Used to provide unique logo for the web page icon section
Dafont for the site font styled for a customer and unique feel.
Basalmiq - Used for wireframe creation using professional tools to support the design
Lighthouse - Audit you used it for your accessibility testing

Data Infrastructure

Database Choice

This project was required to be based on a NoSQL database structure so MongoDb was used.

CRUD Functionality

Data Models

Data stored in Books2Review MongoDB consist of these data types:

Date
String
Object Id
Boolean

Users

The USERS collection ensures users are unique and helps track permissions for adding, updating and deleting data to other
Create – users are created when a user registers for the site. A user must register if they want to add a review. The users can view the books and reviews but cant add any content or reviews personally.
Read – users are read when logging in and when viewing the profile page.
Update – users are not updated as this point in time future input can be contact details but as it is only an educational website personal details will not be provided
Delete – users are not deleted on the system.

Books

The BOOKS are the database collection for the information on the website and makes the website function correctly and fulfilling its purpose. Books are unique and there is only one of their kind. Books are updated by users but can be added by the admin team.
Create – books are created by the Admin user when new books come out and they want to upload them for review they can be processed by the admin only. This is so the users can just find the book they want and review it instead of obtaining books details.
Read – books are read by users and admin on the site. They book details will also be read when uploading to book details page and the home page.
Update – feature is not yet implemented.
Delete – feature is not yet implemented.

Reviews

The Reviews are supplied by the users the more reviews on site the more active the site is. This tracks popular books on the website also for users.
Create – users can create reviews on the books including admin stored on the database for all site visitors to review.
Read – reviews can be read by all users. Visitors, admin and registered users.
Update – users can update their review only and no other registered users. Admin can update all reviews
Delete – users/admin can delete the reviews on site.

Testing

Validation Testing

I used the following websites and pasted my code into it to ensure the code had no syntax errors:

JavaScript - https://jshint.com/
HTML - https://validator.w3.org/
CSS - https://jigsaw.w3.org/css-validator/
Lighthouse - https://developers.google.com/web/tools/lighthouse/?utm_source=devtools

User Stories Testing

Automated

Jasmine testing would be ideal in testing the book website. As we have tested during the end process of the website and nearing the end of the requirement the manual testing was suitable enough for the website. This is due to the JavaScript on the site being minimal, only adjusting heights on the book detail page and get books page, therefore the investment in automated testing wouldn't be a beneficial action to be completed for the website.

Manual

Manual testing was completed on the website. This included book searches, details displayed, add and review information and many more tests that actioned during the website building progression. The details have been provided below showing the result of the testing via a desktop website, mobile and tablet. The responsive device was fine when testing on a desktop page. Therefore, attempt testing on a small platform and a medium platform would be ideal to ensure they have been built and support all platforms available.

Testing Client Stories from UX Section

Manually testing was completed to ensure the website met the user stories requirements. This would ensure the website has been checked and satisfies the users. This including what they want the website to do and how they want it to work. A list of the requirements has been provided below for reference. This is to show the testing's made and also the results of the tests. This would help satisfy the users of the website.

Cross Browser Testing

Various browsers were tested with the game link to ensure it would work on the browsers selected and available to use. This would ensure the website was available to a vast number of users. Giving the website a better fan base due to no limitations using the books 2 review website.

to find new books available to read
to read reviews of books by other users. With Easy access to review the information
to be able to read the book description
to be able to register for the book webpage to track my reviews
to be able to add books of my choosing
to have the ability to create/add reviews on any book of my choice
To have the ability to update one of my reviews if I wish to change it
to navigate through the web page with ease
to add a like or dislike on the book I 'am reviewing
to see the latest reviews when selecting a book to view
to be able to search for books if a database is large or small
the ability to delete any reviews I want to change or start again.

Note - Safari is not available unfortunately I do not possess access to this system. This will be provided for users to test and view if possible. At this point in time, I cannot test if it is suitable on the application/browser available.

Device Testing

To enable all device were tested and various device were explored tablets and mobiles where considered to test the game on. This would ensure this works on multiple devices.

Lighthouse Audit

"Identify and fix common problems that affect your sites performance, accessibility, and user experience."

Accessibility testing was conducted on the site to ensure it was suitable and performing to a suitable score for users and their experience on the website. This way the site can potentially work to its maximum performance. This is completed by selected the lighthouse option on the developer tool and generating a report for the selected device. This can be mobile or desktop devices.

The result for mobile was 100 which is acceptable for the website and performance. As mentioned in the mobile review improvement to be completed as a future improvement. . (Image below first check for Books 2 review after the website was functioning)

The results for desktop are 99 which is a worthy score for a website but I would look to improve the score where possible this can be a future update and performance improvement. (Image below first check for Books 2 review after the website was functioning)

Initially the first light house check for mobile and desktop was pretty and a good result but it can be improved which would be best practice to be actioned. Ensuring its suitable for all users. Therefore, the web pages have been reviewed to ensure the code works accordingly and any errors are resolved. The functionality of the website is every important and helps with the loading as well as displaying correctly and providing clean code. For errors the mark up validation was used to ensure any issues were resolved on the order. This was key to checking the code and making sure it would be accessible for all years of the web.

Mobile Accessibility Improved Lighthouse Results

DesktopAccessibility Improved Lighthouse Results

Bugs Discovered

Outstanding Defects

Safety measure to be implemented when deleting reviews as there is no warning asking are they sure on the system.
Users having the ability to delete books as it would need an approval response therefore easier for the admin to ahve full contorl over deleting books if required.
Book sizing has been sutied to the card size any image off scale or incorrectly would need size adjustments made into what size the image should be. This would prevent users uploading any size and fix scaling issues. Otherwise this could be removed. This was the .card section amending the attributes to display as required.
Manage reviews was provided on the website for admin suers only as this has not been set up completelty this produces a 500 error. The section will be for manageing reviews and books also. This will be completed as a future update. As there is no information to be supplied this will provide an error. The future purpose will be to ensure users have reviews deleted and confirmed. In addition books being deleted will display therefore the site would be renamed to admin managing. The reviews admin has been moved to the users profile instead. As this was more of a suitable location.

Deployment

Connecting to MongoGo DB

When setting up the website we used MONOGO DB as a reuslt a guide has been provided below any issues the link to MONGO DB has been provided to complete the set up required prior to the Heroku deployment. MONGO DB is a very reliable and useful databsae tool for the project requirements.

Register and Log into MongoDB
Create a new cluster
Select the region that applys to your region free or if there is a charge. If you can select a free region that will be the best option.
Once select scroll down checking the charges if any are applicable you can rename the cluster to a name of your choice.
Once you have signed up create a new project giving the decided name in relation to the project or call is cluser 1 if required
Once completed create the cluster, select your cluster and then follow the instructions then create a database.
Name the databse relevant to your project and provide the collection name.
From here the database allows you to various collections. Creating a collection can provide insert the documents necessary for a particualr type of database e.g. car manufacturer.
Once the database has been completed the access will be required to pull the information to the website tool being used e.g. GitPod. Under security add a new database user if its not completed already. Ensure the password authenitcation method has been select for this example. User name and password to be updated and read and write to any database selected.
Once the collection and user database access has been selected. The connection will be required on the system to connect the database to the gitpod.
Select the clusters dat storage and select connect. If the mongo shell is required to be installed follow the instructions to complete the connection.
Once completed you want to connect the applciation to your gitpod. Teh application code will be supplied and the password will be required and the dbname. this will be into the env.py file created.

Deploying the Application to Heroku

Heroku was used for the deployment of the website instructions have been supplied below to complete the action.

To deploy Books2Review to heroku, take the following steps:
Create a requirements.txt file using the terminal command pip freeze > requirements.txt.
Create a Procfile with the terminal command echo web: python app.py > Procfile.
Git add and git commit the new requirements and Procfile and then git push the project to GitPod.
Create a new app on the Heroku website by clicking the "New" button in your dashboard. Give it a name and set the region to Europe.
From the heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.
Confirm the linking of the heroku app to the correct GitHub repository.
In the heroku dashboard for the application, click on "Settings" > "Reveal Config Vars".
Set the following config vars:

Key	Value
IP	0.0.0.0
PORT	5000
DEBUG	FALSE
SECRET_KEY	your secret key mongo _db user database
MONGO_URI	mongodb+srv://:@mybookdb.zflml.mongodb.net/?retryWrites=true&w=majority
MONGO_DBNAME	your mongo db_name

To get you MONGO_URI read the MongoDB Atlas documentation Heroku or refer to the mongodb guide below.
In the heroku dashboard, click "Deploy".
In the "Manual Deployment" section of this page, made sure the master branch is selected and then click "Deploy Branch".
The site is now successfully deployed.

How to run the project locally

To clone the project from GitHub:

Click the following link for the GitHub repository.
Click on the code button
A dropdown window will appear titled 'Clone with HTTPS' - copy the link provided in the field below
Open your local IDE
Change the current working directory to the location where you want the cloned directory to be made
Type in git clone paste the URL copied from earlier (step 3) alongside the git command.
Press Enter, and the clone should subsequently be created.
Once the workspace has been completed create newfile env.py file with the variables table mentioned in mongoDB (Please obtain the correct details in the guide.
Action/Run pip3 install -r requirements.txt to update the file and requirements.
Run the tool with phython3 app.py

How to download github files and upload