Pattern-Projects / volunteer-fsf-project

A site for volunteers to find volunteering opportunities around the world.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

volunteer-fsf-project Build Status

A site for volunteers to find volunteering opportunities around the world. Data from volunteer work camps will be displayed and can be applied to by paying a small fee.

Please check the wiki for tips on how to use the website.

Root access login details for Evaluation.

License

The project is shared for use with the GNU General Public License v3

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

UX

Responsive image

Users

Expected users of the website include volunteer camp organisers, voluntary organisations and volunteers of all kinds. They come to the site to participate in volunteering activities.

User Stories

  1. Volunteer Camp Organisers can notify the voluntary organistaion of their camp.
  2. Volunteer organisations can list the camps on the site.
  3. Volunteers looking for a work camp experience can apply to work at the camp.

Design

  • Colour scheme consists of complementary colours
  • roboto font used throughout the website
    • font-family: 'Roboto', 'helvetica' sans-serif;
  • Icons imported from Font FontAwesome
  • Designed for accessibility:
    • Semantic structure
    • Alt text
    • Colour Contrast

Mockups

The web app was designed with a series of mockups as a dynamic page with different displays given for different views:

Camp Structure

The camp model is structured in the following way:

Camp information:

  • title
  • region
  • country
  • continent
  • organisation
  • description
  • image

Camp Details:

  • positions
  • positions_female
  • positions_male
  • positions_other
  • required_language
  • start_date
  • end_date
  • extra_host_country_fee
  • extra_host_country_fee_currency

Camp Organising Data:

  • archived
  • created_date
  • published_date
  • tag

Other models include:

  • Order
  • News
  • Story
  • User

Features

Features planned, implemented and outlined for later development

Planned Features

  • Camps list
  • Filters
    • Region
    • Country
    • Topic
    • Type of Work
    • Setting
    • Dates
    • Special requirements
    • Number of Places Available
  • Searchable
  • Translatable Pages
  • Membership Sign Up
  • Newsletter and Blog
  • Newsletter Signup
  • Login Authentication
  • Documentation
    • README
    • Doc Strings

Implemented Features

  • Camps list
  • Authentication
    • Logout
    • Login
  • Profile Page
  • Cart for camps
  • Camp checkout
  • Strip payments

Features Left to Implement

  • Camp Filtering
  • Image uploads

Technologies Used

This project makes use of the following technologies:

  • Python 3.6.8 is a general purpose programming language.
  • Django 1.11 is an open-source fullstack development framework.
    • django.test extends Python's unittest.
    • Coverage.py 4.5.4 generates interactive HTML reports on the coverage of running a function across the project code. Used here for gauging effectiveness of testing.
  • PostgreSQL is an open-source relational DBMS that works well with Heroku and Django.
  • Heroku is a cloud platform as a service which allows easy deployment of this project and database.
  • Heroku Toolbelt connects to Heroku through a terminal.
  • Gitpod is an in browser IDE that can open and setup git repositories directly from github.
  • Azure IDE services from Microsoft and connecting into their suite of hosting products.
  • Bootstrap CSS styling from Bootstrap.
  • Font Awsome provide neat icons with easy styling.
  • Travis CI Continuous Integration from Travis.
  • Stripe is used for recieving payments.

Dependencies

Developement

Git Flow

Development Version Control workflow follows these steps:

  • New feature branches are branched from the develop branch
  • feature is developed over a development cycle
  • feature branch is tested with coverage
  • feature branch is pushed to remote
  • feature branch is merged into develop branch
  • feature branch is deleted from local
  • release branch is branched from develop branch
  • release branch is tagged with projects latest release version
  • release branch is tested with django TestCase
  • Bug fixes and patches are added if required
  • release branch is merged into develop branch
  • release branch is deleted
  • develop branch is pushed to remote
  • develop branch is merged into master branch
  • master branch is pushed to remote
  • Travis tests Continuous Integration on latest master push
  • Heroku creates new build from latest master push

Note: feature branches can be removed from remote after merging with develop branch. They have been retained here for assessment purposes.

