This is ecommerce store that sells shoes for women. Allows users to check out products clasiffied into categories, select a specific size of the product and securily checkout through Stripe payment platform.

Users can create their account, and subscribe to the store's newsletter. Users can make an order without being registered. Users can easily update their personal information and delivery information. The site provides all the information needed about delivery, returns and refounds as well as a FAQs section to solve common questions.

Users can easily contact customer support.

• Live store Basty Shops

• Target audience
• User Stories
• Design goals
• Design choises
• Font
• Color squeme
• Wireframes
• Flow chart
• Web Strategy

• SingUp
• Social Authentication
• Update profile information
• Update site's access information
• Orders history
• Update user's delivery address
• Search products by name or category
• Sort products by price, rating or alphabetically
• Show total in the bag
• Modify product quantity on the bag page
• Checkout
• Payment
• Confirmation email
• Contact customer support by email
• Activity info messages
• Management
  • Add product
  • Edit product
  • Delete product

• Manual testing
• Light house
• Validators

• Lnguages
• Libraries
• Frameworks

• Fixed bugs
• Unfixed bugs

• Content
• Acknowledgements
• Aditiona information

The site goals is to buy as many products as posible whether if it is for personal use or for making a present. The site is potentianly designed to lure in women from 16 to 40 years old who are looking to buy a new pair of shoes or they potentially will buy it in future. Anyone over 16 can maake a purchase. The site offers a wide range of different type of shoes in order to widen potential customers at any time along the year.

• Can follow Iteration boards here

• Minimalistic design

• Well structured information

• Easy readability

• Intuitive straightforward navigation

• Straightfroward forms

• Resposive for all screen sizes

  • Desktop

  

  • Tablet

  

  • Mobile

  

• Roboto san-serif

• Body background color: #ffff;
• Main theme red color: rgb(122, 13, 13);
• Backgroun buttons and anchor color: #FF6542;
• Subscription container background; #C8BFC7;
• Other yellow texts: #F3FFC6;

• For wireframing i used Balsamiq wireframe which is not a free tool anymore.

• Home page Desktop wireframe

• Home page Mobile wireframe

• Products page Desktop & Mobile wireframe

• Product detail page Desktop & Mobile wireframe

• For this i used an online app Lucidchart which is not a free app.

• Database structure

• Potential customers

  • Women from 16 to 40 years old

• Potential platforms:

  • Instagram
  • Facebook
  • Youtube

• Potential customers might need:

  • Boots
  • Sneakers
  • Shoes
  • Free shipping
  • Easy exchange
  • customer support
  • Live support
  • Reviews
  • Images
  • Deals
  • Discounts

• Web Marketing will run sales, and offer deals and discounts and will use images and keywords to make an emotial response in order to potential customers to click and visit the store

• Potential customers might want to hear about this offers through SMM (Social Media Marketing)

• The company will have a 3000€ budget for SMM during the very first year

• Marketing will be focused on SMM, both organic and Paid along with Email Marketing

  • Google adds will be disscused late in year

• SEO:

  • Keaywords research will help to build a valuable content for Google ranking, and to draw attention to potential customers.

  • Keywords research stats at the time:

• Facebook Store page

• SingUp

  • Users can register in the site by filling up a form

• Social Authentication

  • Users can singup using their social accounts in order to speed up and ease site's registration or login, as well as to improve their security

  

• Update profile information

  • Registered users can easily update their personal information or delete their account

  

  • Registered users can easily update their access information clicking on the link

  

  • Registered users can easily check their order's history

  

  • Registered users can easily update their delivery address

  

• Search products by name or category

  • Users can easily search products by entering name or key words

    

• Sort products by price or alphabet

  • Users can easily sort products by entering their preference (by rating will be implemented in future)

    

• Show total in the bag

  • Users can see the total of their shopping bag on the bag page

    

• Modify product quantity on the bag page

  • Users can modify the total of a specific item from their shopping bag

    

• Checkout

  • Users can make their order by filling up the checkout page

  • Users can see their order summary

  • Registered users can save the delivery information for future purchases

    

• Payment

  • Users can securely make a payment using theit credir, debit, or american express or any other type of card throught a well trusted payment platform Stripe

    

• Confirmation email

  • Users will receive a confirmation email after making a successful purchase

    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

• Contact customer support y email

  • Users can send an email to customer support by going into "Contact us" page

    

  • User's activity messages

  • Users will be informed after every acction on the site thrught automatic messages

    

• Management

  • Add product

  Store admin will be able to add products from the site so much easily the from the Django admin panel

  

  • Edit product

  Store admin will be able to edit products from the site so much easily the from the Django admin panel

  

  • Delete product

  Store admin will be able to delete products easily from the site

  

• Add products to wish list
• Add reviews and rating to products if needed
• Add customers testimonials
• Paypal payments
• Google payments

Note: Reviews is alredy added into database structure. Wish list is not, however it is implemented in html files with not functionality(due to lack of time).

