The Honey pot is a site for people passionate about high quality, natural products, who want to purchase environmentally freindly, organic and locally produced goods. I anticipate most people coming to the site for honey, with other interesting products available that link in to their interest in bees and the environment.

The User has the ability to create, edit and delete their own reviews on products as well as find out what is happening on the apiary with the bees via blogs. The Superuser is the only user that has full create update delete abilities with the products and blogs.

• [email protected]
• Username = testadmin
• Password = letmein12345

• Easy to navigate site that allows straightforward purchase of products
• Able to login to view and manage their profile and previous orders.
• Read the blog to keep up to date with what the bees are doing

• Easy to navigate.
• Able to login.
• View their product list.
• Create new products.
• View the produts.
• Update the products.
• Delete products.
• Create, update & delete their blog posts to create customer engagement with the company to help drive repeat purchase

• Selling advertising space to businesses with bee related products.
• Stock more products and training courses on beekeeping.

• Natural, locally produced bee products
• Information on Honey bees and honey.
• Ability to learn about where there honey comes from.

• Other websites are too cluttered and hard to navigate.
• The user is able to create a login.
• The user can see there profile.
• The user can see their past order history.
• The site owner/admin can create, update and delete products.
• The site provides information and insight into the manufacture of products as well as selling them

• Providing clear artwork and details of each product.

• Products to purchase through an ecommerse system
• Ability for user to leave reviews on products
• A blog for superuser to add things about how the bees are getting on.
• Administration panel so superusers can add, edit, and delete products.
• Profile page where user can see their order history.
• All pages have the same navigation bar with logo to the left that onclick, takes you home from any page. To the right are 3 call to action buttons - home, blog and if not logged in a login button, if logged in, the users name as a dropdown with accesss to profile and logout. If superuser, there is also an admin button. To the right of the dropdown there is the shopping basket. The icon changes depending on if any items are placed in the shopping cart. There is also a footer with slogan, copyright and social media icons.

The Home page consists of a navigation bar across the top with logo on the left and call to action buttons on the right, the hero image and some text about the apairy and an image of the beekeeper. Below that are cards with the poducts avilabale to purchase. In the footer there is the slogan to the left, copyright in the middle and social media icons to the right.

Same navigation as before, product image to the left with title, description, price, quantity selector and 3 call to action buttons add to cart back and if any items are in the cart a cart button for ease of access to the cart Below is a "what our customers say" header and a create review call to action button. Below that all the reviews for that particulr product are displayed. A button will appear to edit, delete if the logged in user created the review.

Same navigation as before, with image to the left, product name, item price, quantity selector, 2 buttons update and remove and subtotal. Below to the right sub total, grand total, 2 call to action buttons keep browsing and secure checkout. Keep browsing will return the user to the home page, secure checkout takes the user to the checkout.

Same navigation as before, with customer detail form to the left, with stripe payment modual at the bottom with 2 call to action buttons, Adjust cart returns the user to the cart and complete order submits the form and payment.

Same navigation as before, when the order is complete a page saying thank you for your order is displayed with the order summery and to the bottom a link to the beekeepers blog.

Same navigation as before, title header across the top centre with a call to action button below to create blogs which is only available to the superuser. Below are the blog posts with image at the top, title below, then amount of views, with 2 call to action buttons whicch are read more and, if you are the super user, delete.

Same navigation as before, Image left, title of the blog to the right, number of views below and 2 call to action buttons which are back to blog and, if superuser, edit blog button, with the blog contents below that.

Same navigation as before, blog post title across the top, with the form below that. 3 call to action buttons, one for adding an image, the second to save and the third is back which redirects to the blogposts page.

Same navigation as before, with a form to add address details with an update call to action button below. To the right is order history where the user can click on the order number to see that previous order.

Same navigation as before, when the order is clicked from the profile page, a page saying "order history" is displayed with the order summery and to the bottom a link to the beekeepers blog.

Product admin is only available to the superuser. Same navigation as before, with a create product button at the top center with a "to bottom" button next to it. Each prodct also has 2 buttons - update and delete.

These features may be included in future releases of this application.

• In future releases, put a limit on how many reviews a single user can put on a particular product.
• Access so admin can moderate reviews with ability to delete them from the admin panel.
• User blogs to share stories or ask for advice on keeping bees.
• The ability to decide whether you want to actually delete a product after pressing the delete button.

HTML5, CSS3, Bootstrap, Javascript, Python3, Gitpod, Sublime text, Balsamiq Mockup 3, Adobe Photoshop, Heroku, Postgres, Stripe and Django

• Desktop
• Desktop
• Desktop
• Desktop
• Desktop
• Desktop

• Mobile
• Mobile
• Tablet
• Tablet
• Tablet
• Tablet

