Extinction Rebellion - online aims to provide access to various resources across the internet on climate crisis, extinction rebellion and news and data in a user-friendly way. Different types of documents are grouped in categories and new entries can be added by anyone at any time. Logged in users can also edit and delete records as well as upvote these they deem valuable.

It is available at http://xr-online-resource.herokuapp.com/

• Design
• Colours
• Fonts
• User objectives
• Developer objectives

• Existing features
• Features left to implement

'Extinction Rebellion - online resource' came to my mind as something very simple and clear to use. The layout from the beginning was supposed to be minimalistic and unobtrusive. Main goal of this website after all is to facilitate access to other sites and doing it efficient, not elaborately.

The objective for me while building this website was to achieve maximum usability in minimalistic look. The site is supposed to be lightweight, toned and serve its main purpose above everything else - provide easy access to resources spread across the internet. Therefore, no pictures and redundant elements are present across the website.

The process started with creating mockups that served as a guide as to what pages should be created, how the information should be spread across them and how they are supposed to look like.

The design was based loosely on Extinction Rebellion main design programme as well as inspired by posters designed for Polish branch of XR.

Mockups can be found in the figma project

Colour scheme is clear and straighforward:

• #202020 - background
• #000000 - navigation and button backgrounds
• #ffffff - font and icon color
• #00FF66 - link indicator in these instances where links are not styled as buttons
• #F44336 - warning text

Limited palette makes sure the focus of the user is directed straight to the information. It is intended to present but not overshadow the content, making sure it stays in the background.

On the other hand, placing the elements on the pages makes sure that, despite limited colors, the website is not boring to the eye.

• The resource uses two fonts across all pages - Fuxced Caps, which is offcial Extinction Rebellion font and simple sans-serif font.
• The reasoning behind it was simple - one is brand font specified by XR brand guide and is used for titles and headings, the other is there just to make sure the rest of the website displays properly.

• The website has been designed for people needing access to various resources spread across the internet. We all probably were in that place before, where we know something (article, document, video) exists, but any attempt to googling brings no relevant results. This small database is intended to make this process easier.
• Links are grouped by categories. Categories represent type of media referenced in the database: Articles, News, Social media posts, Blogs/Vlogs, offline sources, Documents, Other sources. This reasoning was chosen above other proposed categories split. The other proposed solution was to group resources by their themes. Unfortunately in many cases, resources are either multi-thematic. Another issue with that solution was defining categories and making them crystal clear to the end user. Categories representing types of resources rather than their subjects/themes are more strict and therefore easier to understand and use.
• Voting option (available to logged in users) allows users to vote on helpful resources, so they appear higher on the page (and may be noticed by others) more easily.
• All users can add links, logged in users can on top of that edit records if they feel like they can improve them or delete these, that are irrelevant.

• User-friendly front-end application, allowing easy and frustration-proof access to the database
• Adding little brick to the global project such as Extinction Rebellion
• Portfolio use

• User engaging in the online discussion, needing specific links as arguments
• User searching a resource they remember but cannot find via google
• User looking for more information on a specific subject

• To serve its purpose, at least in a limited capacity

• Easy access to all records on the main page (read)
• Voting function on each record, allowing user to have an influence over how the records are sorted/displayed by default
• Option to sort records by date added or number of votes
• Every record have it’s own detail page, that displays additional informations/options
• including editing the information about the record (update)...
• ...and deleting the record entirely (delete) - at least from accessing it from the front-end, the records are moved to a hidden collection, as a way of protecting perfectly valid records to be lost due to a mistake or malicious action.
• Easy way to add new entries - user fills out the form and the link with all it’s information is added to the database instantly (create)

Important! Some options are only available for logged in users. To access them use credentials stored in CREDENTIALS.md

• Following links are visible: Home, Add new link, Categories and Log in (or Log out if user is already logged in)
• Users on mobile devices have these in foldable menu
• Desktop users have these on the top of the site in a fixed navigation bar

• Allow easy navigation between pages without using browser's 'back' and 'forward' buttons

• Displays all records from the repo collection, from newest to oldest, with their title, category, URL and upvotes.
• Allows sorting displayed records by the time they were added or number of upvotes
• Allows to access their detail pages as well as go straight to the source material

• Allows user to log in, if their profile was created before
• As of the time of writing this document, user cannot register themselves.

• Provides overview of all categories available, along with their short descriptions (if available)

• Displays all records belonging to selected category in the same style as Home Page

• Displays detailed information on a single record - that includes everything displayed on the homepage + its description
• Allows logged in users to vote on a record
• Allows logged in users to edit or delete a record

• Contains form allowing user to add new entry to the database
• Obligatory fields: Title, URL (validated), Category
• Description field is not obligatory

• Displays the same form as ‘Add record’ page but with fields pre-populated with existing information
• Keeps existing ‘date_added’ and ‘votes’ values behind the scenes
• Disallows saving the record with empty fields

• Offers one last step before deleting the record from the collection

