This project is the third Milestone Project in the "Python and Data Centric Development" course at Code Institute.

Book Tips compiles the best and most popular books and creative reviews. It’s a fun and interactive way to geek out over your favorite reads and discover all the coolest new titles you won’t find anywhere else.

The live website of Book Tips can be viewed here

• 1. User experience (UX)
  • 1.1. Project goals
  • 1.2 User stories
  • 1.3 Design
  • 1.4 Information architecture
  • 1.5 Mockup designs
• 2. Features
  • 2.1 Existing features
  • 2.2 Features left to implement in the future
• 3. Technologies used
• 4. Testing
• 5. Deployment
• 6. Credits
• 7. Acknowledge
• 8. Disclaimer

• Making a full-stack site that allows users to manage a common dataset about a particular domain.

• Making a full-stack site that uses HTML, CSS, JavaScript, Python+Flask and MongoDB.

• Creating a website as a discovery tool for readers, highlighting the best new books.

• Creating a website that is simple to understand and easy to navigate.

• The users of the website can make use of CRUD (create, read, update and delete) for the books and reviews.

First-time visitor/unregistered user goals:

Registered user goals:

• Colour scheme

  Main colour palette:

  • #5e35b1 deep-purple darken-1;
  • #311b92 deep-purple darken-4;
  • #ede7f6 deep-purple lighten-5;
  • #01579b light-blue darken-4;

• Icons

The icons used in the project are provided by Font Awesome. The Icons have functional purposes, such as the hamburger menu.

• Images

The images I used for this project came from OpenLibrary. Images are used for the home page and all the reviews.

• Defensive design

  • The user is not able to break the site by clicking on buttons.
  • The signup form:
    • The username must be between 5-15 characters and must only contain letters and numbers.
    • The password must be between 5-15 characters and must contain at least one number, one uppercase and one lowercase letter.
  • The email address must be in the following format: characters followed by a @ symbol, followed by more characters and then a ".".

• Interactive design

  • The website has to be easy to navigate.
  • The user can quickly find the information he/she wants to find.

The project has four collections in the database. The database structure in MongoDB is as follows:

• there are 4 collections: books, profiles, reviews, users;
• there are 2 indexes on book_title and book_author_name;
• there are relationships between collections as described below;

I used DBDiagram to create a diagram of the database. The code to produce the diagram is here:

Table users {
  _id ObjectId [pk]
  username string
  password string
}

Table profiles {
  _id ObjectId [pk]
  user_email string
  user_firstname string
  user_lastname string
  img_url string
  user_id ObjectId [ref: > users._id]
}

Table books {
  _id ObjectId [pk]
  book_title string
  book_author_name string
  book_cover_url string
  book_isbn string
  book_description string
  user_id ObjectId [ref: > users._id]
}

Table reviews {
  _id ObjectId [pk]
  review_text string
  user_id ObjectId [ref: > users._id]
  book_id ObjectId [ref: > books._id]
}

This is the diagram:

Other details about the database structure are in the Deployment section

Mockup designs are made with Balsamiq.

Initial wireframes with some comments for both desktop and mobile devices can be found here.

• An attractive and simple layout with consistency.
• Simple navigation throughout the website by using the navigation bar.
• Showing added books simple and clearly

• The home page shows an introductory text followed by a search box. Underneath there is a list of all books.
• Unregistered users are able to register on the "Register" page

• Books and reviews can be created, read, updated and deleted (CRUD) by the users.
• Users can search for Books using the search bar.
• Users have access to their profile, with an overview of all their added books and reviews.

• An unregistered user can create a new account on the web application.
• Registered users can login with their existing accounts.
• Registered users can easily log out.
• If a user creates a new account, logs in or logs out, a flash message will appear as feedback for the user.

