Embarr Equestrian Donations This project is a Full Stack website built using the Django framework and deployed using Heroku. It is a site for the promotion of a retirement home for senior Horses with the goal to raise money for the care of the horses that reside there. The site is a full stack ecommerce platform , where the user can submit online donations and pay using stripe. the site also follows and displays the CRUD logic, Users can Create (Submit a Comment on a blog post), Retrieve (Search for an Animal to donate to.), Update (Update their blog comments/ Profile) and Delete (Delete their comments). The site was designed with the mobile first approach so it is fully functional across all mobile devices aswell as desktops. Enjoy !!
Goals:
- To attract new donations,
- Highlight the benefits of what the charity has to offer,
- Provide useful information on the care of the senior horse,
- Provide a great user experience on all mobile devices,
- Be easy to navigate
- Give clear calls to action
- Build the brand image
- Raise the conversion rate.
- Promote the welfare of Horses.
As a website user, I can:
- Navigate around the site and easily view the desired content.
- View a list of Horses in the catalog.
- Search for an animal via the search bar tool.
- Add an animal to my cart annonymously to pay a donation.
- Click on a blog post to read more.
- View & Read the comments posted on a blogpost.
- Read about Embarr Donations on the about page.
- Submit a welfare concern via the about page.
- Sign up for the newsletter.
- Navigate to the charitys facebook page
- Register as an account user.
As logged in website user, I can:
- Register/Log in as a user.
- View a catalog of horses that need donations for their care.
- Select a horse to donate to and submit an online payment.
- Search for and read blog posts.
- Comment on blog posts.
- Edit/Delete my previous blog comments.
- Manage my profile by updating my details.
- View a list of my donations.
- Logout from the website.
As a website superuser, I can:
- Add/ delete horses to/from the animal catalog & update their details via the backend admin & frontend site.
- Create/ update/delete blog posts via backend & frontend site.
- Create draft blog posts that can be reviewed and published at a later date.
- Create new users.
- Delete user and comment.
- Approve user's comments.
This project was managed using the Agile method. All user stories were captured and updated using Githubs Project functionality and can be reviewed Here. A list of the issues captured and progressed can be viewed Here
The site is B2C focused - I asked the following questrions:
-
What are your site users requirements?
To support and give to a charity they feel is deserving
-
What information and features can you provide to meet those needs?
A clear display of the horses that require support and donations
-
How can you make the information easy to understand?
Intuitive and clear design, high quality clear images, clear and descriptive titles, simple payment process, simple signup/login/logout process.
-
Would there be other pages within your own site you could link to from your chosen page?
Home page, nav bar, custom product pages would also link back to primary shop page. Error pages also link back to shop page.
-
Are there opportunities to link back to external websites that already rank highly on Google?
There would be opportunities to link up to other animal welfare sites.
-
Who are your users? Equine enthusiasts, animal lovers.
Marketing Strategies:
- Facebook page - I created a facebook page to engage with a far reaching audience and attract follows. - Click Here
- Newsletter sign up - A site user can sign up for a monthly newsletter (Please note this function is not fully live - it requires further development - for now it is just an empty form on the site)
- There is potential to promote open days, or encouraging people to volunteer and help on the farm - this is mentioned in the About us section.
SEO implementation, including:
- A robots.txt file
- A sitemap.xml file
- Descriptive meta tags
- rel attributes on links to external resources
- Content
- Keywords in the metatags: "Horses, Ponies, Mares, Geldings, Retired, Charity, Donations, Equestrian, Rescue, Animals"
- Home Page
Home page has the hero image and the Donate option prominently displayed. The navigation and search options are also available as well as the shopping cart icon.
-
Navigation Bar
Featured on all pages, the full responsive navigation bar includes links to the Home page and all sub pages - About, Blog, Horses, the shopping cart and User Account, it is identical in structure for each page to allow for easy navigation. When the user logs in,the signin/up link is replaced with the logout link. The navigation items are styled to transition to a hamburger menu when the site is reduced in size on a mobile device. This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
-
Logo
The logo I created simply using a combination of text and a font awsome icon. The logo is a hyperlink that takes the user to the homepage.
-
Register Page
The User register page was created using the out of the box option from Django Auth. Further styling of this page is required but currently out of scope for the timeframe of this project.
-
Login Page & Logout
The User login/ logout pages were created using the out of the box option from Django Auth. Further styling of this page is required but currently out of scope for the timeframe of this project.
-
Profile Page
The User pofile page can be accessed by clicking on the Account Icon in the navigation bar, once they are logged in. the user can update their personal details here and view their donations history. There is room to expand the functionality of this page, for example, allow the user to upload a profile picture or add a bio section, but this was out of scope for this project. Further styling of this page is required but currently out of scope for the timeframe of this project.
-
Search Bar
The search bar allows a user to search for a Animal in the catalog they would like to donate to/ read about and/or comment on. The search is crude and requires some futher development as it is not functional across the entire site, but this was out of scope for this project due to time constraints.
-
Blog
On the blog page the site user can click on a blog post to to see more detail, or click though the page navigation (pagination is actioned once 8 posts are displayed. to see further blog posts.
-
Blog Detail Pages
The blog detail page(s) are accessed by clicking on the high level view of a blog post. This takes the user to a full page view of the service, that expands on the details, allows the user to read the blogs posted, or if logged in as a registered user they can submit a comment, or delete/ update their comment, they can not eidt delete any other users comments.
-
Submit Comment
The submit comment option is accessed via the blog detail page and is only available for logged in registered users, otherwise this option is hidden. Logged in users can select 'Submit a Comment', a comment form appears, once populated and submitted, a message will display informing the user that their comment has been submitted for approval. An admin must approve the comment before it will display.
Update/ Delete Comment
The Update/delete comment option is accessed via the blog detail page and is only available for logged in registered users, otherwise this option is hidden. Logged in users can update/ delete reviews they have posted. They cannot update/ delete other users review. On selection of 'Edit' the user will be presented with a form to edit and submit. On submission the user will receive message feedback to say their message has been updated. If the user selects to 'delete' by clicking on the trash can icon, the user will be asked if they are sure they want to delete, and once selected it will update them their message has been deleted.
About Us Page
This page displays Embarr Donations Mission statement. It also provides an annonymous welfare concern form for a site user to report animal welfare cases with revealing their identity. On the page in the footer the site user can also sign up for the monthly newsletter that is handled by mailchimp and see contact details and links to the facebook page and instagram.
Animal Catalog
The Horses link in the nav bar takes the user to the catalog of horses that are in the care of Embarr Equestrian. The site user can select a horse by clicking on the image. They can read further detail about that horse and opt to make a donation.
Create, Update/ Delete Animal
As a logged in superuser crud functionality is available via the account option by navigating to Animal Management, here the superuser can add/ update an animal in the catalog. The options to edit/ delete an animal in the catalog are also available to the superuser.
Shopping Cart
Once a site user selects a horse in the catalog they are brought to the shopping cart page where they add their donation to the cart. They also have the option here can to increase their donation amount by quantities/ remove/update the cart.
Checkout
After adding donations to the cart, the user can select 'secure checkout' and they are brought to the checkout page. Here they fill in all their billing details before adding their card details and clicking on complete payment. Payments are handled by 'Stripe'. Users can checkout annonymously and/ or if registered, their orders will be recorded and available as an Order list under their profile.
Checkout Success
Once payment is successful the site user is brought to the success page and an order confirmation is sent via email. This email confirmation is actioned by a scucessful payment intent webhook from stripe.
User Profile
If a user has registered and logged into the site. They can navigate to their account profile via the nav bar. In this view, they can update their personal details and view a list of their donations.
404 Page
- Approval authentication of updated comments (This was out of scope)
- Update Animal Catalog with Donation Target Details and Amount raised to date detail.
- Bespoke forms for the out of the box Django Auth pages - Login/ Logout/ Register and comment forms.
- Improved search functionality
- Add bio/ profile picture to profile
- Improvements of the toasts messaging.
- Improve the CSS/ Images, overall frontend design.
- Add cookie consent and privacy statement.
- Further SEO improvements e.g sitemap google registration.
- Wishlist/ favourites.
- 500 page etc..
- HTML
- CSS
- JavaScript
- Django
- Python
Python Packages:
- Gunicorn - As the server for Heroku
- Cloudinary - Was used to host the static files and media
- Dj_database_url - To parse the database URL from the environment variables in Heroku
- Psycopg2 - As an adaptor for Python and PostgreSQL databases
- Allauth - For authentication, registration, account management
- Crispy Forms -To style the forms
- django coniutries
- Pillow to process and save all the images downloaded through the database
- Git/ Github - Git/Github was used for version control, storage and deployment of the project.
- Heroku - Heroku was used to deploy and create the terminal application.
- Am I Responsive - This was used for the mockup image in the overview and assist with the responsiveness testing.
- Bootstrap - This was used to style the website, add responsiveness and interactivity
- PostgreSQL - Database used through heroku.
- Lucidchart - Lucidchart was used to create the database diagram
- PEP8 - PEP8 was used to validate all the Python code
- W3C - HTML - W3C- HTML was used to validate all the HTML code
- W3C - CSS - W3C - CSS was used to validate the CSS code
- Fontawesome - To add icons to the website
- Google Chrome Dev Tools - To check App responsiveness and debugging
- aws - was used to host the static files and media
- Stripe for processing all online and credit card purchases on the website & for handling the webhooks.
Test 1
All Navigation bar links are clickable and return the expected pages.
Test Steps:
Click on each nav link in the nav bar, and navigate between all pages using the nav links. Checking that each link brings the user to the correct page.
Test 2
Navigation Bar is responsive and transforms to a Hamburger menu
Test Steps:
Use developer tools to inspect and test the responsiveness and click on all nav links, navigating between all linked pages.
Results:
Transforms to Hamburger menu as expected and links to all correct pages as tested in test 1.
| Navbar Expected Results | Pass y/n |
|---|---|
| Login - links to sign in page | Y |
| Register - links to register page | Y |
| Home - brings user to home page | Y |
| Embarr Equestrian links to home | Y |
| Logout links to sign out page | Y |
| Username appears in profile when logged in | Y |
| Login link reappears when logged out | Y |
| Messages appear as expected when successful login/ logout | Y |
| Hamburger Navbar Expected Results | Pass y/n |
|---|---|
| Login - links to sign in page | Y |
| Register - links to register page | Y |
| Home - brings user to home page | Y |
| Embarr Equestrian links to home | Y |
| Logout Link appears when logged in | Y |
| Logout links to sign out page | Y |
| Username appears when logged in | Y |
| Username links to User Profile Page | Y |
| Login link reappears when logged out | Y |
| Messages appear as expected when successful login/ logout | Y |
Test 1
Test Steps:
Click on page navigation links in the nav bar
| Expected Results | Pass y/n |
|---|---|
| All Links working | Y |
Test 1
Enter text into the search bar to check for return of results Test Steps:
Enter text into search bar that will return a positive result For example – Horse, Pony
Test 2
After entering text in the search box click on search magnifier to return a result After entering text in the search box hit return to return a result
Test 3
Confirm that the link returned from a positive result links to the correct page Confirm that the page displayed from a negative result return is displaying correctly
| Expected Results | Pass y/n |
|---|---|
| Search returns a positive result | Y |
| Search link returned links to correct result | Y |
| Search returns a negative result - page displays as expected | Y |
| Hitting return after entering text returns the result page | Y |
| Clicking the search magnifier returns the result page | Y |
Test 1 -Register
Test steps:
Click on register, sign up page displays, populate fields and submit
Test 2 - Email Confirmation
Test steps:
On registering the user is asked to verify their email before they can sign in.
Click on register, sign up page displays, populate fields and submit
Test 3 – Login
Test steps:
Click on login, enter details and submit
Test 4 - Update Profile
Test steps:
Login, click on username, enter details and submit
Test 5 - Logout
Test steps:
Click on logout, and verify that you are sure
| Expected Results | Pass y/n |
|---|---|
| Register brings user to sign up page | Y |
| User can sucessfully Register | Y |
| User's Profile name appears in Profile when logged in | Y |
| User can click on username to go to the profile page & update their profile | Y |
| Login brings user to sign up page | Y |
| Logout brings user to sign out page | Y |
| On registering the user is asked to verify their email before they can sign in. | Y |
Pagination is set to '8' in admin for the Blog Posts
Test Steps:
View homepage & Scroll to bottom of homepage click on next
| Expected Results | Pass y/n |
|---|---|
| User can only see eight Service posts per page | Y |
| User can navigate to next page to view more posts | Y |
Test 1 - View Blog Posts
Test Steps:
Navigate to the blog page, view list of blog posts
Test 2 - Click on Blog Post link
Test Steps:
From the blog page click on each post to navigate to the blog post details page to view the blog post and see the list of reviews.
| Expected Results | Pass y/n |
|---|---|
| User can view all blog posts on homepage | Y |
| User can click on link on a blog post to navigate to the blog post detail page | Y |
Test 1 - Submit a Comment
Test Steps:
- Log in via the nav link
- Navigate to the blog post detail page as in Test 1.
- Click submit a comment and populate all fields
- Log in as an admin to approve the review
- Log out and back in as an online user
- View submitted comment
- Confirm that the Edit/delete options are available
- Log out and back in as a different user
- Confirm that the Edit/delete options are not available for other users' comment posts.
Test 2 – Edit/ Delete a Comment
Users when logged in can edit/ delete comments linked to their username only
Test Steps:
- Log in as a user
- Navigate to blog post detail view and select a post to edit and update
- Once completed and confirmed update occurred, click on the trash can to delete it.
| Expected Results | Pass y/n |
|---|---|
| Post Click to Review takes user to correct post detail page | Y |
| User - not logged in - can only see the post comments and cannot submit | Y |
| User - logged in - can submit a comment | Y |
| User - logged in - after submitting a comment the approval message appears | Y |
| User - logged in can edit comments linked to their username only | Y |
| User - logged in can delete comments linked to their username only | Y |
| User - logged in is brought to update comment page as expected on clicking edit | Y |
| User - logged in receives visual message feedback that their updates have occurred | Y |
| User - logged in can successfully edit a comment item | Y |
| User - logged in can successfully delete a comment item | Y |
| Crud links are not accessible by entering urls, defensive desighn is working | Y |
Test
Test Steps:
Click on the Horses link in the nav bar to view the horse catalog
| Expected Results | Pass y/n |
|---|---|
| Option to select a dropdown category - Horse & Pony | Y |
| Once a selection is made, the catalog of horses/ ponies is available to view | Y |
Test
Test Steps:
Click on a Horses image in the catalog to view more detail and see the add to cart option.
| Expected Results | Pass y/n |
|---|---|
| Clicking on a horses image brings the user to detail page where the option to add to cart is displayed | Y |
Test
Test Steps:
Select a horse in the catalog, click add to cart.
| Expected Results | Pass y/n |
|---|---|
| Clicking on add to cart, increments the shopping cart in the nav bar | Y |
Test 1
Test Steps:
After adding an item to the shopping bag, clicking on the bag in the nav bar brings the user to the shopping cart page.
Test 2
Test Steps:
Secure checkout option is available in the shopping cart.
Test 3
Test Steps:
Option to remove items from bag is available and functioning.
Test 3
Test Steps:
Option to remove items from bag is available and functioning.
Test 4
Test Steps:
Option to increase/ decrease quantity & update items in bag is available and functioning.
Test 5
Test Steps:
Shopping bag in nav bar total gets increased/ decreased in line with quantity function after update cart is selected.
| Expected Results | Pass y/n |
|---|---|
| Clicking on the populated cart, brings the user to the shopping cart page | Y |
| Secure checkout option is available in the shopping cart. | Y |
| Option to remove items from bag is available and functioning. | Y |
| Option to increase/ decrease quantity & update items in bag is available and functioning. | Y |
| Shopping bag in nav bar total gets increased/ decreased in line with quantity function after update cart is selected. | Y |
Test 1
Test Steps:
After adding an item to the shopping cart, the options to select secure checkout is available and functioning.
Test 2
Test Steps:
Selecting secure checkout in the shopping cart, takes the user to the checkout page.
Test 3
Test Steps:
User can populate the billing details form and submit a payment using a stripe test card.
Test 4
Test Steps:
Payment sucessful - user is brought to the order confirmation page & an order confirmation email is sent
Test 5
Test Steps:
Payment un-sucessful - error message is displayed and the user can try again.
| Expected Results | Pass y/n |
|---|---|
| After adding an item to the shopping cart, the options to select secure checkout is available and functioning. | Y |
| Selecting secure checkout in the shopping cart, takes the user to the checkout page. | Y |
| User can populate the billing details form and submit a payment using a stripe test card. | Y |
| Payment sucessful - user is brought to the order confirmation page. | Y |
| Payment un-sucessful - error message is displayed and the user can try again. | Y |
| Orders are populated in the django admin Database with correct totals | Y |
Test 1
Go to Stripe console and confirm payments are being recorded correctly
Test 2
Go to stripe webhooks anc confirm webhooks are being sucessfully created
Test 1
Test Steps:
Once logged in a User has the ability to update their profile.
Test 2
Test Steps:
Selecting the profile option under account a user can see their order history.
| Expected Results | Pass y/n |
|---|---|
| Once logged in a User has the ability to update their profile. | Y |
| If a logged in user has orders these can be viewed in the Profile view | Y |
Test 1
Test Steps:
User can navigate to the About us page and select to submit a welfare concern via a form.
| Expected Results | Pass y/n |
|---|---|
| User can navigate to the About us page and select to submit a welfare concern via a form. | Y |
| Admin User can see the submissions in the django admin panel | Y |
All links were tested and functioning as expected
All external url links are set to open in a new window and tested, including the footer links For example the Facebook link on the About page.
All messaging e.g Toasts/ modal - were tested and working as expected
Test 1
Register a new user, validate email address & log in
Test 2
Complete a full order, check webhooks in Stripe & confirm email is sent
Expected Results | Pass Y/N
Email confirmation on registration is enabled and using gmail. Tested and working as expected. | Y Order Email Confirmation triggered by stripe webhooks are enabled, tested and working as expected | Y
On entering email into subscription field in the footer of the 'About' page, the subsciption is successfully sent to the relevant Mailchimp account.
Email Validation is working on the Newsletter subscription field
Test 1
Test Steps:
Once logged in as a superuser, crud fuctionality is available via the frontend online, the super user can add, update, delete animals from the catalog.
| Expected Results | Pass y/n |
|---|---|
| Once logged the superuser has the ability to add to the animal catalog. | Y |
| Once logged the superuser has the ability to update the animal catalog. | Y |
| Once logged the superuser has the ability to delete from the animal catalog. | Y |
| Crud functionality is not available to any other user & the links are not accessible by entering | Y |
| User can see test horse added to the catalog | Y |
I used chrome developer tools, Techsini & ami throughout all development of the site to ensure that it was responding to all devices down to 280px - 360px width
I tested the site responsiveness on my iphone/ ipad and my family/ friends android mobile devices to ensure the site was rendering and functional across a range of devices.
| Expected Results | Pass y/n |
|---|---|
| Admin User can log in to django auth admin | Y |
| Admin User can create a service post | Y |
| Admin User can delete a service post | Y |
| Admin User can edit a service post | Y |
| Admin User can approve a review | Y |
| Admin User can create/update/delete users | Y |
| Admin User can view the welfare concern submissions | Y |
| Admin User can see order payments in DB & Stripe | Y |
| Admin User can see static files in Aws Bucket and upload | Y |
- Database connection to Heroku failed - This was resolved my re-running migrations.
- Order Grand Total was not updating - Fixed calculation issue in checkout models.
- Ordinary users could access crud links by entering the urls, fixed by adding defensive design in the views and user authentications requirements.
- Webhooks initially were failing and order confirmation emails were not being sent - refactored the webhooks py & updated the stripe webhook links and now working.
- Index page redirect was not working when logging out as a user - fixed this by updaing the url redirect in settings.
I reviewed all content on the site for:
- Grammar and spelling mistakes.
- Calls to action are clear and contain correct information.
- Verified all text/ headings are displaying correctly.
- I ran all the Python Code through PEP8
- I ran HTML through HTML Validator
- I ran the CSS through Jigsaw
- I also ran all code through code beautifier
Lighthouse was used to test Performance, Best Practices, Accessibility and SEO on Desktop.
The accesibility needs to be improved, but this was out of scope for this project.
- Go to the Code Institute Gitpod Full Template Template
- Click on Use This Template
- Once the template is available in your repository click on Gitpod
- When the image for the template and the Gitpod are ready open a new - terminal to start a new Django App
- Install Django and gunicorn: pip3 install django gunicorn
- Install supporting database libraries dj_database_url and psycopg2 library: - pip3 install dj_database_url psycopg2
- Create file for requirements: in the terminal window type pip freeze --local > requirements.txt
- Create project: in the terminal window type django-admin startproject your_project_name
- Create app: in the terminal window type python3 manage.py startapp your_app_name
- Add app to the list of installed apps in settings.py file: you_app_name
- Migrate changes: in the terminal window type python3 manage.py migrate
- Run the server to test if the app is installed, in the terminal "The install worked successfully! Congratulations!"
- Log in to Heroku or create an account
- On the main page click the button labelled New in the top right corner and - from the drop-down menu select Create New App
- You must enter a unique app name
- Next select your region
- Click on the Create App button
- Click in resources and select Heroku Postgres database
- Click Reveal Config Vars and add:
- A new record with SECRET_KEY
- A new record with the AWS_ACCESS_KEY_ID
- A new record with the AWS_SECRET_ACCESS_KEY
- A new record with the EMAIL_HOST_PASS
- A new record with the EMAIL_HOST_USER
- A new record with the STRIPE_PUBLIC_KEY
- A new record with the STRIPE_SECRET_KEY
- A new record with the STRIPE_WH_SECRET
- A new record with the DISABLE_COLLECTSTATIC = 1
- The next page is the project’s Deploy Tab. Click on the Settings Tab and scroll down to Config Vars
- Next, scroll down to the Buildpack section click Add Buildpack select python and click Save Changes
- Scroll to the top of the page and choose the Deploy tab
- Select Github as the deployment method
- Confirm you want to connect to GitHub
- Search for the repository name and click the connect button
- Scroll to the bottom of the deploy page and select the preferred deployment type
- Click Enable Automatic Deploys for automatic deployment when you push updates to Github
- Create a Procfile "web: gunicorn your_project_name.wsgi"
- When development is complete change the debug setting to: DEBUG = False in settings.py
- In Heroku settings config vars delete the record for DISABLE_COLLECTSTATIC
- In Heroku settings config vars set the record for USE_AWS to True
Fork this project by following the steps:
- Open GitHub
- Find the "Fork" button at the top right of the page
- Once you click the button the fork will be in your repository
Clone this project by following the steps:
- Open GitHub
- You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL
- Once you click the button the fork will be in your repository
- Open a new terminal
- Change the current working directory to the location that you want the cloned directory
- Type "git clone" and paste the URL copied in step 3
- Press "Enter" and the project is cloned
Python Code inspired and adapted from the following tutorials and sources:
Boiler Plate code taken and adapted from:
-
Code Institute - I think therefore I Blog
-
Code Institute - Boutique Ado
Other Sources:
-
https://www.sololearn.com/Discuss/1582033/how-to-check-if-input-is-empty-in-python
-
https://dev.to/earthcomfy/getting-started-custom-user-model-5hc
-
https://www.geeksforgeeks.org/django-crud-create-retrieve-update-delete-function-based-views/
-
https://www.geeksforgeeks.org/e-commerce-website-using-django/
All content was written by the project owner. With the exception of some of the blog post details. I took some content from Here
- I used the Markdown cheat sheet and the love running template to help put together my readme.
Special thanks to my mentor Rohit, my colleagues at Code Institute, and Kasia Bogucka
The live link can be found Here