Help others

Stream Four Project - Full Stack Frameworks with Django Milestone - Code Institute

This website connects private donors with foundations, initiatives and nonprofits in many countries all over the world. We help nonprofits access funding and support by sharing their projects with our community. There are many projects in over 8 categories, to which users can donate to.

Table of Contents

1. Demo
2. UX
   • Target Audience
   • User Stories
   • Wireframes
3. Information Architecture
   • Database
   • Data Models
4. Features
   • Existing Features
   • Features Left to Implement
5. Technologies Used
   • Languages
   • Libraries and Frameworks
   • Tools
   • Databases
6. Testing
   • Code Validation
   • Features Testing
   • Responsiveness Testing
   • User Stories Testing
7. Deployment
   • GitHub
   • Heroku
   • Amazon AWS S3
8. Credits
   • Content
   • Media
   • Acknowledgements

Demo

Check out the deployed website here.

UX

To create a sleek look and a homogeneous experience for the user I used the colors grey, white and black consistently throughout the project. For a little bit of color I styled certain buttons in orange. For an inuitive user experience I colored the delete/remove buttons in red.

I chose Arial as the primary font because of clear and timeless design.

In order to create an easy and intuitive user experience I designed the website in a way where it is simple for the user to use.

Target Audience

The website targets anyone who is interested in donating to a good cause. Projects supporting education, health care, human services and many more are availabe. User can browse through the website and read about the different projects before selecting them and paying via credit card. Additionally this website offers the possibility for users, like small and medium sized nonprofit organisations, to add their own donation projects, in order to share them with the community and enhance chances of funding.

User Stories

As a user I expect/would like/need:

1. to view clear information about the site's purpose.

2. to create an account in order to make donations to my favorite projects.

3. to change my password.

4. to view existing projects in order to find some that I decide to donate to.

5. to have a search function to look for specific projects/initiatives.

6. to have the projects sorted in different categories in order to look for projects that are supporting a specific cause.

7. to view a more detailed view of each project.

8. to add projects in order to share them with others and enable them to donate money.

9. to edit the projects that I have added.

10. to delete the projects that I have added.

11. that no other user is able to edit and delete the projects that I added.

12. to have a profile page where I can see my user details and all the projects that I have added.

13. to select how much I want to donate for a project and add it to the cart.

14. to be able to view the selection that I have added to the cart and amend the amount I want to donate.

15. to donate money to the selected projects via a credit card.

16. to see my donation history.

Wireframes

In the planing process using Balsamiq these wireframes were created in order to design the layout for this project for mobile, medium and desktop views.

Information Architecture

Database

• During develpment of this project I worked with the standard sqlite3 database, which is installed with Django.

• For the deployment, the SQL database Postgres was used, which is provided by Heroku.

• Hint for other developers: As I was following the Code Institute course while setting up my website I also switched databases and set up the AWS connection quite early on in the middle of my project. This created some problems as this is meant to do at the end of the project. Due to some errors I was forced to delete my sqlite3 database and start it from scratch. Then at the end of my project I moved over to the Postgres database and set up the AWS connection.

Data Models

User Model

The standard User model was used in this project, which is provided by django.contrib.auth.models. With ForeignKey I created relationships between the User Model and the other models (see more below)

Project Model

Within the projects app, the Project model contains all the data need for a donation project.

The category choices are the following:

• Animals
• Arts & Culture
• Community & Family
• Education
• Environment
• Disaster Relief
• Health & Medical
• Human Services
• Housing

Checkout Models

Within the checkout app, the Order and OrderLineItem models hold the data that is needed for users to execute orders.

I used related_name=orders and related_name=items to call the donation history of a specific user.

Order Model

Order Line Item Model

Features

Existing Features

Page Structure

• Navbar: Using Bootstrap, the navbar is fixed at the top and collapses on medium and small devices. It is then accessible through a button that enables a dropdown menu. On the left side the navbar contains the website's name and the links to 'Home', 'Projects' and 'Categories', which opens a dropdown menu with the different project categories. These links on the left side are always visible. If the user is logged in the the right side of the navbar contains a personalized link to the user's profile page, 'Logout', 'Cart' and a number that will display the amount of projects that have already been added to the cart. If the user is not logged in, the right side of the navbar will only display 'Register' and 'Login' buttons.