• The main site logo used a google font 'Pacifico' I felt the shape and cursiveness worked well with how I had envisioned the logo. I wanted something fun and easy to read. The flowing style reminded me of the way a bee flies so ties into the products well.
• Over all the main font used was standard sans-serif. I felt the standard font felt at home and was very legible.

• Yellow: #F2B705
• light Orange #f29F05
• Burnt Orange #D96704
• Dark Orange #BF3604

• This colour selection matches the products on offer as well as the bees themsleves to fit with the overall theme of the site.

• Desktop
• Desktop
• Desktop
• Desktop
• Desktop
• Desktop
• Mobile
• Mobile
• Mobile
• Tablet
• Tablet
• Tablet

• schema

The Honey Pot database schema displays that all users start with allauth authentication, linked to the user profiles with a one to one key and from there linked to the orders with a foreignkey to allow many orders to one user. The line items are linked to the orders with a foreignkey also allowing many line items to single orders. Products are also linkked in the same way. The user profile is also linked to the reviews as a foreignkey so the user can leave many reviews.

A main concern I had during development, was that when a user deletes a post or a product there is no interaction asking them do they really want to delete that. In Future releases of the application I will incoporate this feature.

For this version of the application, I have a restriction so that only the superusers can create products/blog, in future versions I will allow staff to do the same.

In future releases I would incorpoate a way that users can only leave one review per product, this will stop users from spamming the reviews section.

To help prevent malicious reviews, I have made it so that a user must create a profile before they can leave a review on a product.

Please click here for manual testing page Testing

Tested on four Browsers

• Chrome, No Errors works as intended.
• Opera, No Errors works as intended.
• Firefox, The firefox browser struggled with css with pointer hover stuggling on the landing page. Some tables also struggle with positioning.
• Edge, The Edge browser did not like a lot of the css and the pointer hover caused strange movement in the user interface. Some forms and tables do not render in the correct places, however the loading time was fast and smooth.

• On the crispy forms image input I have yet to find a way to style the call to action buttons for uploading images. In the next release I will have styled these buttons.
• The sign up form atomatically auto focuses on user name instead of email.
• The product admin page on smaller screens is not quite as constrained as I would like. However it does not affect the usability of the page just the aesthetics.
• Compatibilty is poor on 2 of the mainstream browers so css fixes will be made in future releases of the application.

Log into GitHub. Then clone this project from GitHub:

Follow this link to the Project's GitHub repository https://github.com/jonathanw82/the-honey-pot Under the repository name, click "Clone or download". Select clone with HTTPs, copy the clone URL for the repository.

In your local IDE open Git Bash Terminal. Change the current working directory to the location where you want the cloned directory to be made. Type git clone, and then paste the URL you copied earlier. (git clone "https://github.com/jonathanw82/the-honey-pot") Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here.

If you would like to take a copy of this repository in its current state, this can be done by forking.

Follow this link to the Project's GitHub repository https://github.com/jonathanw82/the-honey-pot

From the menu items near the top of the page, select Fork. On doing so the repository will be added to your own gitHub account. From there you can follow the deployment details as stated below. You will also be able to make any changes you require that will not affect the original master from the original repository.

To deploy from Heroku, first sign up. To do this go to https://www.heroku.com/ and click the sign up button on the right hand side and fill out the form to create a new account. Then select Python as the development language.

At this point you will be sent a confirmation email, once the link in the email has been clicked you will be prompted to input a password and the account will be set up.

Once all setup and logged in, click on the create new app button, then give your project a name using hyphens instead of spaces. The name has to be unique as Heroku has thousands of apps and they cannot have the same name, select your region and select create app.

You will then be presented with a dashboard with listings of command lines for use in a bash command line.

From your workspace of choice, open the command line and install Heroku depending on workspace, type (pip3 install heroku) once installed, type (heroku login -I) then enter your email and password you set Heroku up with. It will then state you are logged in.

Then back on the heroku website, select the resources tab go down to add-ons and in the search box, search postgres, then select Heroku Postgres this will eventually be where your databse will be kept. After selecting, a box will popup, select Hobby Dev-Free plan and click provision.

At this point we will need to install 2 pices of software in our workspace they will be dj_database_url, and psycopg2.

From your workspace of choice open the command line and install type pip3 install dj_database_url and pip3 install psycopg2-binary You will need to freeze the requirements type pip3 freeze > requirements.txt

And that'll make sure Heroku installs all our apps requirements when we deploy it.

To set up the database for deployment we need to change some settings in setting.py In the settings.py file under the the_honey_pot dropdown in the file window from your workspace, select settings.py near the top we now need to type import dj_databse_url