Test Driven Development

Features are developed using Test Driven Development practices:

  • feature branch is branched from develop branch
  • feature branch is tested with Django TestCase for pass standard
  • feature is broken into stages, tests are written for each stages
  • Stages are developed until they pass stage tests
  • Good time to commit to git
  • When all stages are complete:
    • feature branch is tested with coverage to ensure high level of test coverage
    • feature branch is ready to merge with develop branch

Styling

Bootstrap CSS is added to the project through a CDN link in the base.html tag. Icons are imported from FontAwesome using their new kit system

Heroku

Heroku provides a number of useful tools to aid in development

Heroku Postgres Add-on

Databases can be created and hosted on heroku using their built in PostgreSQL add-ons.

Pipeline Developement

Allows for staging of the development version app alongside the production ready app. New features added to the development app can be tested on the staged apps without directly affecting the user experience of the production version.

Dataclips

The Heorku Postgres add-on allows for secure links to SQL queries of the database known as dataclips. They are great for quick referencing of the database and sharing of specific data across teams. Following the provided links quickly exports and downloads the current data quiry results to you computer or a Google Sheets account. Example:

  • All available camps
    • CSV
    • JSON
    • Google Sheets - paste provided macro into your sheet:
      • =IMPORTDATA("https://data.heroku.com/dataclips/sedlidytgswqyydiviezgqoozuql.csv?access-token=d2641951-1bcf-4669-b49f-04efebb0c44c")

Testing

The site was tested through a number of means:

User Stories

  1. Volunteer Camp Organisers can notify the voluntary organistaion of their camp.
  2. Volunteer organisations can list the camps on the site.
  3. Volunteers looking for a work camp experience can apply to work at the camp.

Django TestCase

You can run theses tests by first following the steps in Deployment to get the project running.

  • Ensure that the dependencies are installed.
    • pip3 install -r requirements.txt
  • Next in a terminal inside the project type:
    • coverage run --source=. manage.py test
  • When the tests are complete you can generate a report on the pass rate of the program methods.
    • coverage report
  • To view an interactive HTML display of the coverage of code tested run this in the terminal:
    • coverage html
  • When the command completes open the report in a web browser:

Travis - Continuous Integration

Build Status Continuous Integration will run all the written Django TestCases against the latest updates to the project. You can set up Travis CI with your project by first following the steps in Deployment to get the project running.

  • Create an account at Travis CI
  • Connect to your Github account
  • From Setting > Repositories activate your project
  • Travis will now run CI tests each time you push changes to your repository Note: You can instruct Heroku to wait for CI to complete before publishing changes to the site by ticking the 'Wait for CI to pass before deploy' checkbox in Heroku's deploy tab.

Deployment

To deploy your own instance of volunteer-fsf-project takes a little effort. It is suggested that you use Heroku for your deplyment as the project was developed with that in mind.

Deployment requires some preparation. Before following the steps below ensure you have the following:

  1. A development environment with Python 3.6.8 or higher installed
  2. Open or Create a Heroku account at heroku.com
  3. Have an existing Github account from github.com
  4. Fork a copy of volunteer-fsf-project to you github
  5. Generate a secret key - can be generated here

Deploying to Heroku hosting service

There are two ways of deploying to Heroku:

  1. Through Heroku's Web Dashboard available on most OS
  2. Through the Heroku Toolbelt available on Ubuntu 16+

Heroku Web Dashboard Deployment

  1. Create a new app on heroku.com - this will require a unique name
  2. In the Overview tab add the Heroku Posgres: Hobby Dev add-on
  3. In the Settings tab Reveal Config Vars add the following values:
    • DISABLE_COLLECTSTATIC : 1
    • HOSTNAME : your_app_name.herokuapp.com
    • SECRET_KEY : your_secret_key
    • AZURE_ACCOUNT_NAME : volunteerfsfproject
  4. On the Deployment tab set deployment method to Github
  5. In the connect to Github section sign in then connect your fork of the project
  6. With master branch selected, turn on Automatic Deploys
    • Ticking the 'Wait for CI to pass before deploy' checkbox here will help prevent broken deployments.
  7. In the Manual Deploy section, with the master branch selected, click Deploy Branch for your first deployment

