search

billdavisjr / quotations-space

Continuation of my Code Institute 3rd Milestone project - Quotation(s).space and quooqle.com site - using Python, Flask, MongoDB, etc.
https://quotations-space.herokuapp.com/
0 stars 0 forks source link
database quote

readme

Site name: "Quotations.Space!"

IMPORTANT NOTE: THIS IS NOT THE CODE INSTITUTE PROJECT SUBMISSION! That's in another repository and site to be found at:

- https://wbd-fsd-project3.herokuapp.com/

- https://github.com/billdavisjr/wbd_fsd_project3.git

- https://git.heroku.com/wbd-fsd-project3.git

THIS REPO IS THE CONTINUATION OF THAT CLASS PROJECT

AUTHOR CONTACT INFO

Bill Davis

PROJECT INTRODUCTION

Reasoning for the project

For several decades now I have used a quotations database I created to learn how to program on a variety of systems, from OpenVMS DCL command line on VAX and Alpha minicomputers, to Visual Basic 6 and VB.NET / Visual Studio IDEs to create desktop apps on Windows, to Java desktop apps (.jar) on Windows and Mac (including a stand-alone desktop app on the Mac) and then on to JavaServer Pages using Eclipse. This allows me to learn how to use the basic CRUD concepts on a particular platform. Over the years I have collected thousands of quotes to use as well.

So of course, I wanted to do the same thing when taking this course on modern full-stack web development from Code Institute.

