The Mystery Shack is an e-commerce site which allows customers to purchase wacky online goods, It was originally going to be an agristore for the farming industry but because farmers have no money the owners decided to concentrate on the weird and wonderful, Unfortunately there are not many products for sale at the moment but hopefully enough to give customers the idea of what the future site can become. Customers can browse the products on the site, the site has all the functions of an e-commerce site with the customer once they are registered be able to add products to their cart and proceed to a checkout area where they can amend their order or they can proceed to a payment area where they can enter delivery and payment options using the stripe api

This project has been deployed to heroku and can be viewed here. The projects repository can be viewed here.

The idea for the user experience is to have a site that is easy to navigate around, I did not achieve that goal with this design, the lack of a wireframe and an idea of what the site was going to cater for at the start of the project hindered things later. My goals as a user were to have a site that is easy on the eye and easy to navigate around where all the important information is prominent on the site and that there would be options to get more information if desired, I wanted users to be able to view the products and to be able to purchase them with little fuss. As a user of the site my plan was to have an option for the customer to updaate all their details but at the moment they can only change their password.

As an e-commerce customer I believe that the site delivers on the core requirements of such a site where the user can:

• Register an account
• Log in or log out of their registered account
• Search for products
• Reset their password
• Add products to a cart
• Adjust their orders
• Pay for their items securely

The home page has a landing image and a basic navigation bar and footer, there is a message for any new user to the site, the navigation bar has all the links required to navigate around the site, any user that does not log in can only view the products, they have the option of registering from the navigation bar

Once a customer logs in they have the option of puchasing any of the products from the products page, there is a search function located in the navbar to help customers look for items, when a customer adds items to the basket there is a counter on the cart which gives them a visual clue as to the amount of products that they have added, the customer clicks on the cart to access the cart page where they can amend each item in their shopping cart before moving onto the checkout page, there is a list at the top of the page again confirming the products for purchase before the customer enters delivery and payment details, Customers can also request a new password through the login page, an e mail is sent to their address which they use to reset their password, According to all the youtube tutorials and the methods shown in the code institute module this should have been easy to implement but for some reason it took me a lot of time to get right. If the SMPTA authentication failure appears you may have to go to Captcha and click on continue to enable the authentication

As an admin user you have the option of adding, deleting and updating products. Unfortunately this is not fully functional as I have yet to figure out how to add an image to the new created product from the dashboard

To access the site as a superuser use; username:admin, password:o1234567

This site is far from finished, there are a lot of features on the site that could be done a lot better given more time and more experience.

I started a rare items page that would only appear if you were a registered or logged in customer, my idea was that it would be a reward for registering to the website, however when I tried to put the rare item into the cart it kept getting over ridden by the producks id key, I would like to fix this when I have more time. I removed the connection to the app until I can figure out how to implement it correctly

More detailed information about the products such as the number in stock and a way of recording items sold in total and maybe over a certain period of time. I would also include an individual counter on each product to show the amount of each item a person has in their cart.

I did not get a chance to finish the profile page of the logged in user, I would like it to show customers address and purchasing history. Also some kind of a loyalty system that would reduce the cost of products based on the amount already purchased by a customer As a superuser you are able to adjust products from the dashboard but I could not get it to render an image to the new product from the dashboard, this is a future feature that I would want to add, I would also like the superuser to be able to do more from the dashboard such as updating users from the dashboard. I must also add a search message when a search item does not match the search parameters, also adding some sort of filtered search options when the list of products gets larger

I would like to add the ability where the customer could adjust their own personal information, an option to leave a comment or rating on purchased products could also be added, also the ability for customers to create a wishlist where they could save items for a later purchase

• HTML
• CSS
• Bootstrap
• Python
• Django
• Javascript
• Heroku
• AWS

The site was tested on mobile devices manufactured by huawei,apple and samsung.it was tested on laptop devices and desktops of varying sizes and operating systems such as chrome,firefox, and edge, only slight styling changes were observed, during a password reset using the phone the page where you reset the password did not render correctly, there appeared to be a break in te side panel to the left
The following tests were conducted on the site to check functionality.