• Footer: The footer contains a GitHub linke and an educational disclaimer.

Forms

• Register form: the register form enables users to create an account in order to make donations. The input fields are email address, username and two password fields (the password needs to be repeated to confirm).

• Login form: the login form enables existing user to login, make donations, add, edit and delete their projects and see their donation history.

• Add project form: this form enables users to add their own projects that they want to share with other users.

• Edit project form: this form enables users to edit and update their own projects.

• Order/Contact and Payment form: these forms are used during the checkout and enable the user to input his/her personal contact information as well as credit card details in order to complete the donation.

• Search bars: enables user to search for specific projects.

Buttons

• Read More button: in order to view more details about the projects.

• Add button: when entering an amount, by clicking on 'Add' the user is able to add the project to the cart.

• Amend button: when changing the amount of a project in the cart the user can update the cart by pressing on 'Amend'.

• Cart delete button: if wrongfully added to the cart a user can click the red delete button to remove the project from the cart.

• Checkout button: when satisfied with selected project a user can click on 'Checkout' in order to enter his/her payment details.

• Submit Payment button: after having entered the neccessary contact and payment information by clicking 'Submit Payment' the user is finishing the donation process.

• Edit and Delete buttons: for each project a user has added when clicking on the edit and update the projects. The delete button enables the user to fully delete the project from the database.

• Cancel buttons: enables the user to cancel when adding or editing a project.

• See donation history button: enables the user to see the projects he/she has previously donated to.

• Change password button: enables the user to change the password.

• Back to top button: enables the user to jump back to the top. This feature is escpecially helpful when many projects have been added. I added scroll-behavior: smooth; to ensure a smooth scrolling behavior, which however does not work in Internet Explorer and Safari.

Other

• Search bars: the search bars help the user quckly finding certain projects.

• Messages: after certain actions (e.g. submiting forms) the user is given a status update in form of an alert message that pops up on the top of the page and vanishes again after 3 seconds.

Features Left to Implement

• Thousand Separators for money amounts: Initially I included USE_THOUSAND_SEPARATOR = TRUE because I wanted to have the Euro amount displayed with a thousand separator. However, this also added a thousand separator on the year (in Payment form and on the 'Donation History' page). This is why I concluded not to use it. I tried other solutions, but these changed the numbers into strings, which didn't work for me. Fixing this is something I would like to work on for the future.

• Reset Password: As mentioned in the testing section the reset password feature doesn't seem to be working. I tried all kinds of solutions but none of them worked for me. This is also something that needs to be figured out in the future.

• Pagination: Once more and more projects will be added in the future it would make sense to include a pagination feature.

• Search Bar: I would also like the user to be able to not only search for a project's name but also enabling the user searching the project's descriptions.

Technologies Used

Languages

• HTML - this standard markup language was used for the structure and layout of this website

• CSS - to describe the style of the HTML document

• JavaScript - to enable interactive features in my website, such as e.g. the 'back to the top' button and the alert messages

• Python - the core language of this website

Libraries and Frameworks

• Django - a core python web framework

• jQuery - used to initialize message elements.

• Bootstrap - a front-end component library to build a responsive website. With Bootstraps grid system the layout of this website was created. Other Bootstrap features used for this website are buttons, forms, navbar, footer, badge

• Font Awesome - icons for better readability and styling

• Stripe - payment platform for online pament processing

• Psycopg2 - allows to connect to PostgreSQL database

• Gunicorn - a Python WSGI HTTP Server for UNIX, required to connect to Heroku

Tools

• Amazon AWS S3 - to store statics and media files

• Boto3 - to create, configure and manage AWS S3

• Github - used for development version control using Git

• Heroku - this cloud platform was used to run the deployed application

• Travis - used to build and test the code

• Gitpod - this online IDE was used for the development of this application

• Balsamiq - this web-based mockup tool was used to visualize the layout and design of the website

Databases

• SQLite3 - SQL database provided by Django - used in development phase

• Postgres Heroku - SQL database provided by Heroku - used for production

Testing

Code Validation

HTML

The W3C CSS Validation Service was used to validate HTML code.