• Adding votes. Users vote their favorite books and can see them on their profile page.
• Add categories for books.
• Instead of using URLs for the book covers, we could implement a new feature to upload the cover as an image.
• A book or a review should not be deleted by just one click. If someone clicks on the delete button, there will be a pop-up with a confirmation.
• Add pagination for the list of books and the list of reviews
• Add functionality for an Administrator account which is able to delete any book, review or profile
• When the user is logged in, write the user's username on the navbar

• HTML5
  • HTML5 provides the structure and the content for my project.
• CSS3
  • CSS3 provides the style of the HTML5 elements.
• jQuery
  • jQuery used as the JavaScript functionality.
• Python
  • Python provides the backend of the project.

• Gitpod
  • The GitPod is used to develop the project.
• Git
  • The Git was used for version control to commit to Git and push to GitHub.
• GitHub
  • The GitHub is used to host the project.
• Google Fonts
  • Google Fonts is used to provide the font roboto for all the text that is used in the project.
• Balsamiq
  • Figma is used to create the mockup designs for the project.
• Materialize
  • Materialize is used for the design framework.
• MongoDB
  • MongoDB is the fully managed cloud database service used for the project.
• Heroku
  • Heroki is the cloud platform to deploying the app.
• Flask
  • Flask is the web framework used to provide libraries, tools and technologies for the app.
• Jinja
  • Jinja is used for Python templating
• Werkzeug
  • Werkzeug is used for password hashing and authentication and autohorization.

• Chrome DevTools is used to detect problems and test responsiveness.
• Autoprefixer
  • Autoprefixer is used to parse the CSS and to add vendor prefixes to CSS rules.
• W3C Markup Validation Service
  • The W3C Markup Validation Service is used to check whether there were any errors in the HTML5 code.
• W3C CSS validator
  • The W3C CSS validator is used to check whether there were any errors in the CSS3 code.
• JShint
  • JShint is a JavaScript validator that is used to check whether there were any errors in the JavaScript code.
• PEP8
  • The PEP8 validator is used to check whether there were any errors in the Python code.
• Black
  • Black is the uncompromising Python code formatter.

All the following manual testing was implemented on both desktop and mobile devices.

When I click on "All Books", I can see book cards displayed in rows, 3 books per row. In that page, I can see the book cover, book title and author name. Clicking on the book card redirects me to the /book/view page, where I can see all the detailed information about the book, including the reviews. I tested this functionality as an unregistered user and as a logged in user and it worked in both cases.

I created my own account, as well as a few test accounts to test this functionality. Clicking on the "Register" button in the navbar opens the form, where I can put the desired username and password to create a new account. I tried to input an existing username, not matching passwords in "password" and "confirm password" fields, and input less than 5 or more than 15 charachters. In all cases I got a corresponding feedback message. As well as that, I tried to leave an empty field and submit the form, but got an error message again asking to fill the field. When the form was successfully submitted, I was redirected to the home page, seeing a message that my new account was created. I also checked the link to the Login page at the bottom of the form, which worked well.

Clicking on the "Login" button in the navbar opens the form, allowing me to login to my account. I tried to leave empty fields or input incorrect details, but I was not able to submit the form if something was entered incorrectly. After a successful login I was redirected to the home page, seeing the message that I was logged in.

This functionality is located in the /profile/edit page. I tried to write a different password than my own password and I received feedback that my current password was incorrect, thus I couldn't update my password. I tried to put less than 5 characters and more than 15 characters on my new password and I got a feedback message, thus I couldn't update my password. After I correctly put my current password and the new password, the password was updated successfuly and I was redirected to the /profile/edit page, as intended.

This functionality is located in the /profile/edit page as a separate form. I tried to put spaces in the First Name and Last Name fields and submit the from. I received a feddback message saying that I didn't have the proper format. I tried to write an invalid format for the email address and submit the form. I received feedback that the email address had incorrect format. After I correctly fill in all the fields and submit the form, the profile was updated successfuly.

I deleted some testing accounts to test the functionality. When clicking the "Delete account" button on the /profile/edit page, a modal appears. Clicking again on Delete account deletes my account. I checked the database and all the reviews and books created by the repsective user were removed as well.

