The Lost Page

Bookworm's last resort

Table of Contents

1. UX

   • User Stories
   • Design
     • Framework
     • Icons
     • Typography
   • Wireframes

2. Features

   • Existing Features
   • Features Left to Implement

3. Technologies Used

   • Front-End Technologies
   • Back-End Technologies

4. Testing

   • Validators
   • Compatibility
   • Known Issues

5. Deployment

   • Local Deployment
   • Heroku Deployment

6. Credits

   • Content
   • Media
   • Code
   • Acknowledgements

UX

This project is part of my Code Institute Full Stack Software Development studies, specifically the Data Centric Development module. The objective for this milestone project is to "Create a web application that allows users to upload details of books, including book name, author name, link to cover image and any other relevant fields.", using the CRUD operations of Create, Read, Update, and Delete for their books. Users can also search for books that contain searched word or letter in author's name, title or genre.

The Lost Page can be viewed https://the-lost-page.herokuapp.com.

The Website is fully responsive and uses Mongo DB to hold book collection. Some books in collection are my personal favorites so feel free to add your favorite books.
By clicking on the share link modal is shown with an option to copy link of the book.

"As a user, I would like to:"

• view the website from any device (mobile, tablet, desktop)
• search for books by book name, author name or genre
• add my own favorite book
• view book details
• edit book information
• delete book from database
• share a particular book
• buy book online

Design

The Lost Page was designed to be simple and presentable using book images as links to book information page.

Framework

• Bootstrap 4.4.1
  • I really like Bootstrap as a framework with great number of components and its simple-to-understand documentation.
• jQuery 3.4.1
  • In an effort to keep the JavaScript minimal, I have decided to use jQuery as foundation to my scripts framework.
• Flask 1.1.1
  • Flask is a microframework that I've used to render the back-end Python with the front-end Bootstrap 4.

Icons

• Font Awesome 5.11.2
  • I only used icons for home, social networks, share icon and copy for modal.

Typography

• I have incorporated two of Google Fonts throughout the entire application. The font I have selected for page titles is Indie Flower and Roboto for rest of the text.

Wireframes

• For my wireframes, I have used Mockflow
• Images can be viewed in my Wireframe folder

back to top

Features

Existing Features

View All Books

• On the books page, all books are initially displayed in order of adding.

Search Books

• On the books page above books is a search bar that uses users query to search books by author name, book name or genre. Trying to make it case insensitive resulted in a error and becouse of lack of time, the search bar is case sensitive.

Links to store

• Under every book on the view book page are links to store. They are not connected to anything at this time.

Add a Book

• [CRUD] Create or 'add' a new book. Defensive programming in place means users must adhere to minimal requirements when adding a new book.

View a Book

• [CRUD] Read or 'review' books can be achieved by clicking on book image on books page. It is also possible to share a link to book via the share icon and modal.

Update a Book

• [CRUD] Update or 'edit' book information.

Delete a Book

• [CRUD] Delete or 'remove' a book from the website and database. Deletion requires confirmation in the form of modal.

Features Left to Implement

Because of lack of time for finishing this project some requirements were not completed.

Pagination

• At this time all books are displayed on a single page. It works now but might take long time to load when more books are added.

Comment and upvote section

• In the future will be added on view book page for users to share information about books.

User account

• Password protected account will be added with a feature of saving books to favorites and shopcart.

Dynamic search bar

• Toggle buttons for categories will be added and they will display books from selected genres on the books page.

back to top

Technologies Used

• VS Code - Used as my primary IDE for coding.
• GitHub - Used as remote storage of my code online.

Front-End Technologies

• HTML - Used as the base for markup text.
• CSS - Used as the base for cascading styles.
• jQuery 3.4.1 - Used as the primary JavaScript functionality.
• Bootstrap 4.4.1 - Used as the overall design framework.

Back-End Technologies

• Flask
  • Flask 1.1.1 - Used as a microframework.
  • Jinja2 2.10.3 - Used for templating with Flask.
  • Werkzeug 0.16.0