The error "bad value search for attribute type on element button" was shown, so I removed it.

Another error was shown that "the value of the for attribute of the label element must be the id of a non-hidden form control". So, for the project pages I added {{ project.id }} as the value of the for attribute of the label element and as the id of the form control. For the cart page I added {{ item.id }} instead.

No errors remained.

CSS

The W3C Markup Validation Service was used to validate CSS code. Several errors and warnings were shown. But these were regarding Bootstrap and were disregarded.

Otherwise no errors nor warnings were shown.

JavaScript

JSHint was used to validate JavaScript.

The validator revealed that a ; was missing in line 24 and that mybutton was undefined. Upon fixing that the validator was still showing that there is one undefined variable $. This warning was ignored as I think JSHint does not have access to external libraries, such as jQuery.

Additionally it said that the function topFunction is unused. But I ignored this as JSHint doesn't have access to my html code, where the function topFunctionis triggered with onclick="topFunction()".

No other errors were shown.

Python

I checked my Python code on PEP 8 online, where I found several whitespace and indention errors.

Setting Django DEBUG = True enabling a real time debugging of code has helped figure out errors in the deployment phase. While developing, I ensured the code was successfully rendered in the web browser by running following command: python3 manage.py runserver.

In each app test files were created to test views, models and forms. By entering python3 manage.py test in the terminal all tests are run. To only run tests for a specific app type python3 manage.py test <app_name> into the terminal.

Coverage

In order to get reports on test code Coverage was run.

To do this I followed the following steps:

1. Installed coverage by typing pip3 install coverage in the terminal

2. Then typed coverage run --source=<app_name> manage.py test to run the tests for each app.

3. With coverage report I could look at my results

4. By typing coverage html a new folder is created, whith an index file that contains information what part of you code is tested.

All other functionalities were manually tested.

Features Testing

Throughout the development of this website all features were manually tested. The following table gives an overview of how the features were tested and lists resolved and remaining bugs.

Responsiveness Testing

Ensuring its responsiveness this website was tested across different mobile, tablet and desktop devices using Chrome developer tools. In a second step it was then tested across the most common internet browsers (Safari, Chrome, Internet Explorer, and Firefox), making sure it is compatible. For a detailed overview, please see this excel file here.

User Stories Testing

User story 1

• The user is welcomed on the 'index' page providing the user some initial information about the aim of this website to help others and some informative stats. The 'What We Do' page provides more detailed information about the site's purpose and gives clear information on how it actually works.

User story 2

• Each user is able to create their own account by clicking on 'Register' and filling out the register form. In order to register the user needs to input a new username that has not been used yet, an email address and enter a password. The password needs to be repeated in order to confirm. Once registered the user is redirected back to the home page.

User story 3

• There are two ways for the user to change the password. When loogged in the user can click the 'Change Password' button on the profile page and then entering his/her email address. If the user has forgotten the account password and is not able to login anymore, he/she can click the link 'Reset Password' on the login page in order to reset the password.

User story 4

• By clicking on the 'Projects' button in the navbar the user is able to view all projects that are currently open for donations.

User story 5

• The user is able to search for specific projects using the search bar on the home page and the projects pages.

User story 6

• If the user is interested in a specific cause (e.g. the environment), he/she can click the button 'Categories' in the navbar, which opens a dropdown menu with all existing causes. The user can then choose one of the categories and have projects to that category displayed.

User story 7

• By clicking the 'Read More' button of a project the user is able to get more information about a specific project, such as seeing the whole description of the project as well as who has added the project to the website.

User story 8

• Nonprofits and other organisations are able to add their projects to the site by clicking the 'Add Project' button on the profile page and filling out the 'Add Project' form. The user is prompted to enter the project's name, choose a category, give a detailed description about the project and upload an image.

User story 9

• In the details view of a project the user that has created this project is able to see and click the 'Edit' button in order to edit the project. He/she can change the project's information in the 'Edit Project' form and click on 'Confirm Changes'.

User story 10

• In the details view of a project the user that has created this project is able to see and click the 'Delete' button in order to delete the project from the database. A modal will pop up where the user is asked if he/she is really sure. Upon clicking 'Yes' the project is deleted.

User story 11