I added a few test books to check the functionality throughout the development. If I leave some of the required fields empty, I will not be able to submit the form. I also tried to add a book without the URL image provided, to check if the placeholder is in place and it works well. After I added a book, I got a feedback message saying that the book was added.

If I am the user who added the book in the first place, I can see the book in the /profile/view page, together with the buttons "Edit" and "Delete". I also tried to change the link manually in the browser to edit other's book. I received a feedback message stating that I am not allowed to edit the respective book. Being the author of the book, I can view the form with pre-populated fields and can change anything that I want. I tried to edit a number of books and edit different fields, everything worked correctly.

As an unauthenticated user I tried to delete a book by using the /delete_book/<book_id> page but I received a feedback message stating that I could not delete the book because I was not authenticated. As an authenticated user I went to /profile/view where I have listed all my added books. I chose a book and clicked on the Delete button underneath. The book was successfully deleted. Also, all the reviews pertaining to that book were also deleted.

The link in the navbar leads to the home page, where I can see all the books and the search bar. All functionality works well.

This functionality is implemented in the /book/view page. As an authenticated user, when clicking on the Add review button, I am redirected to //add_review/<book_id>page where I am presented with a form to add the review. After I write the review and submit the form, the review successfully apear in the database. I verified that an unauthenticated user cannot add a review.

This functionality is implemented in the /profile/view page, under the Reviews section. When clicking on the Edit button for a specific review, I am redirected to the /edit_review/<book_id> page. The form is pre-populated with the existing review. After making changes to the review text and submitting the form, the review is correctly updated in the database.

This functionality is implemented in the /profile/view page, under the Reviews section. When clicking on the Delete button for a specific review, the review is deleted.

An unauthenticated user can see all the reviews for a book on the /book/view page. I tested this functionality by adding a few reviews to a book from different accounts and then checking that all the added reviews are displayed under the respective book. An authenticated user can see all the reviews for a book on the /book/view page. Besides that, the user can see it's own reviews in the /profile/view page. I tested the functionality on the /profile/view page by adding one review per book to multiple books and then checking that all the previously added reviews are shown on the /profile/view page.

I manually changed the URL in the browser to get a non-existing page to test errors-handler function. Custom pages load and the link to the home page works well.

All links in the navbar were manually tested to ensure that they are pointing to the correct destination.

Apart from that, I was manually testing the app with debugger: debug=True throughout all the development process. Every time when there was an error (when app crashed), the debugger displayed an error message to the view, that allowed me to find the location of the error and fix it.

I also asked my friends and family members to thoroughly test my website in different devices. So, a number of new accounts were created and new books/reviews were added/edited and some of them were deleted.

All the HTML content of all the pages was tested through W3C Markup Validation Service. No errors were found.

CSS file was tested through W3C CSS Validation Service. No errors were found.

JS file was tested through Esprima and JSHint validators, code was syntactically valid.

All python files were tested through PEP8 Online validator and were completely PEP8 compliant.

This website had been being tested during the development across multiple browsers (Chrome, Safary, Opera, FireFox) and on multiple devices: mobile (iPhone 5, 6, 8, Samsung Galaxy, Sony Xperia), tablets(iPad, iPadPro) and laptops (with HiDPI and MDPI and touch screens).
As well as on Google Chrome's developer tools to see how it looks across all the different device screen sizes to ensure compatibility and responsiveness.
I also used Am I Responsive online tool for checking responsiveness on different devices.
Plenty of changes were made and necessary media queries added to make the website fully responsive.

• Python3
• Github account
• MongoDB account
• Heroku account

To make a local clone, follow the following steps.

1. Log in to GitHub and go to the repository.
2. Click on the green button with the text "Code".
3. Click on "Open with GitHub Desktop" and follow the prompts in the GitHub Desktop Application or follow the instructions from this link to see how to clone the repository in other ways.