Your project is now deployed! To view the running app click Open App at the top of the page. It may take a moment to open when visiting after a time of inactivity.

Heroku Toolbelt Deployment

  1. Clone your fork of the volunteer-fsf-project git repo onto your developement environment
  2. Navigate inside the project:
    • cd volunteer-fsf-project
  3. Open a new terminal in the local repo and install heroku toolbelt with:
    • sudo snap install --classic heroku
  4. Login to heroku using the toolbelt:
    • heroku login
  5. Create a new app project:
    • heroku create your_app_name
  6. Point toolbelt to the created project with:
    • heroku git:remote -a your_app_name
  7. Connect a Postgres: Hobby Dev Add-on with:
    • heroku addons:create heroku-postgresql:hobby-dev
  8. Retrieve the DATABASE_URL to ensure it is connected:
    • heroku config:get DATABASE_URL
  9. Set the following config vars:
    • heroku config:set DISABLE_COLLECTSTATIC=1
    • heroku config:set HOSTNAME=your_app_name.herokuapp.com
    • heroku config:set SECRET_KEY=your_secret_key
  10. Push to heroku using:
    • git push heroku master

Your project is now deployed! Visit https://your_app_name.herokuapp.com/ to view the site. It may take a moment to open when visiting after a time of inactivity.

Running Locally

To run the project locally. Using a development environment with Python 3.6.8 or higher installed Clone your fork of the volunteer-fsf-project git repo onto your developement environment Open the project and install the dependencies: pip3 install -r requirements.txt Apply any migrations: python3 manage.py migrate In the terminal export the following values: export DEVELOPMENT=1 export SECRET_KEY='your_secret_key' Next run the project: python3 manage.py runserver

Your project is now running! To view the project open it in a web browser. Djangos built in server is not meant for deployed hosting. Please consider another server for this.

Running with Gitpod

Open the forked volunteer-fsf-project page on github.com Prefix the url with the following: gitpod.io/# Gitpod will create an environment for you in a couple minutes When the IDE is ready, in the terminal install dependencies: pip3 install -r requirements.txt Apply any migrations: python3 manage.py migrate In the terminal export the following values: export DEVELOPMENT=1 export SECRET_KEY='your_secret_key' Next run the project: python3 manage.py runserver

Your project is now running! To view the project open it in Preview.

Bugs

Resolved

Developer Tools Alerts

A number of alerts appeared in developer tools warning of cross-site cookies.
Resolved: It turns out this was a universal issue across all sites and a number of browsers.
Fixing this is outside the scope of this project.

Server 500 on evaluation site

Clicking any links on the evalutaion site was causing the page to 404. Resolved: This was an easy fix. Required adding of stripe keys to config vars.

Checkout error on cart empty

The checkout process was hitting a snag. Resolved: Checkout page does not include checkout ability when cart is empty.

Credits

This project is developed with the aid of resources, advice and care from many others. Here's to them.

Useful Links

Content

The text on the website has been copied and edited from:

Media

The images for the website are taken from: Pexels

Acknowledgements

Thank you to the following for inspiration, motivation and the direction I needed:

  • Seun Owonikoko @seun_mentor

  • Samantha Dartnall @Sammy Dartnall

  • Alan M. @Alan Mc Gee

  • Anna Greaves @Anna_G

  • Andy @mormoran

  • Libby Henry @Libby_alumni

  • Jorden V @Jorden

  • Samantha Dartnall @Sammy Dartnall_lead

  • John Lynch @John_Lynch_alumnus

  • Antonio Augello @Antonio

  • Anybody that I may have forgotten

  • Code Institute

About

A site for volunteers to find volunteering opportunities around the world.

License:GNU General Public License v3.0


Languages

Language:Python 64.4%Language:HTML 31.8%Language:CSS 3.2%Language:JavaScript 0.6%