• All navbar links on all the differant pages were checked and all of them are linked correctly.
• The footer links were checked and all of them work and open in a seperate window.
• All functional buttons are working on site
• All input fields were checked and all inputs are being recorded
• All pages when resized are responsive and are easy to navigate.
• All the forms were checked for required input fields

I used html validators and css validators to check for errors in the code, I corrected as many errors as i could, A pep8 validator was used to check the python code and most issues were resolved, I left the lines that were too long as I did not want to take the chance of breaking working code

The forms for login and registering were tested to confirm it displays a message to the user asking to enter the required information and preventing the form submission in case a field was left empty. The social media links were tested individually to make sure it does redirect the user to the relevant content and that they opened in seperate tags

Manual testing was done on all the functionality of the site. The products were successfully loaded and stored in the database, same with the profile of the user. Products were added to the cart and moved to the checkout successfully and the Stripe payment function has been verified with a test card and all transactions show up on the Stripe dashboard.

The password reset functionality cracked me up for days, I tried three differant ways of implementing it and each one generated all the same problems, I traced the main problem back to my user registration form not recording the users email in the database for some reason, I reverted back to a django class for the creation of a new user and that seemed to fix that issue, I then had a problem with the SMTPA authentication even though I adjusted my google settings it would still given me that failure, Many many hours later and changes to my code resulted in coming across this Captcha This when implemented allowed the site to send the e-mail and I was able to then confirm that the password reset function worked.

Automated testing was done by Travis-CL, there were a lot of errors during the build but they all seemed to get ironed out as I went over the code

While tidying up code I seem to have effected the way the products are displayed when you are logged in they appear stretched, will fix if I have time, If you try to add an item to the cart without entering a number you will get a value error, I must fix this also

This site was deployed to Heroku using the command line interface
The steps taken to deploy the app were:

• 1. I created a Heroku account
• 2. Click on the new button to create the app name I used to run my project.
• 3. Choose the region that the server will be based from.
• 4. Log into Heroku from the CLI, I needed to provide confirmation using a url.
• 5. I insured that the requirements.txt file was installed along with a procfile and that
all environmental variables were safely hidden in a git ignore file.
• 6. I added my files and then commited them to the github repository.
• 7. From the Heroku home page that has my app that was created earlier I copied a line of code under the Create a new directory that has my application name and inserted it into the CLI to create a link between my code and Heroku.
• 8. Once that snippet of code runs I typed: git push heroku master to push my
project to the Heroku server to be run.
• 9. Type heroku ps:scale web=1 to start the app, confirmation is when it is scaling dynos
• 10. I went back to Heroku, go to settings, go to reveal config vars, input my IP and PORT
addresses and also add in any variables that are kept in the gitignore file.
• 11. When all configs are input I clicked on open app and my project was being hosted by Heroku.
• 12. My initial deployment was implemented using the ClI, further deployments were initialised from the heroku dashboard.
• 13. To deploy from heroku I added,commited and pushed any changes of code to github.
• 14. I went to the deploy section in heroku which is already referanced to the app name.
• 15. I chose connect to github in the deployment method of the deploy page.
• 16. I input my github login details and the app i wished to connect with
• 17. When i received notification of the connection i chose manual deploy of the app.
• 18. The most up to date version of the app is then hosted on Heroku

To view the app after initial setup in Heroku

• Login to heroku
• Choose app name.
• Choose Deploy header in dashboard.
• Go to bottom of page and click on deploy branch

In order to clone the github repository:

1. On GitHub, navigate to the main page of the repository.
2. Under the repository name, click Clone or download.
3. To clone the repository using HTTPS, under "Clone with HTTPS", click . To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click Use SSH, then click .
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone https://github.com/johnj974/Store
7. Press Enter. Your local clone will be created.
8. Run pip install -r requirements.txt to add the project requirements
9. Start the server with ./manage.py runserver

All of the content is written by me

All pictures were taken from Pexels.com

The project was built using the code institute django module as the main go to referance when I got stuck,the majority of the functionality comes from the django module tutorial. I also used various youtube channels such as Traversy media, Dennis Ivy, Corey Schafer and Freecodecamp for ideas along with all the various stack overflow threads which helped to me to identify and fix a lot of the errors that I encountered.