• If viewing the details of a project that another user has added, the edit and delete button is not visible. When entering the id of projects that other users have added in the url after .../projects/edit/ the user is informed that he/she doesn't have the permission to edit this project.

User story 12

• By clicking the profile button on the top right the user is able to see his/her profile page. On the top of the page the user can see the account details (username and email). Below that all projects the user has added to the website are displayed.

User story 13

• On the project pages a user can enter an amount between 5 and 99999 € in the form element for each project. By clicking the 'Add' button it gets added to the cart.

User story 14

• By clicking on the cart symbol to the far right of the navbar the user is able to see the cart with all the added projects. By changing the amount and clicking the 'Amend' button the cart gets updated.

User story 15

• When satisfied with the selection the user can click the 'Checkout' button, which brings him/her to the Checkout page. After entering all the required contact and payment information and clicking on 'Submit Payment' a message informs the user about the successfull donation.

User story 16

• After clicking the 'See donation history' button on the profile page, a user is able to see his/her donation history. All projects a user has donated to are displayed included the donated amount. On the bottom of the page to totally donated amount is shown.

Deployment

GitHub

I was developing the app using Gitpod. In order to keep records of the different versions during the development phase git version control was used.

Starting this project the Code Institute GitHub Full Template was used. Having had the Gitpod extension installed for Chrome the template was opened in Gitpod.

The following commands were taken to save the various changes in the local repository:

• $ git add 'filename' to add the updated files to the staging area
• $ git commit -m "..." to commit the changes
• $ git push -u origin master to push all committed changes to the remote repository on GitHub.

Heroku

This app is hosted using Heroku.

Following steps were taken to deploy my project:

1. Create app

   • On the Heroku website I created a new app.
   • In the heroku dashboard of my application under the 'Settings' tab I clicked on 'Reveal Config Vars', where I have set the following config vars:

   key	value
   AWS_ACCESS_KEY_ID	<your_key>
   AWS_SECRET_ACCESS_KEY_ID	<your_key>
   DATABASE_URL	<your_ostgres_database_url>
   DISABLE_COLLECTSTATIC	1
   EMAIL_ADDRESS	<your_email_address>
   EMAIL_PASSWORD	<your_email_password>
   SECRET_KEY	<your_secret_key>
   STRIPE_PUBLISHABLE	<your_stripe_pk>
   STRIPE_SECRET	<your_strip_sk>

2. Login to the Heroku account in Gitpod

   • To log in to Heroku I used this command $ heroku login -i and entered my account details.

3. Git repository

   • following command can be used for the initial commit: $ git commit -m "Initial Commit"

   • and then $ heroku git:remote -a 'app_name' to set up the remote repository

   • In case the repository has not been created the following commands should be used:

     $ cd 'directory-name'/
     $ git init
     $ heroku git:remote -a 'app-name''
     