• This project is initially released with barely any security at all. What is lacking and will be amended as soon as possible is:
  • secure password storage
  • registration available to users and confirmed by email, together with protection from spamming db with fake users data
  • option to reset/change password by user
  • better cookie storage and session management

• It's not a proper repository without keyword search. This feature was cut from initial release due to several instances of force majeure during development of this project.

• This needs to be improved to allow voting only oncer per record per user.

• While no errors were left unfixed during development process, some of the soft spots are not error-proof (especially adding/editing/deleting records). Handling errors around these needs to be added in case of unspecified instance of 'somethng went wrong'.

A MongoDB NoSQL database was used in the creation of this website. Database used to store data consists of 4 collections:

{

    _id : ObjectId(),

    title : String,

    url : String,

    desc : String,

    category : String,

    date_added : Date,

    votes : Int32

}

{

    _id : ObjectId(),

    login : String,

    password : String,

    email : String,

    date_created : Date

}

{

    _id : ObjectId(),

    category_name : String,

    desc : String

}

Hidden collection gathering all records deleted from Repo.

Follows the same structure as documents in Repo.

Tests documented in the test matrix were performed to test usibility and functionality across different screens/devices. At the time of a final testing, all features passed the functionality test as expected.

The following bugs were found when performing the initial tests.

• using 'back' and 'forward' buttons in the browser sometimes causes record_id to be lost and makes URL broken.
  • one way to solve is to create custom 404 page (done in one of the commits),
  • the other way: to catch these errors and prevent them
• editing record would remove its date and number of votes (fixed in one of the commits)

• AWS Cloud9
• GitPod
• Git
  • Version control during the development process.
• GitHub
  • Remote repository.
• Figma
  • Building mockups
• Google Chrome - Dev Tools
  • Testing responsiveness, and manually debugging code.
• PIP
  • Installing tools needed in this project.
• MongoDB Atlas
  • Hosting database used for this project

• JQuery
  • Simplifies DOM manipulation.
• Materialize
  • Speeds up the development process and creating responsiveness design
• Material Icons
• PyMongo
  • Facilitates communication between Python and MongoDB.
• Flask
• Jinja

• This project uses HTML, CSS, JavaScript and Python.
• The code was validated/formatted using following tools respectively: W3C HTML Validator, W3C CSS validator and Pythoniter
• README.md written with grand help of stackedit.io

• This project was developed using the AWS Cloud9 and GitPod.
• This project was regularly pushed to its GitHub repository https://github.com/Ardhanari/xr-online-resource, full list of commits is available at https://github.com/Ardhanari/xr-online-resource/commits/master
• The project was deployed on Heroku

You need Python3, pip, Git and MongoDB to run this project locally.

1. Go to this page and click on ‘Clone or download’ button
2. Copy the URL from ‘Clone with HTTPS’ tab
3. Open your terminal/bash
4. While being in the location you want the cloned directory to be saved, type git clone and paste the URL that you copied, accept with Enter
5. Create virtual environment with environment variables (IP, PORT, MONGO_URI, MONGO_DBNAME, SECRET_KEY) OR:
   • Define these variables in app.py as follows:
   • 'IP', '0.0.0.0'
   • 'PORT', '8000'
   • 'SECRET_KEY', your string of choice
   • 'MONGO_DBNAME', name of your database
   • 'MONGO_URI', mongo_uri of your database, see documentation
6. Install all required modules from requirements.txt using pip3 install -r requirements.txt in your terminal
7. Now the project is ready to be run locally

1. Install heroku using pip.
2. Log in to your account typing heroku login in the terminal and following the steps.
3. requirements.txt and Procfile are necessary files for deployment. To create requirements.txt, use command pip freeze > requirements.txt in the terminal
4. To create Procfile, use: echo web: python3 app.py > Procfile
5. Commit and push existing files to your repository on GitHub
6. Create new app in your heroku dashboard, set its name and region.
7. On app’s dashboard select Deploy and then choose GitHub (you can also skip pushing your files to github and push them directly to heroku the same way it is done with GitHub)
8. On the same dashboard set environmental variables by selecting ‘Reveal Config Vars’ in Settings and adding:
   • IP - ‘0.0.0.0’
   • PORT - ‘8000’
   • MONGO_URI - mongo_uri of your database, see documentation
   • 'MONGO_DBNAME', name of your database
   • SECRET_KEY - key of your choice
   • DEBUG - ‘False’
9. Your site is now succesfully deployed on Heroku.

• Many thanks to my CI mentor Seun Owonikoko for help
• Code Institute Slack community’s both solid help and sense of humour should be praised
• Code Institute materials were my support not only for learning prior starting this Milestone Project but also as a reference while building it
• Many thanks to all Extinction Rebellion people for brave fight and standing together as an example for the whole world. Also for:
  • brand guidelines, style and font
  • bringing purpose to many of us

• All the entries in the database are references created by users. There are no hosted files on site’s server.
• Project built as a Milestone Project 3 for Code Institute