1. Install all the requirements: Go to the workspace of your local copy. In the terminal window of your IDE type: pip3 install -r requirements.txt.
2. Create a database in MongoDB
   • Signup or login to your MongoDB account.
   • Create a new Database called "Booktips" in MongoDB Atlas. .
   • In the "Booktips" database create the following four collections: books, profiles, reviews, users.

     Books

     {
         _id: <ObjectId>,
         book_title: <String>,
         book_author_name: <String>,
         book_cover_url: <String>,
         book_isbn: <String>,
         book_description: <String>,
         user_id: <ObjectId>,
     }
     

     Profiles

     {
         _id: <ObjectId>,
         user_email: <String>,
         user_firstname: <String>,
         user_lastname: <String>,
         img_url: <String>,
         user_id: <ObjectId>,
     }
     

     Reviews

     {
         _id: <ObjectId>,
         review_text: <String>,
         user_id: <ObjectId>,
         book_id: <ObjectId>,
     }
     

     Users

     {
         _id: <ObjectId>,
         username: <String>,
         password: <String>,
     }
     

   • You need to manually create indexes in books collection, for the book_title and book_author_name, otherwise you will not be able to perform a search in the database within those fields.

     $ python3
     
     from app import mongo
     mongo.db.books.create_index([("book_title", "text"), ("book_author_name", "text")])
     

3. Create the environment variables
   • Create a .gitignore file in the root directory of the project.
   • Add the env.py file in the .gitignore.
   • Create the file env.py. This will contain all the environment variables.

   import os
   os.environ.setdefault("IP", "Added by developer")
   os.environ.setdefault("PORT", "Added by developer")
   os.environ.setdefault("SECRET_KEY", "Added by developer")
   os.environ.setdefault("MONGO_URI", "Added by developer")
   os.environ.setdefault("MONGO_DBNAME", "Added by developer")
   

4. Run the app: Open your terminal window in your IDE. Type python3 app.py and run the app.

1. Set up local workspace for Heroku

   • In terminal window of your IDE type: pip3 freeze -- local > requirements.txt. (Heroku detects this as a Python app. The reason that they've been able to detect Python is because we have a requirements.txt file)

   • In terminal window of your IDE type: echo "python app.py" > Procfile (The file is needed for Heroku to know which file is needed as entry point.)

2. Set up Heroku: create a Heroku account, create a new app and select your region.
3. Deployment method 'Github'
   • Click on the Connect to GitHub section in the deploy tab in Heroku.
     • Search your repository to connect with it.
     • When your repository appears click on connect to connect your repository with the Heroku.
   • Go to the settings app in Heroku and go to Config Vars. Click on Reveal Config Vars.
     • Enter the variables contained in your env.py file. it is about: IP, PORT, SECRET_KEY, MONGO_URI, MONGO_DBNAME
4. Push the requirements.txt and Procfile to the repository.

   $ git add requirements.txt
   $ git commit -m "Add requirements.txt"
   
   $ git add Procfile 
   $ git commit -m "Add Procfile"
   

5. Automatic deployment: Go to the deploy tab in Heroku and scroll down to Automatic deployments. Click on Enable Automatic Deploys. By Manual deploy click on Deploy Branch.

Heroku will receive the code from Github and host the app using the required packages. Click on Open app in the right corner of your Heroku account. The app wil open and the live link is available from the address bar.

• Text in Home page - Reedsy
• Text in Home page - Bookpage

• Books images and descriptions
  • OpenLibrary.
  • [Goodreads]https://www.goodreads.com
• Default book cover
  • https://twitter.com/openbookpublish
• Home page image
  • https://foodtank.com/news/2021/07/books-on-food-tanks-summer-reading-list/

• Mini Project | Putting It All Together_Tim Nelson_CodeInstitute
• Stack Overflow
• Materialize

• I received support for this project from my mentor Precious Ijege at Code Institute.
• My husband Bogdan Musat and son David Musat for their immense support, patience and love!
• All friends and family that took the time to test this for me.

Back to top!