4. Connect application to remote database

   • On the Heroku website under Resources tab, under Add-ons search for "Heroku Postgres" and set up the Postgres database
   • type pip3 install dj_database_url in your terminal (this allows us to connect to a database_URL)
   • then pip3 install psycopg2 (allows us to connect to Postgres databases)

   in settings.py:

   • import dj_database_url
   • add DATABASES = {'default': dj_database_url.parse("link to database")}
   • type python3 manage.py migrate in the terminal to migrate all existing migrations to the postgres database
   • then `heroku config:set DISABLE_COLLECTSTATIC=1``
   • We need to install Gunicorn, which is required to connect to Heroku: pip3 install gunicorn

5. Requirements.txt

   • For Heroku to run the app we need to create a file with all the dependencies: 'requirements.txt'
   • This file is created by using the following code: $ pip3 freeze--local > requirements.txt

6. Procfile

   • Heroku additionally needs Procfile, which tells Heroku how to run the project.
   • In order to create Profile use this command in the terminal: $ echo web: web: gunicorn django_help.wsgi:application > Procfile
   • Then run $ heroku ps:scale web=1 to start web processes

7. Deployment

   • Similary to GitHub, changes are added and committed

   • With $ git push heroku master the committed code can be pushed to Heroku.

   • Alternatively, what I did, was on the Heroku website under the tab 'Deploy' select GitHub and type in your project's repository to link it to Heroku. Then further down enable Automatic Deploys, which then deploys your code to Heroku everytime you push you code to GitHub.

Amazon AWS S3

These are the steps were taken to configure the external server Amazon AWS S3:

1. Creating bucket granting it public access

2. In properties we activate static website hosting

3. Under permissions we add the following CORS Configuration:

   <CORSConfiguration>
       <CORSRule>
           <AllowedOrigin>*</AllowedOrigin>
           <AllowedMethod>GET</AllowedMethod>
           <MaxAgeSeconds>3000</MaxAgeSeconds>
           <AllowedHeader>Authorization</AllowedHeader>
       </CORSRule>
   </CORSConfiguration>
   

4. And under Bucket Policy following code was added and the specific ARN was inserted into "Ressource":

   {
       "Version":"2012-10-17",
       "Statement":[{
           "Sid":"PublicReadGetObject",
           "Effect":"Allow",
           "Principal": "*",
           "Action":["s3:GetObject"],
           "Resource":["arn:aws:s3:::example-bucket/*"
           ]
       }
       ]
   }
   

5. Went to IAM (Identity and Access Management where we can manage who can access our AMazon AWS services) and created a group

6. Created a policy, where we choose S3 Full Access, in Resource added the specific ARN and added the ARN again with '/*' at the end

7. Attached created policy to group

8. Createed a user, enable Programmatic access and gave group permission

9. Downloaded csv file with access keys

10. Installed following packages, which allow us to connect Django to S3 and add 'storages to the app in settings.py

    pip3 install django-storages
    pip3 install boto3
    

11. Added the AWS S3 bucket details in the setting.py file:

    AWS_S3_OBJECT_PARAMETERS = {
        'Expires': 'Thu, 31 Dec 2100 22:00:00 GMT',
        'CacheControl': 'max-age=94608000'
    }
    AWS_STORAGE_BUCKET_NAME = '<bucket-name>'
    AWS_S3_REGION_NAME = '<region>'
    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID")
    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY")
    AWS_S3_CUSTOM_DOMAIN = '%s.s3.amazonaws.com' % AWS_STORAGE_BUCKET_NAME
    

12. Created a custom_storages.py file to set classes to route to the location for static and media files

13. Finally, I pushed the static files to S3 by typing: python3 manage.py collectstatic

Instructions on how to run this project locally

1. Make sure you have an IDE and the following must be installed:

   • PIP (will be already installed if you are using Python 3.4 or above)
   • Python 3
   • Git
   • Django

2. Go to https://github.com/alnibo/milestone-project-4-help-others. There you can either download a copy of the repository by clicking on "Download ZIP" on the top right of the page or if you have Git installed you can clone the repository with the following command:

   git clone https://github.com/alnibo/milestone-project-4-help-others.git
   

3. In your local IDE you need to create two files, one called env.py and the other one .gitignore

4. Your env.py file should contain a SECRET_KEY,

5. Make sure that your .gitignore file contains env.py so that your environment variables won't get pushed to your remote repository.

6. Then run the following command and open port in preview or in a new browser tab:

   python3 manage.py runserver
   

Credits

Content

I found inspiration about donation categories from this website.

Media

The pictures were taken from the online image libraries Pexels and Unsplash.

Acknowledgements

The foundation of this project was the E-Commerce Mini Project from Code Institute. The initial code and concepts were taken from there and then extended and customized for this website.

The code for the back to top button was taken from here.

To create the environment variables I followed hese instructions of Anna Greaves, a Tutor from Code Institute.

The code for smooth scrolling was seen here.

In order to display capital letters for a names from the database inside a django template I found this stackoverflow example.

I used the code from here to stay on the same page in Django.

In order to display something else when empty I used this code.

To set up the error pages I got information from here.

In order to get the total sum of donations I used this stackoverflow example.

To have active navbar links I found a solution form here.

Last but not least, I would like to thank my mentor Aaron Sinnott for his help and everyone from Tutur Support and Student Care for their help and guidance throughout this project.

Also the biggest thank you goes out to my girlfriend who accepted and was ok with me sitting long hours in front of the computer and who supported me every step along the way.

This project was created for educational purposes only.