Scroll down to the datase settings, comment out the default settings and type DATABASES = {'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) at this point we will need to make migrations to create the postgres database. To do this from the command prompt type python3 manage.py migrate our databse is now set up.

We will now need to push our files to Heroku to be deployed or our live version.

To do this in Heroku go to the app you created earlier then select deploy. Under app information you will see Heroku git URL, copy the url, in the bash command line in the work space of choice type (heroku git:remote –a <app_name>) at this point you need to push all your data up to Heroku.

To do this from your git bash command line type (git add .) then (git commit –m “deploy to heroku”) then (git push ) this will take a few minutes to push all the data to Heroku.

We then need to setup a web process to do this. At the command prompt type (heroku ps:scale web=1) after this our web process will be running. We will now need to set up some config Vars in heroku.

Go back to heroku go to settings click reveal config vars, there will be a few things to add here, first we will setup the email:

• In the Key box enter EMAIL_HOST_USER the value [email protected]
• In the Key box enter EMAIL_HOST_PASS the value key can be obtained from your developer

Then To setup Stripe for payments

• In the Key box enter SECRET_KEY the value key can be obtained from your developer
• In the Key box STRIPE_PUBLIC_KEY the value key can be obtained from your developer
• In the Key box STRIPE_SECRET_KEY the value key can be obtained from your developer
• In the Key box STRIPE_WH_KEY the value key can be obtained from your developer

Then Amazon Web Service

• In the Key box AWS_ACCESS_KEY_ID the value key can be obtained from the info about Amazon web service below
• In the Key box AWS_SECRET_ACCESS_KEY the value key can be obtained from the info about Amazon web service below
• In the Key box AWS_STORAGE_BUCKET_NAME the value key can be obtained from the info about Amazon web service below

Then the Database

• In the key box DATABASE_URL the value key will already be populated because of the steps we took above.

Once all the steps have been taken, click the more button on the top right hand side of page and select restart all dynos. The application will now be deployed. If a message pops up stating there may be some down time until the restart has finished click OK. Under the settings tab in Heroku, scroll down to domains and your link will be displayed there. It can be used to access the live version of the application.

Deployment: The site will be deployed by https://www.heroku.com/

First we need to sign up to AWS (Amazon Web Service) to host all our images, when you first sign up this can take a couple of hours to get working.

When signed up, login and in the dashboard search s3 then click create bucket. Give the bucket a name, in this case (the-honey-pot),

Select your region, then uncheck the block all public access as the bucket needs to be public and then after click acknowledge.

Then create bucket click on the name of the bucket you have made, click permissions, then bucket policy, at the bottom of the page click policy generator but right click the mouse to open it in another tab as not to go away from the page you are currently on.

Go to the next tab,

In the security type of policy, select s3 bucket Policy, effect leave on allow, In the principle box type a star symbol *, In action select get object.

Just under that select box you will need to paste in the amazon resource name. Next, select the previous tab without closing the one you are on and copy the amazon resource name details down that are at the end of the bucket policy editor arn arn:aws:s3:::the-honey-pot make sure there are no full stops or quotes, go back to the policy generator tab and past it in to the amazon resource name box and put a forward slash and a star at the end arn:aws:s3:::the-honey-pot /* Click add statement then the generate polices button, a window will pop up, with some lines of code, copy all the code from the box, then past it in on the bucket policy editor below where you found the amazon resource name details. Click save.

Then click the over view tab, then create folder, create a folder and call it media.

Leave all the settings below as none and click save.

At this point it is advised to upload a sample image into that folder, click on the folder and press the upload button, select an image and upload. Once uploaded click on the image and a box will appear to the right. In the section overview, find object url click the link. If the image appears the setup is correct.

At this point at the top right of the page there is a bell symbol. To the right of it is a dropdown menu, click and select my security credentials. Once on that page click access keys, then click the button create new access key. At this point a box will pop up with 2 keys, ID and secret key. Take note of both. I would advise clicking the download button and saving an excel file containing the keys.

It is of upmost importance NOBODY else sees these keys they are a high security key, failure to do so could compromise security of your website could leave you with extremely large bills from Amazon. For where to place these secure keys, please refer to deploy with Heroku above.

I would like to thank my tutors Xavier Astor, Kevin Loughrey, Chirs Zielinski and my mentor Brian Macharia for their ongoing support and guidance thoughout the develpoment process of this application.

The cart, checkout and stripe tutorials from boutique ado, Code Institute.

The Photos used in this site were obtained from

favicon.ioc http://clipart-library.com/clipart/8TG9rrqTa.htm Honey Pot Images #1191196

Moving letters https://tobiasahlin.com/moving-letters/#2

product images of jars on a wedding table. http://www.cassidycarsonphotography.com/

candle and flower Image by Lolame from Pixabay

owl candles vimar 211821178

Adobestock lavender soap 343003179 aprilante

wax polish Amazon

Apiary Okssi 163828907

Dmitri Leiciu PXhere Repository Image

BeeKeeper images in the blog and on the landing page Myself - Jon Wheway