I realized quickly that the Task Manager mini-project that is developed as you go through the Data Centric Development module of the FSD course would be a perfect fit for my Quotations project, so I actually started developing it in parallel as the course went through the mini-project, adapting and modifying it for my needs. For example, I added a search feature and some sorting of the databases (quotations sorted by person's name, categories sorted by category name) as well as data items such as "favorite" (instead of urgent), source of the quote, star rating (1-5), and date said.

I'll be continuing to develop (a copy of) this project after I have finished the Code Institute Course for personal use and perhaps as a side business/hobby. I've actually purchased the domain name quotations.space and quotation.space (singular) for use with this site.

#

WHO IS THIS WEB SITE FOR?

Right now this web site is for my personal/family use in collecting quotations that I enjoy. In the future I would like this site to be \available for the use of anyone in the world to locate, contribute and save their own quotes or quotes from a large database of existing quotes.

WHAT DO THEY WANT TO DO WHEN THEY VISIT

#

USER STORIES

User stores are statements of the form "As a user type, I want to perform an action, so I can achieve a goal.

FUTURE:

#

DESIGN

MOCKUPS / WIREFRAMES

Mockups/wireframes of the design for the main page and the add and edit quotations pages are in the source code repository in the /design/mockups folder.

The categories page and add/edit categories pages are the same as the quotes and add/edit quotes page, just simpler and missing the search field which was unnecessary.

PAGE DESIGN

The site is designed to present the quotes in the form of "cards". I wanted it to look like quotes you see hanging on a wall. There is an unobtrusive button at bottom left of the card (the popular 3-line "hamburger" icon) that lets you expand the card and show more information about the quote such as the category, source of the quote (if known), date the quote was said (if known), star raging (0-5 with half-stars allowed) and "favorite" status. This favorite status is also shown at bottom right of the unexpanded quote if the quote has been set as a favorite.

Clicking the icon also reveals the edit (pencil) and delete (trash can) icons for that particular quote so you can edit or delete that quote; I do need to add a confirmation to that delete. I will be implementing that through Materialize Modals in some future version (not the one I submitted to Code Institute.)

A floating mobile menu button hovers in the bottom right corner of the page as it does in many modern mobile apps from Google and other sites. Clicking it expands a menu of functions you can select to add new quotes or categories, display the list of quotes or categories, etc. This floating menu button is available on ALL pages.

To add or edit the quotes or view a list of categories, you're taken to a separate page with fields you can fill out.

There is also an "About this site" button on the floating menu.

The desktop and mobile sites look the same and is intentionally as minimal as possible. I don't want the interface to distract from the quotes.

Since the site is called "Quotations.Space!", I found a "Star Trek" like animated GIF of stars streaming past and used that behind the header. I have also registered quotations.space and quotations.space as domain names and will be pointing them at a future version of this site when it is ready for the public.

SITE FEATURES

#

DEPLOYMENT

NOTE: This project started from the Code Institute student template for Gitpod which preinstalls most of the tools needed for basic development. It does not seem to be required to stand up this site from the Git repo in GitPod or Heroku, though you do need to install a few Python frameworks with the pip3 command in GitPod. The site is configured to have Heroku install those dependencies through the requirements.txt file, automatically.

REQUIREMENTS

As of this writing, the requirements.txt file lists the following Python frameworks and versions. Some are additional frameworks used by the ones listed above:

NOTE: These are not necessarily the latest versions of these frameworks.

#

SETUP PROCESS

Set a database and the following collections:

DATABASE STRUCTURE

    Database: quotations_space

        Collections:

            quotations
                _id (autogenerated)
                category_name               String
                quotation_text              String
                person                      String
                source                      String 
                date_said                   String
                stars_rating                String
                is_favorite                 String

            categories
                _id  (autogenerated)
                category_name               String

https://devcenter.heroku.com/articles/config-vars

These IP addresses are set up in the Heroku web app for a particular app under Settings in the "Config Vars" section. I think the system provides / set the IP and PORT variables anyway.

#

Starting up the Project

STARTING LOCALLY (in GitPod)

To run a local copy of the site on GitPod, type:

To STOP the web server running the site, press Ctrl+C in the window where you ran $python3 app.py command and the server will stop and return you to the command prompt.

STARTING ON HEROKU

Once the app has been deployed to Heroku you can use Heroku itself to start/stop the app.

You can also start (or restart/deploy the app after changing the code) by associating the Heroku git repository with the local git repo as a remote:

Then after changing some code do a:

and a

to push to the heroku remote Git repo too. This also rebuilds and redeploys the app on Heroku.

#

TESTING

TEST PLAN

Testing environments

EQUIPMENT:

NOTE: I do not have access to Android or Windows or Linux equipment to test on at this time.
I cannot test on Windows at work because Heroku is blocked and we are not allowed to install software on our machines.

TESTS

NOTE: Problems should be logged in in the Issues tab on the GitHub repo.. (they were when I was created this site, but are not part of the Git repo and so were not transferred when I cloned this site to a new repo for submission to CodeInstitute.)

PLATFORMS & BROWSERS:

CODE VALIDATION

The GitPod IDE has linters/validators for HTML, CSS, JavaScript, Python etc. I installed one for Jinja from the Extensions icon in the lefthand sidebar in GitPod.

Because this code uses Flask and Jinja templates, many of the HTML templates are fragments of HTML and so don't entirely validate (usually it's only just the first line) and have tagged {% %} code lines. For those you simply have to keep an eye on the "Problems" tab in the GitPod IDE and see if anything shows up beyond a few errors you'll always get on the template HTML files, which are:

The GitPod IDE will mark files with code validation problems with a tiny badge on the document icon in the file explorer and also in the tab at the top of the editor when the file is being edited.

Also keep an eye on the last tag in the template HTML files as it will often be flagged as a problem if you have unbalanced open/close tags somewhere.

The validator for Python flags long lines, as well, and this is a good indication to clarify long, complicated lines into several simpler, cleaner, clearer lines. The example mini-project "Task Manager" frankly had a number of those. Indenting helped makes them clearer, but refactoring into separate lines with a single clear purpose also made for better, less complicated code.

#

FUTURE PLANS

I have many future plans for this project. Note that I have cloned a copy of the GitHub repo I submitted for grading, and am continuing development on that copy.

Ideas include:

#

ATTRIBUTIONS / CREDITS / ACKNOWLEDGEMENTS

and the frameworks they in turn might use; see the requirements.txt file (or view it with $pip3 freeze command.)