The Good Samaritan is a non profit organization for humanitarian support. Our target is support orphan children, widows, disabled people and elderly. Please donate to The Good Samaritan Organization to support people in Mozambique to have a more dignified life.
Find out more about this project and help:
Click here to see the project live
- The Good Samaritan Org
- Tables of Contents
- UX
- Design Process:
- Features
- Technologies Used
- Testing
- Known Issues
- Accessibility
- Deployment
- Cloning my project
- Credits
- Share the purpose of The Good Samaritan org in Mozambique.
- Encourage and gain user confidence.
- Provide multiple options of donating and help.
- Create a resposive design, wich works in different screen sizes and devices, due the fact that people use more mobile devices nowadays.
"As a user, I would like to _____________________________"
- view the site from any device (mobile, tablet, desktop).
- donate products as a guest.
- donate all products at once.
- sort products.
- Filter products by category.
- search products by name and category.
- donate a parcel as a guest.
- sponsor a child, widow or elderly as a guest. (recurrent donation)
- view my donation in a pre checkout are like a cart or a bag
- edit my donation in the cart
- remove products from the cart
- remove all products from the cart at once
- have a secure checkout
- receive an email confirming my donation after checkout
- have the possibility to download a pdf with donation details after checkout
- find a page where I can know more about the organization
- Finish any current sponsorship as a guest
- create my own account.
- login with my email or user name.
- login with third party account(google).
- Recover any sponsorship created before create my account on my profile
- view my order history on my own profile.
- manage my sponsorship on my own profile. (see details and finish sponsorship)
- edit my profile details.
- save my profile details when checkout.
- find a contact form.
- be able to log out.
Back to the Tables of Contents
- Bootstrap:
- Bootstrap is a responsive mobile-first design framework with a clean and modern layout, with its simple-to-understand documentation.
- Jquery:
- In an effort to keep the JavaScript minimal, I have decided to use jQuery as foundation to my scripts framework.
- Django:
- Django is a framework that I've used to render the back-end Python with the front-end Bootstrap.
- Django Crispy Forms:
- Django-crispy-forms is an 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.
-
- Software used to build the wireframe of this project. Because Code Institute have provided all students with free access for a limited time and the simplicity and ease of use.
-
The wireframe can be seen here:
Back to the Tables of Contents
-
This project has eighteen separate pages, which are:
- "Home" page, which is the land page;
- "Who We Are" page which contains the information about the organization;
- "FAQs" page which contains the questions that are frequently asked to The Good Samaritan Org;
- "Contact Us" page which contains a form to the user send any question to the org;
- "Register" page which contains a form to the user create an account;
- "Log In" page which contains a form to the user log in using email, user name or third party account (google);
- "Finish Sponsorship" page which contains a form to the user finish a sponsorship as a guest;
- "Product Management" page where the site owner can manage products and parcels;
- "Update Product or Parcel" page which contains a form to the site owner update products or parcels details;
- "My Profile" page where the user can view his donation history, current sponsorship, recover a sponsorship, edit profile details and access the Product Management page (if site owner);
- "Family Parcels" page where the user can choose a parcel to donate;
- "Sponsorship" page where the user can choose a sponsorship to subscribe;
- "Products" page where the user can choose a product to donate;
- "Products Details" page where the user can view the product details before donate;
- "Donation Cart" page where the user can see all chosen products before checkout;
- Check Out (products, parcels or sponsorship) page which contains a form to the user checkout the chosen donation;
- "Confirmation Order" page where the user can view and download donation details after checkout;
- "Past Confirmation Order" page where the user can view and download donation details of a past order in the order history;
-
Register Account:
-
Anybody can register for free and create their own unique account. The project has built-in authentication and authorization to check certain criteria is met before an account is validated. All passwords are hashed for security purposes.
-
-
Log In to Account:
- For existing users, I have more authentication and authorization incorporated to check that the hashed passwords and username match the database, the user can log in using a third party account (google) as well.
- For existing users, I have more authentication and authorization incorporated to check that the hashed passwords and username match the database, the user can log in using a third party account (google) as well.
-
Log Out of Account:
- Users can easily log out of their account with the click of a button.
- Users can easily log out of their account with the click of a button.
-
Navbar:
-
The navbar is different, depending whether the user is logged in or not. The 'My Account' Dropdown menu options will be different.
-
Navbar when the user is logged:
-
Navbar when the user is logged out:
-
-
-
Donate as a guest:
- Every user logged or not can donate a product, parcel and subscribe to a sponsorship.
-
Donate All Products:
-
Button located in products page to donate all products at once, the products and total value may vary if the user sort the product list.
-
-
Most-Needed Items:
-
Button located in products page to list the most needed items, products in this list may vary.
-
-
Donate Button (Products page):
-
Button located in products page to open the product details.
-
-
Donate Button (Product Details page):
-
Button located in products details page to add the product to the cart.
-
-
Donate Parcel Button (Products page):
-
Button located in products page to add the parcel to the cart.
-
-
Sponsor Button:
-
Button located in Sponsorship page to subscribe to a sponsorship, just one subscription is allowed per user or email.
-
-
Profile Form:
- Form in the profile page to update profile details, this details are used to pre populate the checkout form and they can be updated when the user checkout a form and save details to profile.
-
Donation History Column:
-
Column in the profile page where the user can view his past donations and see the past donation details.
-
-
Recover Sponsorship:
-
Section in the profile page where the user can recover any sponsorship created as a guest, the user only can see this section if he does not created a sponsorship while logged.
-
-
Sponsorship:
-
Section in the profile page where the user can view and manage his current sponsorship, the user only can see this section if he already has a sponsorship.
-
-
Product Management Button:
-
Button located in Profile page access the Product Management page, Just the site owner can see this button.
-
-
Edit Product or Parcel Button:
-
Button to update product or parcel details, like price, name, sku and others details.
-
-
Remove Product Button:
-
Button to remove a product from database.
-
-
Add New Product Button:
-
Button to add a new product to database, Parcels can't be added, the number of parcels is fixed, they can be just edited.
-
-
Update Product Quantity Button:
-
Button located in Donation Cart page to update the quantity of a product in the cart.
-
-
Remove Product Button:
-
Button located in Donation Cart page to remove a product from cart.
-
-
Remove All Items From The Cart:
-
Button located in Donation Cart page to remove all products from cart at once.
-
-
Save this information to my profile checkbox:
-
checkbox located in checkout page to details from checkout form to profile.
-
-
Top Page Search Bar:
-
Search bar present in all pages to search any product by name or category.
-
-
Increase unit test coverage.
-
Create a way of interaction between sponsor and sponsored.
-
Create an annual report page, to inform the organization improvements, events and detailed spending.
Back to the Tables of Contents
-
- Used as my primary IDE for coding. Gitpod is an open source platform for automated and ready-to-code development environments that blends into your existing workflow directly from your browser.
-
- Used as remote storage of my code online. A company that provides hosting for software development version control using Git.
-
- Used as a basic template to kick start the project.
-
- Used for wireframing the project. see wireframe
-
- Used to create the database schema. See data base schema
-
- A set of web developer tools built directly into the Google Chrome browser. I used these tools constantly thoughout the development cycle.
-
- I used the Canva platform to make the style guide.
-
- I used TinyPNG to compress my image files to try to reduce the loading time for each page.
-
- Great tool to support throught the web development that helps to test and find issues on markup file.
-
- Great tool to support throught the web development that helps to test and find issues on style file.
-
- W3C Schools is a great platform that covers all aspects of web development, great tools that provides information for developers.
-
- Although it isn't a technology, I found a lot of guidance on Stack Overflow.
-
- DN Web Docs, previously Mozilla Developer Network and formerly Mozilla Developer Center, is a documentation repository for web developers used by Mozilla, Microsoft, Google, and Samsung.
-
- Is a blog where you can find lots of tutorial and tricks to write a good css.
Back to the Tables of Contents
-
- Used as the base for markup text. The language used to build the structure and add its content.
-
- Used as the base for cascading styles. The language used to style the HTML5 elements according to the design and color scheme.
-
- Used as the overall design framework. I decided to use Bootstrap's grid container system as I wanted to design my project with a 'mobile first' approach, but another bootstrap resources were used like the contact form.
-
- FontAwesome icons is where I got most part of the icons for my design project.
-
- I used Google fonts to provide the fonts of the website.
-
- Used as the primary JavaScript functionality. In an effort to keep the JavaScript minimal, I have decided to use jQuery as foundation to my scripts framework.
-
- Django-crispy-forms is an 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.
Back to the Tables of Contents
-
- Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
-
- Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
-
- A Django application that provides country choices for use with forms, flag icons static files, and a country field for models.
-
- This library provides extensive file format support, an efficient internal representation, and fairly powerful image processing capabilities.
-
- pylint-django is a Pylint plugin for improving code analysis when analysing code using Django. It is also used by the Prospector tool.
-
- Used to store products pictures
-
- Used for app hosting.
-
- Web Server used on Heroku for this project.
-
- This simple Django utility allows you to utilize the 12factor inspired DATABASE_URL environment variable to configure your Django application.
-
- Django-storages is a collection of custom storage backends for Django.
-
- S3 provides the ability to store, retrieve, access, and back up any amount of data at any time and place. Used to store static files.
-
- Used as the back-end programming language.
-
- Online payment and subscription API, used as UI to manage the store payments as well.
-
- dj-stripe implements all of the Stripe models, for Django. Set up your webhook endpoint and start receiving model updates. You will then have a copy of all the Stripe models available in Django models, as soon as they are updated!
-
- xhtml2pdf enables users to generate PDF documents from HTML content easily and with automated flow control such as pagination and keeping text together.
-
- Waypoints is the easiest way to trigger a function when you scroll to an element, used to infinite scroll.
Back to the Tables of Contents
-
All apps are tested by django TestCase, it includes forms and views automated tests see example bellow:
from django.test import TestCase from home.forms import ContactForm class testContactForm(TestCase): """ Test contact form Methods: *test_first_name_is_required: Test if first name field is required; *test_last_name_is_required: Test if last name field is required; *test_email_address_is_required: Test if email field is required; *test_email_address_is_valid: Test if email field is valid; *test_message_is_required: Test if message field is required; """ def test_first_name_is_required(self): """ Test if first name field is required """ form = ContactForm({'first_name': ""}) self.assertFalse(form.is_valid()) self.assertIn('first_name', form.errors.keys()) self.assertEqual(form.errors['first_name'][0], 'This field is required.')
-
To check the test results in CLI, just run tyhe following command:
-
python3 manage.py test
-
-
To check the test results for a specific app in CLI, just run tyhe following command example:
-
python3 manage.py test home.tests
-
-
To check the test results and coverage, follow these steps:
-
Install Coverage:
-
pip3 install coverage
-
-
For running on a django project, use this command:
-
coverage run --source='.' manage.py test
-
-
If you need to remove gathered data, execute:
-
coverage erase
-
-
If you want to show the results in the command line, run:
-
coverage report
-
-
For more readable reports:
-
coverage html
-
-
To check the coverage html:
- Open the project directory tree on browser:
-
python3 -m http.server
-
- Find the "htmlcov/" item in the list and click on this.
- Check the coverage status and click on any item in the list to see more details.
- Open the project directory tree on browser:
-
"As a user, I would like to _____________________________"
-
view the site from any device (mobile, tablet, desktop).
- I manually tested the live project by doing the following:
- Using Google Developer Tools to view the project on devices with different screen sizes.
- Asking for feedback from friends and family who opened and interacted with the project on their devices.
- I manually tested the live project by doing the following:
-
donate products as a guest.
- All visitors are able to donate products without an account.
-
donate all products at once.
-
sort products.
-
Filter products by category.
-
search products by name and category.
-
donate a parcel as a guest.
-
sponsor a child, widow or elderly as a guest. (recurrent donation)
- All visitors are able to donate parcels or subscribe to a Sponsorship without an account.
-
view my donation in a pre checkout are like a cart or a bag
-
edit my donation in the cart
-
remove products from the cart
-
remove all products from the cart at once
-
have a secure checkout
-
receive an email confirming my donation after checkout
-
have the possibility to download a pdf with donation details after checkout
-
find a page where I can know more about the organization
-
Finish any current sponsorship as a guest
-
create my own account. I've created my own personal account. In addition to this primary account, I've tested with about 5 fake accounts in order to confirm authentication and validation worked as expected. All authentication is handled by Django-Allauth.
-
login with my email or user name.
-
login with third party account(google).
-
Recover any sponsorship created before create my account on my profile
-
view my order history on my own profile.
-
manage my sponsorship on my own profile. (see details and finish sponsorship)
-
edit my profile details.
-
save my profile details when checkout.
-
find a contact form.
-
be able to log out.
All pages checked. All errors and warnings fixed.
-
W3C HTML Validator - Some erros and warning were found, like:
- Duplicated Id;
- Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections;
- Bad value for attribute action on element form: Must be non-empty;
- End tag span seen, but there were open elements;
- Unclosed element i;
When checking the sponsorship form page the HTML validator rise the following error:
- "Duplicate ID id_stripe_public_key." I still trying to find what is causing it, because I can't find this id duplicated in the HTML document.
- W3C CSS Validator - No error found in the style sheet.
-
JShint - "Metrics: There are 20 functions in this file. Function with the Largest function has 13 statements in it, while the median is 1. The most complex function has a cyclomatic complexity value of 5 while the median is 1."
- "'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').";
- "'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).";
- "'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).";
- "'template literal syntax' is only available in ES6 (use 'esversion: 6')."
- This code works well despite these warnings
- '$' - This is for jQuery, is a sign to define/access jQuery;
-
JSesprima - "Code is syntactically valid."
I manually tested the website on the following web browsers, checking buttons, responsiveness and design worked as planned:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
-
When checking the sponsorship form page and the checkout page the HTML validator rise the following error: * "Duplicate ID id_stripe_public_key." I still trying to find what is causing it, because I can't find this id duplicated in the HTML document.-
Fixed: The postloadjs block was being rendered inside the content block, the solution was put the postloadjs block outside the content block. Example:
-
Before:
{% block content %} <section> <h1>Example</h1> </section> {% block postloadjs %} {{ block.super }} {{ stripe_public_key|json_script:"id_stripe_public_key" }} {{ client_secret|json_script:"id_client_secret" }} <script src="{% static 'checkout/js/checkout.js' %}"></script> {% endblock %} {% endblock %} -
After:
{% block content %} <section> <h1>Example</h1> </section> {% endblock %} {% block postloadjs %} {{ block.super }} {{ stripe_public_key|json_script:"id_stripe_public_key" }} {{ client_secret|json_script:"id_client_secret" }} <script src="{% static 'checkout/js/checkout.js' %}"></script> {% endblock %}
-
-
Back to the Tables of Contents
- Each image has an alt attribute describing the image's function
- Each anchor tag has an aria-label attribute describing where that link goes
- Each section has an aria-labelledby attribute
- Content has a contrast with the background to improve the visibility
- Form inputs have labels or placeholder
Back to the Tables of Contents
Please note - in order to run this project locally on your own system, you will need the following installed:
- Python3 to run the application.
- PIP to install all app requirements.
- Any IDE such as Microsoft Visual Studio Code.
- GIT for cloning and version control.
- Microsoft Visual Studio Code (or any suitable IDE) to develop your project.
Next, there's a series of steps to take in order to proceed with local deployment:
-
Clone this GitHub repository by either clicking the green Clone or download button and downloading the project as a zip-file (remember to unzip it first), or by entering the following into the Git CLI terminal:
-
Navigate to the correct file location after unpacking the files.
-
cd
-
-
Create an env.py file with your credentials. An example can be found here.
-
Install all requirements from the requirements.txt file using this command:
-
sudo -H pip3 -r requirements.txt
-
-
In the IDE terminal, use the following command to launch the Django project:
-
python3 manage.py runserver
-
The Django server should be running locally now on http://127.0.0.1:8000/ (or similar). If it doesn't automatically open, you can copy/paste it into your browser of choice.
-
When you run the Django server for the first time, it should create a new SQLite3 database file: db.sqlite3
-
Next, you'll need to make migrations to create the database:
-
python3 manage.py makemigrations
-
python3 manage.py migrate
-
-
In order to access the Django Admin Panel, you must generate a superuser:
-
python3 manage.py createsuperuser
- (assign an admin username, email, and secure password)
-
Back to the Tables of Contents
This site is currently deployed on Heroku using the main branch on GitHub. To implement this project on Heroku, the following steps were taken:
-
Create a requirements.txt file so Heroku can install the required dependencies to run the app.
-
pip3 freeze --local > requirements.txt
- My file can be found here.
-
-
Create a Procfile to tell Heroku what type of application is being deployed, and how to run it.
-
echo web: gunicorn good_samaritan.wsgi:application > project/Procfile
- My file can be found here.
-
-
Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
-
In the Heroku Resources tab, navigate to the Add-Ons section and search for Heroku Postgres. Make sure to select the free Hobby level. This will allow you to have a remote database instead of using the local sqlite3 database, and can be found in the Settings tab.
-
In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental, but please omit the development=1 variable; this is only for local deployment. variables as follows:
- DJANGO_SECRET: <Your_Django_Secret>
- STRIPE_PUBLIC_KEY: <Your_Stripe_Public_Key>
- STRIPE_SECRET_KEY: <Your_Stripe_Client_Secret>
- STRIPE_WH_SECRET: <Your_Stripe_Webhook_Secret>
- EMAIL_HOST_PASS: <Your_email_host_password>
- EMAIL_HOST_USER:
- AWS_ACCESS_KEY_ID: <From_downloaded_amazon_CSV_file>
- AWS_SECRET_ACCESS_KEY: <From_downloaded_amazon_CSV_file>
- USE_AWS:
- DATABASE_URL: <Postgres_db_url>
- Your app should be successfully deployed to Heroku at this point.
-
In the project environment install "dj-database-url" and "psycopg2-binary":
-
pip3 install dj-database-url
-
pip install psycopg2-binary
-
-
Import dj_database_url in settings.py:
-
Import dj_database_url
-
Copy and paste the default DATABASES variable and comment one of these variable.
-
In heroku config var at settings tab, copy the DATABASE_URL and paste in the env.py to use in the default "DATABASES" configuration;
-
Set the default "DATABASES" configuration for production dj_database_url.parse() and save:
# DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
DATABASE_URL = os.environ.get('DATABASE_URL', '')
DATABASES = {
'default': dj_database_url.parse(DATABASE_URL)
}-
Close any connection on CLI typing "ctrl + c" on CLI and Migrate database:
-
python3 manage.py migrate
-
-
Load database objects:
- If you have Fixtures, you will need to load each fixture at a time, for this project will be
for categories fixture, products fixture and after for parcel fixture:
-
python3 manage.py loaddata categories
-
python3 manage.py loaddata products
-
python3 manage.py loaddata parcels
-
- If you don't have fixtures in your project, you can download your local mysql database and upload it to postgres:
- Make sure your manage.py file is connected to your mysql database:
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', }
- Use this command to backup your current database and load it into a db.json file:
-
python3 manage.py dumpdata --exclude auth.permission --exclude contenttypes > db.json
-
- Connect your manage.py file to your postgres database:
# DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': BASE_DIR / 'db.sqlite3', # } DATABASE_URL = os.environ.get('DATABASE_URL', '') DATABASES = { 'default': dj_database_url.parse(DATABASE_URL) }
- Then use this command to load your data from the db.json file into postgres:
-
python3 manage.py loaddata db.json
-
- Make sure your manage.py file is connected to your mysql database:
- If you have Fixtures, you will need to load each fixture at a time, for this project will be
for categories fixture, products fixture and after for parcel fixture:
-
Setup the default database to postgres in production environment:
if 'DATABASE_URL' in os.environ: DATABASE_URL = os.environ.get('DATABASE_URL', '') DATABASES = { 'default': dj_database_url.parse(DATABASE_URL) } else: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': BASE_DIR / 'db.sqlite3', } }
-
Install gunicorn:
-
pip3 install gunicorn
-
-
Login to heroku on CLI:
-
heroku login -i
-
-
Temporarily disable collectstatic:
-
heroku config:set DISABLE_COLLECTSTATIC=1 --app good-samaritan-org
-
-
Add the heroku app to ALLOWED_HOSTS in settings.py
ALLOWED_HOSTS = ['good-samaritan-org.herokuapp.com', 'localhost']
-
Initialize Heroku git remote:
-
heroku git:remote -a good-samaritan-org
-
-
If you didn't setup the automatic deployment, then Push repository to heroku via CLI:
-
git push heroku main
-
-
If you didn't setup the automatic deployment, then it's a good time to setup it.
- On deploy tab in heroku dashboard, choose github as Deployment method, look for the repository name (good_samaritan_org) and connect.
- In the same tab, enable automatically deploys.
-
Create an AWS account.
-
Choose the S3 service in the services menu.
-
Create a new bucket, unset "Block all public access" option and set "Turning off block all public access might result in this bucket and the objects within becoming public" option.
-
In the bucket configuration, at the properties tab edit and enable the Static website hosting.
-
As index document use index.html and as Error document error.html, then save changes.
-
At the permission tabs edit Cross-origin resource sharing (CORS), Paste the CORS configuration, then save:
[ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ]
-
Then edit the Bucket policy, click on AWS Policy Generator.
- Select Type of Policy: S3 Bucket Policy
- Effect: Allow
- Principal: *
- Actions: getObject
- Past the Amazon Resource Name (ARN)
- click add statement
- Then generate policy and copy
-
Paste in the Bucket policy, add a "/" to the end of resource field ("arn:aws:s3:::good-samaritan-org/") and save.
-
Edit access control list (ACL).
-
Set Everyone (public access): list, then save.
-
In the Services menu, open the IAM.
-
Click in User groups, then click create group.
-
Click in Policies and then create policies.
-
On Json tab click import managed policy.
-
Search for s3 and import the AmazonS3FullAccess.
-
In the Json tab change de "Resource" field content to and Then click review policy:
[ "arn:aws:s3:::good-samaritan-org", "arn:aws:s3:::good-samaritan-org/*" ]
-
Give a name and a description, then click create policies.
-
In the User Groups tab open your new created group.
-
In the permission tab click add permissions and attach policies.
-
Select the new created policy and click add permission, after click on Users, then click add user.
-
Give a name, set Programmatic access, click "next: permissions" and set new created attached policy, then create user
-
Download the CSV file (Don't leave this screen without download this file, you won't have another chance!)
-
On project environment, install boto3 and django-storages:
-
pip3 install boto3
-
pip3 install django-storages
-
-
Add 'storages' to INSTALLED_APPS in settings.py.
-
Add, in settings.py, the variables AWS_STORAGE_BUCKET_NAME, AWS_STORAGE_BUCKET_NAME, AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY:
if 'USE_AWS' in os.environ: AWS_STORAGE_BUCKET_NAME = 'good-samaritan-org' AWS_S3_REGION_NAME = 'eu-west-1' AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID') AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
-
In heroku settings tab, add the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY to Config Vars.
-
Remove DISABLE_COLLECTSTATIC variable from Config Vars in heroku.
-
Add AWS_S3_CUSTOM_DOMAIN variable to settings.py:
if 'USE_AWS' in os.environ: AWS_STORAGE_BUCKET_NAME = 'good-samaritan-org' AWS_S3_REGION_NAME = 'eu-west-1' 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 = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
-
Create a custom_storages.py file on root directory.
-
In the settings.py add STATICFILES_STORAGE, STATICFILES_LOCATION, DEFAULT_FILE_STORAGE, MEDIAFILES_LOCATION variables:
if 'USE_AWS' in os.environ: # Bucket config AWS_STORAGE_BUCKET_NAME = 'good-samaritan-org' AWS_S3_REGION_NAME = 'eu-west-1' 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 = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com' # Static and media files STATICFILES_STORAGE = 'custom_storages.StaticStorage' STATICFILES_LOCATION = 'static' DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage' MEDIAFILES_LOCATION = 'media'
-
Then Override static and media URLs in production:
if 'USE_AWS' in os.environ: # Bucket config AWS_STORAGE_BUCKET_NAME = 'good-samaritan-org' AWS_S3_REGION_NAME = 'eu-west-1' 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 = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com' # Static and media files STATICFILES_STORAGE = 'custom_storages.StaticStorage' STATICFILES_LOCATION = 'static' DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage' MEDIAFILES_LOCATION = 'media' # Override static and media URLs in production STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/' MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'
-
Add to settings.py the AWS_S3_OBJECT_PARAMETERS:
if 'USE_AWS' in os.environ: # Cache control AWS_S3_OBJECT_PARAMETERS = { 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT', 'CacheControl': 'max-age=94608000', } # Bucket config AWS_STORAGE_BUCKET_NAME = 'good-samaritan-org' AWS_S3_REGION_NAME = 'eu-west-1' 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 = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com' # Static and media files STATICFILES_STORAGE = 'custom_storages.StaticStorage' STATICFILES_LOCATION = 'static' DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage' MEDIAFILES_LOCATION = 'media' # Override static and media URLs in production STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/' MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'
-
In the s3 bucket interface, create a media folder and upload all media files.
-
Confirm the email of the new superuser trying to login or direct on admin interface.
-
Change stripe webhook endpoint.
-
In the Admin interface, setup the most-need products in Products table.
-
Change the domain name in Sites table.
-
Add the Google API to Social Applications table if you're using the google account to log in.
Back to the Tables of Contents
If you would like to work on my project further you can clone it to your local machine using the following steps:
- Scroll to the top of my repository and click on the "clone or download button"
- Decide whether you want to clone the project using HTTPS or an SSH key and do the following: * HTTPS: click on the checklist icon to the right of the URL * SSH key: first click on 'Use SSH' then click on the same icon as above
- Open the 'Terminal'
- Change the current working directory to the location where you want the cloned directory
- Type 'git clone', and then paste the URL you copied earlier.
- Press 'Enter' to create your local clone.
You can find both the source of this information and learn more about the process on the following link: Cloning a Repository
Back to the Tables of Contents
Thank you to the following people who helped with support, inspiration and guidance at different stages in the project:
- My mentor Caleb Mbakwe
- Code Institute Mentors and Tutors.
- Code Institute Student Care, which is always Kind.
- My class on slack.
- The supportive Code Institute community on Slack.
- My family and friends for their patience and honest critique throughout.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent