SUPPORTING PROJECTS IN NEED
Around the world there are groups and individuals who work tirelessly and selflessly towards supporting impoverished communities, protecting natural wildlife and sustaining our environmental resources.
One of the main sources of income for these incredible endeavours has been from the International Volunteer platform, which grew rapidly in popularity in the mid-90's. Volunteer Organisations offered a structured way for people to travel to far-out destinations for a set fee, which enabled the organisations to thrive and grow. The knock-on effect was that these organisations were able to assist more projects as they grew by providing funding to them for each volunteer they send. The immense benefit to the projects was not only in the form of financial support, but provided physical presence of volunteers to assist with various tasks, which the projects could otherwise not afford to hire staff for.
The onset of the COVID crisis in early 2020 brought international travel to an abrupt halt, and as a result, a huge majority of Volunteer Organisations stopped operating. This, of course, meant that the projects' main source of income ceased almost immediately and significantly impeded the projects' ability to run effectively.
FundPIN (Fund Projects In Need) is dedicated to networking, supporting, and raising funds for non-profit organisations worldwide by providing an online platform, whereby users can find projects they are interested in supporting, donate to them directly through the site, and get updates on the progression and status of each.
Please note: To open any links in this document in a new browser tab, please press CTRL + Click.
| As a/an... | I want the ability to... | So that I can... |
|---|---|---|
| --- | --- | --- |
| Anonymous user | easily navigate the site; | find what I am looking for quickly |
| Anonymous user | view the site on all screen sizes; | visit the site using my mobile and/or tablet device |
| Anonymous user | read about the company details, goals and aims; | gain confidence that I am supporting a viable endeavour |
| Anonymous user | search for projects; | quickly browse which projects are available to support |
| Anonymous user | filter my search results; | search by country and/or project type |
| Anonymous user | read details about projects; | understand the history, details and needs of the project |
| Anonymous user | read details of what percentage of donations FundPIN retains | feel confident, knowing where my donation will end up |
| Anonymous user | access contact details; | get in touch with any questions |
| Anonymous user | access social media of the company; | join social media forums for news and updates |
| Anonymous user | register for a user profile account by choosing a username and password; | store details of my saved projects and donation history |
| Anonymous user | register for a user profile account using my social media login details; | Allow a quick way to log in and create a profile |
| --- | --- | --- |
| Registered user | log in and log out of my profile account; | Safeguard my information whilst not active on the site |
| Registered user | update my details | update address and other details in case they change |
| Registered user | store my address for later use; | avoid having to retype it every time I make a donation |
| Registered user | store my donation history; | access my previous donation payments |
| Registered user | enter a custom amount to donate to a particular project; | enter my own amount that I'd like to donate |
| Registered user | select an amount from a drop-down list; | quickly make a donation from pre-defined choices |
| Registered user | review my donation choices at checkout; | decide whether to add or edit donations before confirming |
| Registered user | store my choices in checkout; | go back to the site in case I wish to add more options |
| Registered user | Make secure payments | ensure my payments are securely handled |
| Registered user | Receive email confirmation of my donation payment | confirm that my payment was made and keep track of accounting |
| --- | --- | --- |
| Site admin/superuser | add new projects and category listings; | continuously make new projects available for support |
| Site admin/superuser | update project listings; | update new info from projects |
| Site admin/superuser | delete existing project listings; | delete projects that may cease to exist |
| Site admin/superuser | create blogs; | inform users on project developments |
| Site admin/superuser | update blog entries; | update users on new project developments |
| Site admin/superuser | delete blog entries; | remove blog details in case they become irrelevant |
With 18 years’ experience working with International NGO and non-profit organisations, I’ve gained a large perspective on the needs of these projects and the growing number of people that want to support them.
The target demographic is vast, and attracts all ‘earning’ ages from 18-. The highest region-specific interest groups mainly from Western cultures, including the UK & Europe, US & Canada, Australia and New Zealand.
The site should be easy to use for the older generations, yet captivating and fresh for the younger generations. A current visual approach is implemented to demand attention and relatability in line with modern websites and progress away from the traditionally ‘stuffy’ donation-type sites.
From experience, people are yearning to help and assist, and want to get actively involved, however also need to feel confident that the support that they are providing is going to the correct source. Majority of 'donation' type sites are very general on their approach to fundraising, and users never really know exactly where their donation has ended up.
FundPIN provides factual information regarding the amount donated, the amount that reaches the project itself and the amount that FundPIN retains as a small percentage to enable the project to be sustainable.
The main strategy of this site to provide accurate information about projects, make it easy and intuitive to navigate and transparent with information to maintain trust and integrity with users.
Increased visibility to the general public on the plight of NGO's operating in today's uncertain climate, and endeavouring to support and raise funds for them.
Users can find projects in their relevant interest field, read details on the projects and choose which they wish to donate to.
Fits in with my current skill-set of HTML, CSS, JavaScript, Python and Django.
Provide MVP with relevant categories, project listings and detail pages, with plenty of room for expansion
- Fully responsive website across all popular devices, using Bootstrap Grid and custom media queries
- Vivid and emotive images in interactive carousels to elicit a positive response
- Intuitive and responsive Navigation menu
- About section on Home page to read company details and donation policies
- Search function with filtering
- Project detail pages
- Blog detail pages
- Login page with form
- Login with Social Media options
- Profile/account page
- Checkout page
- Footer element with quick links, social media icon links and Subscribe to newsletter.
- Newsletter Subscription link from footer.
- Ability for Superuser to add, update and delete projects.
- Ability for Superuser to add, update and delete blog entries.
- Project submissions form and functionality to enable potential NGO's to submit projects for review.
- Implement pre-population of slug field when adding a new blog post.
- Implement Lazyload, specifically on home page, to decrease load times.
- Implement Pagination on Project page.
- Facebook Login - see Project barriers and solutions for more details on why this is currently not implemented.
- Implement further communication to the user via email for order invoices & confirmation.
- Further development of Profile page to include profile image, pinned projects for future donations and additional fields/better constructed layout.
- Loyalty app to earn PINS in profiles
The overall structure is aimed at ease of navigation to each section and provides progressive disclosure on each page, hinting for further reading and thus drawing the user in to remain engaged.
The content has been laid out in an intuitive way, providing a good flow of information, with the main landing page diving clear direction to browsing the projects on the projects page.
Clear feedback is provided to the user after each interaction, using the messages function in Django (success, info and error, providing the user with clear direction)
The main organising principle for the user is the type of project, yet the Country that the project is based in is an important factor so this has been incorporated as a top-level category in the search ability.
- Search by Keyword
- Search by Project Type
- Search by Country
- SQLite3 used in Development, which comes as default with Django installation.
- Heroku Postgres used in Production as site is deployed on Heroku
-
Projects App
-
The Project model stores information about the projects.
-
The Country model stores information about the countries and is used in the Project model as a specific category.
-
The Category model stores information about the categories and is used in the Project model as a specific category.
-
-
Profiles App
- The UserProfile model stores information about registered users, including donation order history.
-
Checkout App
-
The Order model stores information about each donation order placed.
-
The OrderLineItem model stores information from the order, used in calculation in the Order model.
-
-
Blog App
-
The Post model stores information about the Blog post.
-
The Comments model stores information used in the Comment Form, using Django's auth's User model as a Foreign Key to allow only Registered users to post comments.
-
I've used DBDiagram to draw up a Database Schema, which shows the relationships between the models.
BASE TEMPLATE - Detail for Navigation and Footer for all site pages.
- HOME Page
- PROJECTS Page
- PROJECT DETAILS Page
- REGISTER Page
- LOGIN Page
- BLOG Page
- BLOG DETAILS Page
- CONTACT Page
The layout has been kept consistent throughout site by visually grouping elements in order of importance.
-
Top Navigation bar - Menu with links pointing to each page, including:
- Searching via keywords/phrases
- Searching by Country filter
- Searching by Project Type filter
- Pagination
-
Navigation convention has been incorporated to give the user a sense of familiarity and avoid confusion.
-
Navigation elements are visible and easily findable.
-
Progressive disclosure in the form of progress pagination has been incorporated throughout, with the use of carousels, indicating providing the user with information of where they are in that section at any given point.
-
Cognitive icons have been used consistently to communicate navigation to keep it simple for the user.
-
Footer with social media links, quick links for additional information and contact details
The overall UX needs to align with the aesthetics of a Donation type site, yet with a more modern approach to avoid it being too generic. The overall feel needs to exude professionalism, giving confidence to users that they are donating to a trustworthy source. A large focal point is on providing vivid imagery and easy to read text o keep the user engaged.
Colour palette has been chosen to align with a fresher look to the generic charity/fundraising/NGO sites out there.
Colour Palette generated on Coolors.co
- Headings - "Quicksand" font (with fall-back font of Serif). This font was chosen for its environmental feel with slightly rounded features, alternating between font-weights from 500 & 700 for visual impact.
- Content - "Jost" font (with fall-back font of Sans-Serif), clean and balances well with the Headings. A consistent font-weight of 300 Light and Normal has been used throughout.
Imagery for this project is vital and I've selected media that captures attention and gives the user an immediate association with the project, before reading deails on it.
README icons are hosted on Cloudinary, a cloud-based service that provides an end-to-end image and video management solutions.
To ensure the site is uncluttered, a minimalistic approach has been taken in terms of animation. The carousels have been given a delay for soft transitions, navigation with smooth scroll effect and buttons have very subtle hover and click effects.
Designed with HTML5, CSS3, JavaScript, Python3 with the Django Framework
- autopep8 Python Code formatter
- MarkupSafe Implements a text object that escapes characters so it is safe to use in HTML and XML
- asgiref - ASGI is a standard for Python asynchronous web apps and servers to communicate with each other, and positioned as an asynchronous successor to WSGI.
- boto3 - Python SDK for AWS. It allows you to directly create, update, and delete AWS resources from your Python scripts.
- botocore - The low-level, core functionality of boto 3.
- certifi - Provides Mozilla’s carefully curated collection of Root Certificates for validating the trustworthiness of SSL certificates.
- cffi - C Foreign Function Interface for Python. Interact with almost any C code from Python.
- chardet - Universal Character Encoding Detector.
- cryptography - Package which provides cryptographic recipes and primitives to Python developers.
- defusedxml - Contains several Python-only workarounds and fixes for denial of service and other vulnerabilities in Python's XML libraries.
- dj-database-url - Utility to help you load your database into your dictionary from the DATABASE_URL environment variable. Heroku uses environment variables for your database and other addons.
- Django - High-level Python web framework that enables rapid development of secure and maintainable websites.
- django-allauth - Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
- django-ckeditor - Provides a RichTextField and CKEditorWidget utilizing CKEditor with image upload and browsing support included.
- django-countries - A Django application that provides country choices for use with forms, flag icons static files, and a country field for models.
- django-crispy-forms - application that helps to manage Django forms. It allows adjusting forms' properties (such as method, send button or CSS classes) on the backend without having to re-write them in the template.
- django-extensions - A collection of custom extensions for the Django Framework.
- django-js-asset - To insert a script tag via forms.Media containing additional attributes.
- django-libs - A collection of things that we re-use in every Django project, such as custom middlewares, templates, templatetags, test mixins etc.
- django-social-share - Templatetags for 'tweet this' and 'share on facebook'.
- django-storages - A a project to provide a variety of storage backends in a single library.
- flake8 - A great toolkit for checking your code base against coding style (PEP8), programming errors and to check cyclomatic complexity.
- gunicorn - An application server for running your python application instance.
- idna - Support for the Internationalised Domain Names in Applications (IDNA) protocol.
- jmespath - JMESPath (pronounced “james path”) allows you to declaratively specify how to extract elements from a JSON document.
- mccabe - Complexity checker for Python.
- oauthlib - A generic, spec-compliant, thorough implementation of the OAuth request-signing logic for Python 3.6+.
- Pillow - Python Imaging Library adds image processing capabilities to your Python interpreter. Adds support for opening, manipulating, and saving images.
- psycopg2-binary - PostgreSQL database adapter for the Python programming language.
- pycodestyle - Python style guide checker.
- pycparser - Complete parser of the C language, written in pure Python using the PLY parsing library.
- pyflakes - Analyzes programs and detects various errors.
- PyJWT - Python library which allows you to encode and decode JSON Web Tokens.
- pyOpenSSL - Wrapper around (a subset of) the OpenSSL library.
- python-dateutil - Provides powerful extensions to the standard datetime module, available in Python.
- python-http-client - Quickly and easily access any RESTful or RESTful-like API.
- python3-openid - Set of Python packages to support use of the OpenID decentralized identity system.
- pytz - This library allows accurate and cross platform timezone calculations using Python 2.4 or higher.
- requests - Requests is a simple, yet elegant HTTP library.
- requests-oauthlib - Provides first-class OAuth library support for Requests.
- s3transfer - Python library for managing Amazon S3 transfers.
- six - Python 2 and 3 compatibility library.
- sqlparse - Non-validating SQL parser for Python. It provides support for parsing, splitting and formatting SQL statements.
- starkbank-ecdsa - A lightweight and fast pure Python ECDSA security.
- stripe - A Python library for Stripe’s API.
- toml - A Python library for parsing and creating TOML (Tom's Obvious, Minimal Language), a data serialisation language designed to be a minimal configuration file format that's easy to read due to obvious semantics.
- urllib3 - Powerful, user-friendly HTTP client for Python.
- Werkzeug - Comprehensive WSGI (Web Server Gateway Interface) web application library.
- Auto Close Tag
- Bracket Pair Colorizer
- Beautify - Code Formatter
- Indent-Rainbow
- Bootstrap 4 CDN Snippet
- Markdown Lint
- Python
- JSHint
- HTML - W3C - Markup Validation
- CSS - W3C - Jigsaw CSS Validation
- JavaScript - JSHINT - JavaScript code warning & error check
- Python - PEP8 Python code syntax checker
- Autoprefixer Parses CSS and adds vendor prefixes.
- Online-Spellcheck Online spelling and grammar checks for site and README content.
- Favicon - Favicon Generator
- Adobe Photoshop CS6 - Image manipulation and colour corrections
- Swiper JS for image carousels
- PDF Tools for wireframe PDF compression
- Am I Responsive - Site mockup generator.
- On setting the RichText editor for the project descriptions to 'justify text', this was applying an inline style to the rendered paragraph text from the database, which meant that the paragraphs could not be text-aligned with with css. Overcame this by leaving all paragraph text as default and custom to allow ability to align from custom css styling.
- Toasts were not showing up from django-allauth, but fine on the site for custom alerts. Created branch allauth-toasts to try and resolve this issue. Narrowed this down to the jQuery show/hide not being called for default django toasts. Resolved by adding the toasts show/hide jQuery script to the index.html postloadjs block as this was being overwritten by the swiper carousel and custom script.
- Although a users billing details are saved correctly on the profile, and update as expected, the checkout form is not pre-populating the saved info. Resolved after finding that this was a minor issue and I'd duplicated the order_form variable in checkout views.py, which was clearing the form after save.
- The Facebook Login functionality has been working, but due to various emails from Facebook regarding requirements for GDPR, Privacy Policy and more, I have decided to omit the Facebook Login feature due these extra requirements being out of the scope of this project (as a 'for educational purposes' only site). Once the site is built for a real-world application, the Facebook functionality can be re-implemented.
- Webhooks and signals not working as they should. Created branch webhooks to work on a resolve. => Resolved - Webhooks seem to be returning correct messages.
- On user logout, cart data does not persist and session is cleared on logging back in. On further investigating, allowing the persistent data could cause security vulnerabilities so this has been excluded from this project.
- The Facebook 'Share' button returns the home url of the site, and not the specific project or blog page as intended. However, through the same package django_social_share, the Twitter and Email options return the correct results. I have tried many fixes to this, yet have not found a resolve and have decided to leave this as an existing issue to be resolved in further development after submission.
- During HTML validation, received: "Error: Duplicate attribute id." => Unresolved:
id="id_image"is generated in the same input asid="new-image", presumably by the JavaScript. As this is working fine, I've decided to leave this as a future bug fix for now due to time-constraints. - During HTML validation, received: "Error: Duplicate ID in remove_(itemid)" => Unresolved: Unable to find cause, but presumed to be from the
update_remove_donation.htmltemplate. As this is working fine, I've decided to leave this as a future bug fix for now due to time-constraints. - Email confirmation of purchase order is not going through after checkout success. Webhooks seem to be working and unsure why the email is not sending. Due to time-constraints, this issue will be resolved at a later date after project submission.
- If keyword is entered in the Search bar, it returns all words that that keyword is part of - i.e if entering a search for 'lion' then the word 'billion' is returned. Due to time-constraints, this issue will be resolved at a later date after project submission.
- Used Git for version control.
- Various branches were created for features.
- The branches were then merged with the main branch once any conflicts were resolved.
- All code was written on Visual Studio Code, a local IDE (Integrated Development Environment).
- A virtual environment was created on VSCode to ensure that the packages installed are only installed in the virtual environment folder.
- The code was then pushed to GitHub where it is stored in my Repository.
-
The code can be run locally through clone or download from the repository on GitHub.
-
You can do this by opening the repository, clicking on the Code' button and selecting either 'clone or download'.
-
The Clone option provides a URL, which you can use on your CLI with
git clone <paste url>. -
The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine. The files can then be uploaded to your IDE.
In the Terminal window:
- Navigate to the folder of the installed files with
cd <path> - Create the virtual environment folder with
python -m venv venv - Activate the virtual environment with
venv\Scripts\activate.bat
Note: The above commands were used on Visual Studio Code on Windows. For other IDE's and Linux, please refer to Creation of Virtual Environments
- For sensitive information/passwords, create an
env.pyfile to store these as environmental variables.
import os
os.environ['DEVELOPMENT'] = 'True'
# Django Secret key - ensure you remove it
# from main>settings.py before pushing to your repository
os.environ['SECRET_KEY'] = '<your value>'
# stripe
os.environ['STRIPE_PUBLIC_KEY'] ='<your value>'
os.environ['STRIPE_SECRET_KEY'] ='<your value>'
os.environ['STRIPE_WH_SECRET'] = '<your value>'
# DB
os.environ['DATABASE_URL'] ='<your value>'
# AWS S3
os.environ['AWS_ACCESS_KEY_ID'] = '<your value>'
os.environ['AWS_SECRET_ACCESS_KEY'] = '<your value>'
# Email
os.environ['DEFAULT_FROM_EMAIL'] = '<your value>'
os.environ['EMAIL_HOST_USER'] = '<your value>'
os.environ['EMAIL_HOST_PASSWORD'] = '<your value>'
# Leaflet maps
os.environ['LEAFLET_API_KEY'] = '<your value>'This file is added to the .gitignore file detailed below.
- Create a file called
.gitignorein the root directory and ensure it contains the following git exclusions:
core.Microsoft*
core.mongo*
core.python*
env.py
__pycache__/
*.py[cod]
venv
.vscode
*.sqlite3
*.pyc
- Install project requirements by typing
pip install -r requirements.txt
- Apply model migrations using
python manage.py migrate
- Type
python manage.py createsuperuserand following the username and passwords prompts from the terminal.
- To run the project locally, in the terminal type
python manage.py runserver - This will open a localhost address, which is provided in the CLI.
- Either copy and paste the url (provided in the terminal) into a new browser tab, or hover over it and click follow link
This project has been deployed to HEROKU
Media files are hosted on AWS S3 Bucket, and instructions can be found HERE
-
Sign up for an account on Heroku or Log in with your existing account.
-
Click on the 'New' dropdown box and 'Create new app'
-
Name your app, choose the appropriate region and submit.
-
On the Resources tab, search for Heroku Postgres Database and add (a free Hoby Dev account can be used).
-
Postgres requires dj_database_url, and psycopg2, which will be installed when the requirements.txt dependencies are installed as explained earlier.
-
Click on the Deploy tab and select the GitHub option, then choose you GitHub account and search for the repository to connect to (You can enter a keyword in the input to search for). Once confirmed, press 'Connect'.
-
Under Manual deploy, choose your main (or sometime called master) branch to deploy to and press 'Deploy Branch'
-
Once the build has completed, under Automatic deploys, choose your main (or sometime called master) branch and press 'Enable Automatic Deploys'
-
Click on the Settings tab and then the 'Reveal Config Vars' button to reveal the Environmental Variables
-
Enter your Environmental variables and values with the following fields:
Testing documentation can be found on a separate document HERE
- Code Institute Course Content - Main source of fundamental knowledge, particularly the Boutique Ado mini-project.
- Code Institute SLACK Community - Main source of assistance.
- Stack Overflow - General resource.
- YouTube - General resource.
- CSS-Tricks - General resource.
- W3.CSS - General resource.
- CommonMark - For Markdown language reference.
- Colour Palette - Coolors.co
- TinyPNG - Efficient compression of images for site.
- Balsamiq - Wireframing design tool.
- Site images used are from various contributors on Unsplash, and online source of freely-usable images.
- Site logo designed using Hatchful Shopify, a free online logo maker.
- Hamburger mobile-menu icon png taken from Hiclipart and edited in Photoshop for site colour match.
- Icons used in the Technologies Used section of this document are taken from various sources (mainly Wikipeadia).
- Home page lead-in icons downloaded as svg from Material Icons
All content is self-written by site creator.
- CSS Radial gradient for instagram colours from CodePen by Thomas Rye
- Inspiration for Navbar mobile side menu from W3Schools
- CSS for hiding scroll-bars on all browsers from W3Schools
- Project cards, on Projects page, customized from Codepen by Tenzing Gaychey
- Checkout payment overlay animation customised from Codepen by @yumeeeei
- Google Login button from Stack Overflow
I would like to thank:
- My mentor, Aaron Sinnott for his guidance and advice.
- Tim Nelson, Bim Williams, John Traas, Anthony O'Brien, Daisy Mc Girr and Sean Murphy for always being open to discussing, helping and generally being awesome people.
- Help with JS storing CTA banner in local storage after close Sean Murphy
- Assistance from Sean Murphy and John Traas, for helping me to refactor my JavaScript to get a total from inputs on the donation form.
- Everyone in Tutor support for always being patient and friendly when approaching with assistance during course material.
- CI staff and Slack Community for always being on-hand with questions posted and assistance requests.
- Everyone that takes part in the Slack calls, specifically from the #In-It-Together and #Study-Group channels.
For any issue resolution or assistance, please email 📧 Jim Morel 📧