Table of Content

Deployment:
Technologies Used:
Project Purpose:
User Stories:
Admin functionality:
Design:
Future Features:
Testing:
Bugs:
- username responsive profile in navigation:
- categories stopped functioning after first filter:
References:

Deployment:

The deployment of this project is done on heroku and the code is written using gitpod.

Assuming that you have created a MongoDB account with corresponding shema to be used in the project.

Assuming that the critical key value pairs that are confidential are stored in a env.py file that is not pushed to github.

Preperation:

Log in to Heroku and create a "New App" with a unique name
Before deployment we have to inform heroku what dependencies our project has in a txt file called requirements. To do this use the line of code below.

pip3 freeze --local > requirements.txt

The next step is to create a Procfile using the following command.

echo web: python run.py > Procfile

Push these files to github.
The key value pairs that are hidden in the "env.py" file need to be specified in the settings field. In Heroku go to settings and reveal "config vars" then specify the keys there.

Deployment with Heroku CLI:

Install Heroku CLI.
log in to Heroku using the following command.

$ heroku login

(if working on a computer locally) clone repository.

$ heroku git:clone -a econhub
$ cd econhub

To implement changes to the code and pushing them to Heroku use the following lines of code.

$ git add .
$ git commit -m "Commit comments here!"
$ git push heroku master

Deployment with Github Automatic Deployment:

Go to the GitHub tab in the deploy section on Heroku.
Type in you GitHub username and the corresponding repository that you want to deploy.
Enable automatic deployment.
Select the Branch you want to deploy, and click on the deploy branch button.

More Information:

For any additional information please refer to the deployment documentation which can be found here

How to clone git reposirtories can be found here

Technologies Used:

Languages:

HTML5
CSS3
Javascript
Python
- For dependencies I refer to the requirements.txt file
Jinja Templating language

Libraries and Frameworks:

Materialize
Jquery
Flask
Font Awesome

Tools

Gitpod
Git
Github
Heroku
Chrome Dev Tools
Mongo DB

Project Purpose:

To create a platform to spread, share, and discuss economic ideas. A place where academics and other people with interest in economics can look up terms, such as models and theories, using a community-built dictionary. Enable discussion in various chatrooms dedicated to specific topics.

Target Audience:

Academics
Economics, Finance, and Business students
Other people interested in economics

User stories:

As a user I should be able to register and account with a username, email, and password.
As a user I should be able to log in using a registered account.
As a user I should be able to add a term to the dictionary, with a category, name, definition, and source link.
As a user I should be able to edit the terms I have submitted.
As a user I should be able to delete the terms I have submitted.
As a user I should be able to update the terms I have submitted.
As a user I should be able to join a chatroom.
As a user I should be able to use chat functionality to communicate in the room with other logged in users currently in the chatroom.

Admin functionality:

As an admin I should be able to alter the categories available in the dictionary.
As an admin I should be able to edit and delete terms by all users.
As an admin I should be able to enter chatrooms to moderate debates.

Design

The purpose of this project is to appeal to an academic side, so I chose a grayscale theme, with simple buttons to give a text/bookish feeling. A light grey background on the body making the white cards pop like papers on a desk. It has links to economics resources at the bottom rather than generic social media links, sticking to the theming. Images reflect economic nature, such as charts, banks, and trading. The homepage was made in an effort to inspire economic reasoning by providing some wisdom from famous thinkers.

Future Features

These features were not considered due to time constraints

more backend logic to check for admin users rather than relying on the front end Menu
change admin to a bolean category, to enable multiple users to be admins rather than admin name
more modern design on chattroom
Source page to link economic data from example the OECD to facilitate study.
adding subcategories such as Finance > Techincal analysis
way to contact administrators
way for adminstrators to contact users
confirmation modals for delete functions and edit functions

Testing

Validation

HTML

Validated with https://validator.w3.org/ However it does not like jinja templating language

CSS

Validated with https://jigsaw.w3.org/css-validator/

style.css

JS

Validated with https://jshint.com/

script.js
chatt_refresh.js

Responsive Testing

Done on google chrome only and is the recomended browser

Mobile S 320px
Mobile M 375px
Mobile L 425px
Tablet 768px
Laptop 1024px
Laptop L 1440px

Design Test	Mobile S	Mobile M	Mobile L
homepage.html	poor	ok	ok
terms.html	poor	ok	ok
chattrooms.html	poor	ok	ok
micro_chatt.html	poor	ok	ok
macro_chatt.html	poor	ok	ok
political_chatt.html	poor	ok	ok
student_chatt.html	poor	ok	ok
register.html	poor	ok	ok
login.html	poor	ok	ok
profile.html	poor	ok	ok
add_terms.html	poor	ok	ok
categories.html	poor	ok	ok
add_categories.html	poor	ok	ok

Design Test	Tablet	Laptop	Laptop L
homepage.html	ok	ok	ok
terms.html	ok	ok	ok
chattrooms.html	ok	ok	ok
micro_chatt.html	ok	ok	ok
macro_chatt.html	ok	ok	ok
political_chatt.html	ok	ok	ok
student_chatt.html	ok	ok	ok
register.html	ok	ok	ok
login.html	ok	ok	ok
profile.html	ok	ok	ok
add_terms.html	ok	ok	ok
categories.html	ok	ok	ok
add_categories.ok	ok	ok	ok

Tested device formats:

Moto G4
Galaxy S5
Pixel 2
Pixel 2 XL
iPhone 5/SE
iPhone 6/7/8
iPhone 6/7/8 Plus
iPhone X
iPad
iPad Pro
Surface Duo
Galaxy Fold

**NOTE that is is not ideal to operate on the smalest screen. Though functional the is some overflow issue and is rather impractical on smaller screens. Though since it is expeted that the user is someone working on a laptop, or studying mobile devices are not the main device that the use might use.

Functionality

Function	status
Menubar is dynamically changing based on who is logged in	ok
Only admin can see category section	ok
Only admin can see all tasks in profile section to delete or edit	ok
Users can only see their own terms in their profile to delete or edit	ok
Register user function works	ok
Login function works	ok
Log out works	ok
Forms have a cancel button to return	ok
Terms can be added to the dictionary in the profile section	ok
Terms can be updated in the dictionary in the profile section	ok
Terms can be deleted from the dictionary in the profile section	ok
Terms can read in the dictionary	ok
User can enter chattrooms	ok
User can leave chattrooms	ok
User can communicate in chattrooms	ok
Admin can alter all terms	ok
Admin can add categories	ok
Admin can delete categories	ok

Bugs

username responsive profile in navigation

Bug when create username profile button in nav responsive to the user logged in. Complained about not having access to session cookie when logged out. Solved using a global variable g package

Found solution here

@app.before_request
def before_request():
    g.user = None

    if "user" in session:
        g.user = session["user"]

missing source information in adding terms

I forgott to include a key value pairs

        term = {
            "term_name": request.form.get("term_name"),
            "category_name": request.form.get("category_name"),
            "description": request.form.get("description"),
        }

fixed it by adding the last line:

        term = {
            "term_name": request.form.get("term_name"),
            "category_name": request.form.get("category_name"),
            "description": request.form.get("description"),
            "source_url": request.form.get("source_url"),
            "created_by": session["user"]
        }

categories stopped functioning after first filter

after using the categories filter selection in the search function, the categories dissapeared. This was solved as I forgott to add the categories section to each of the render template in the search sections in the app.py file

References:

inspiration

The basis of the project came as an application of the task manager miniproject and chatt-app miniproject. To merge and further develop the concepts and place them in a new setting.