• Front end testing:

During the development proccess, i used Dev tools for css styling, and used "console.log()" method to check whether if functions are triggered, also used it to check if code gets passed certain lines, or to check if the data passed into functions was the one i needed.

• Back end testing:

i used the "print()" method To check wheter if functions are triggered, whether if the data or data type passed was the right one. It Also was used to check data added into the bag session and bag proccessor.

The site clearly needs some improvements in terms of accebility, performance and best practises

• Desktop Home page

• Mobile Home page

• Products page desktop

• Products page mobile

  

  • Products detail page desktop

  

  • Products detail page mobile

  

• All .py files went through PEP8 validator, only white spaces and long lines shown in test.

• Home page

• W3C CSS validator

  • No error reported

• W3C HTML validator

  • Showing lots of errors when using sintax {{ }} or {% blocks %}

  

• JS Hint

  • JSHint was used to validate js files, only a few semicolons was missing and some variables unused.

• Languages

  • Languages used according to Github reports.

• Libraries

  • Boostrap
  • JQuery
  • Fontawsome
  • Google fonts

• Frameworks

  • Django
  • All packages installed can be found in requirements.txt

• Unfixed bug

  • On the bag page, for every item added the layout changes by adding rows in a scalate way Every new row to be pushed to the left.

  

• Unfixed bug

  • On the bag page, after adding the first item into the shopping bag, the following items seem to not have the disabel buttons functionality applied. This issue must be related the previous one

  

• Unfixed bug

  • When adding products into shopping bag, the toast showing a success message does not show, however it does when removing items from the shopping bag. The code to me looks fine, it prints the print statements i set, also i do not get any error and the the code when running goes through the next function and everything works fine...

  

• Unfixed bug

  • Error pages 403, 404 adn 500 are not being rendered...i didn't have time to go through it with tuttor assistance.

• Unfixed bug

  • Internal error 500 when subscribing to newsletter, didn't have time to fix this either, i realisez at last minute.

• Fixed bug

  • Error "TypeError:'dic_values' object is not supscritable This occurs when trying to access dic_values object at a specific index(slicing).

  I go this error when trying to acces to images list of every product.

  • Fix: Convert the dict into a list list(my_dict.values())[2:]

• Fixed bug:

  • The increment and decrement buttons on the bag page gave me a really hard time. The buttons would never triggered the js code. I used as in the walk through project the file 'quantity_form_scripts.html' placed into 'products/includes' folder.
  • Fix: I fix this by getting rid of the above file and placeing the js script in the 'quantity_form.html' file down the file inside the postblockjs tag, then then buttons worked!!

• Fixed bug:

  • When deploying into heroku could not build a wheel for backports.zoneinfo It seems that Heroku by default uses Python vrsion 3.10.x and backports.zoneinfo no works properly with that version of Python
  • Fix: Create a runtime.txt in the root directory and write your Python version, in my case python-3.8.11. Commit and push changes.

The project was deployed to Heroku using the below procedure:-

• Log in to Heroku or create an account if required.

• Click the button labeled New from the dashboard in the top right corner, just below the header.

• From the drop-down menu select "Create new app".

• Enter a unique app name.

• Once the web portal shows the green tick to confirm the name is original select the relevant region. In my case, I chose Europe as I am in Ireland.

• When happy with your choice of name and that the correct region is selected, click on the "Create app" button.

• Go to tap "Resources" and add a new add-on "Heroku Postgres"

• Copy the database url.

• This will bring you to the project "Deploy" tab. From here, navigate to the settings tab and scroll down to the "Config Vars" section.

• And paste it in value field of "Reveal Config Vars"

• Click the button labelled "Reveal Config Vars" and enter the "keys" and "values"you need, and click the "add" button.

• Scroll down to the buildpacks section of the settings page and click the button labeled " add buildpack," select "Python," and click "Save Changes".

• Scroll back to the top of the settings page, and navigate to the "Deploy" tab.

• From 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 next to the intended repository.

• From the bottom of the deploy page select your preferred deployment type by follow one of the below steps:

• Clicking either "Enable Automatic Deploys" for automatic deployment when you push updates to Github.

• Select the correct branch for deployment from the drop-down menu and click the "Deploy Branch" button for manual deployment.

For the porpouse of developing this proyect i had to look into some youtube tutorials and web sites.

• Databases relationships

  -Video tutorial Entity Database Relationships

• Social Authentication

  -Video tutorial Social Authentication

• Stripe

• All the code to implement Stripe is taken from the walk through Boutiue Ado with Code Institute, i never copied and paste away, i wrote everyting by following my notes or the video lessons when needed.

• Products pictures were taken from different stores, which is why they are differrent sizes and changes the layout in certain card products.

• Home page images were taken from Google images

I want to thank the Code Institute tutor assistance team, which helped me out with some of the day to day code issues. I could have never complete this project without them!

I did not make use of my mentor assistance this time round.