• Heroku
  • Heroku - Used for app hosting.
• Python
  • Python 3.7.1 - Used as the back-end programming language.
  • MongoDB Atlas - Used to store my database in the 'cloud'.
  • PyMongo 3.10.0 - Used as the Python API for MongoDB.

back to top

Testing

Testing information can be found in separate testing.md file

Validators

HTML

• W3C HTML Validator - Unfortunately the W3C Validator for HTML does not understand the Jinja templating syntax, so it therefore shows a lot of errors with regards to {{ variables }}, {% for %} {% endfor %}, etc. Aside from the Jinja warnings and errors, all of the remaining code is perfectly validating.

CSS

• W3C CSS Validator - Did not show any problems

JavaScript

• JShint -
  • There are 3 functions in this file.
  • Function with the largest signature take 0 arguments, while the median is 0.
  • Largest function has 3 statements in it, while the median is 3.
  • The most complex function has a cyclomatic complexity value of 1 while the median is 1.
  • Undefined variable $ for jQuery 6 times Python
• PEP8 Online
  • My .py file returns 2 errors
  • E127 continuation line over-indented for visual indent
  • E128 continuation line under-indented for visual indent

Compatibility

To ensure a broad range of users can successfully use this site, I tested it on major browsers in both desktop and mobile configuration.

• Chrome
• Edge
• Firefox
• Opera
• Internet Explorer

Autoprefixer was used for parsing CSS and adding vendor prefixes

Known Issues

• Search bar is case sensitive at this time so words need to be capitalized
• If no image was added to book, on books page alternative image is added, however I could not make it fit on book details in time. Instead there is blank space with text added in html alt="".
• Edit book information form does not display description. Textarea returns empty every time.

back to top

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.

Instructions

1. Save a copy of the github repository located at https://github.com/sWrAAb/Lost-Page by clicking the "download zip" button at the top of the page and extracting the zip file to your chosen folder. If you have Git installed on your system, you can clone the repository with the following command.

git clone https://github.com/sWrAAb/Lost-Page

2. If possible open a terminal session in the unzip folder or cd to the correct location.

3. A virtual environment is recommended for the Python interpreter.
   To create virtual environment enter the command:

python -m .venv venv

4. Activate the .venv with the command:

.venv\Scripts\activate 

4. If needed, Upgrade pip locally with

pip install --upgrade pip.

5. Install all required modules with the command

pip -r requirements.txt.

6. In your local IDE create a file called .flaskenv.

7. Inside the .flaskenv file, create a SECRET_KEY variable and a MONGO_URI to link to your own database.

8. You can now run the application with the command

python app.py

9. You can visit the website at http://127.0.0.1:5000

Heroku Deployment

To deploy The Lost Page to heroku, take the following steps:

1. Create a requirements.txt file using the terminal command pip freeze > requirements.txt.

2. Create a Procfile with the terminal command echo web: python app.py > Procfile.

3. git add and git commit the new requirements and Procfile and then git push the project to GitHub.

4. 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.

5. From the heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.

6. Confirm the linking of the heroku app to the correct GitHub repository.

7. In the heroku dashboard for the application, click on "Settings" > "Reveal Config Vars".

8. Set the following config vars:

• To get you MONGO_URI read the MongoDB Atlas documentation here

8. In the heroku dashboard, click "Deploy".

9. In the "Manual Deployment" section of this page, made sure the master branch is selected and then click "Deploy Branch".

10. The site is now successfully deployed.

back to top

Credits

Content

Books and descriptions were linked from various websites such as:

• Goodreads
• Wikipedia

Media

Logo

Logo was made on Freelogodesign

Images

All images except logo and image that is shown when no cover image is selected are linked with url.

Code

• Template code was taken from Bootstrap and W3Schools
• CSS code from CSS Tricks
• Python code from Code Institute lessons
• Search bar, show total books in navbar and show alternate image when no cover image was added from RealPython

Acknowledgements

• To my mentor, Spencer Barriball, for incredible mentoring, support and for assisting during my project reviews with great insight.

back to top