Ever had the moment where you have been invited to an event and find out your exquisite attire is missing that vital component that compliments your arrival? Shoes! Look no further. Shoes that are comfortable and well designed and allow you to confidently step out in style. The hangout store is an ecommerce website designed ideally for the busy executive or anyone who is short of time and knows exactly what they are looking for.

Split into two adult departments, Men and Women, there are no cumbersome filters to navigate through thus allowing the shopper to concentrate on and filter directly to the product they are looking for. Login onto the website is easy and stress free if the user does not want to fill out the login form they can access the site through their social media.

User Story

The user story is analogous to going to a high street and enterin a shop and taking you through the chronological motions of the shopper and the management. What are the shoppers intentions and how does the owner/management accomodate this?

The project concept transformed from being a sports store or sports club to a shoes store as time progressed. The title of the project was Sport Light and the link is below:

https://github.com/isiko1/sport_light

The wireframes are in a pdf folder in the project directory and depict the project concept which was in motion until it came to a halt as it was becoming difficult to obtain the material and products.

• Home Page
• My Profile
• Login
• Registration
• Logout
• Product Management(Maintenance)
• Shop
• Shopping Bag
• Checkout

Home Page On arriving at the site the user is presented with a bright page with capturing slogans, navigation bar, search bar and a shop now button in the hope of enticing the user to check out the store. The user can go directly to the store and can choose to log in and register at any time by clicking on the My Account of he/she will be presented with dropdown options. The user can return to the home page irrespective of where they are on the iste by just clicking on the title Hangout.

My Profile: The user profile is only available once the user has logged in and registered on the app. Once registered and entering the My Profile, the user is presented with their details at the top, delivery details directly below and and a schedule of their orders directly adjacent. The user also has the option to attach a profile picture to their information at the bottom of the page.

Login: As time is of the essence, which is a main concept and by-product of this app, the user is left to choose at which stage they would like to login and therefore are left to peruse the website at their leisure. However, they are reminded to login at the point of purchase. This ensures accurate customer and payment details. The option to log in through social media is also available to the user.

Registration: The user has the option to register at all times by selecting the My Account icon on the right of the screen next to the shopping bag.

Logout: Should the visit be a fleeting one, or fruitful, the can log out by selecting the dropdown menu under My Account. On selection the user is presented with a sign out page seeking confirmation of the sign out. Should the user choose cancel then the user is directed back to the home page. A message is displayed confiming the user's sign out if the continue with their original decision after which they are also directed to the home page. One would instictively and rightfully ask as to the distinction of the actions if the end result is the same page? If the user has logged out, they will only be presented with two options in the dropdown menu at My Account.

Shop The shop is accessed by clicking the * Shop Now * button or if the user already has a particular product in mind can search for the item by using the search facility at the top of the page or by clicking on the navigation bar Product or Department and selecting from the dropdown choices. On arrival the user is presented with a display of itemised products that can be selected and added to the shopping bag.

Shopping Bag: Located in the top right corner of the page and accessed by clicking on to the icon. The user has the option of amending or deleting the order on arrival before going to checkout.

Checkout: On arriving at checkout either through clicking on the shopping bag or the shop and messaging process, the user arrives at the checkout page where the user's personal details are collected. There are no delivery costs for all products purchased which is a unique selling point (USP). Payment cannot be completed until all the mandatory fields are completed. The user is also reminded to log in if they have not already done so.

This project design is inspired and based on ideas from the Django module Mini Project of which 90% of the code has been taken from and some adaptions made to some of that code to accomodate the desired functionality.

Additional features I would implement are:

• Customer Service Live Chat
• Company information and Links to Social Media
• Carousel cards advertising products when the user is inactive

• Additional alternative choice options of Social Media login

• Bootstrap - Was used to aid visual lay out and structure

• Django - To expedite project development

• CSS - To aid visual lay out and style

• Fontawsome - Used for the icons

• HTML - To aid structure and design

• Javascript - To automate some of the functionalities

• Jquery - To expedite the DOM manipulation and handle events

• Python - To aid simplicity and logic to the code

• Postgress - To link up databases

• AWS S3 Amazon Web Service - The site is where the static files for the project are stored.

• Facebook Developers Facebook - The site was used to create an alternative user login option.

• Gitpod [Gitpod] (https://www.gitpod.io/) - Used to create the project

• MiniWebtool MiniWebtool - The site was used to generate a secret key for the project.

• JSON formatter JSON formatter - The application was used as an aid to check and create the fixtures for the Products app.

• YouTube YouTube - The site was used to learn how to add social media login to a project.

Testing was conducted as follows:

HTML was tested using W3 validator [W3C] (https://validator.w3.org/) I wrote the json for the products app in the fixtures folder and put them through the JSON formatter JSON formatter to check. Once completed and checked for accurancy the json was loaded into the project successful. The products are in project correctly. Using Inspect, responsive design revealed on the Iphones 5SE/6/7/8, Moto G4, Galaxy S5 obscures some of the top views below the navbar. This is also noted in the Bug section below.

At each stage of the development, tests were carried out on the effects, views, presentation and functionality of each implementation. When the user carries out an action they should recieve a corresponding confirmation or error message. For example if you login a message is generated to tell you you have done so. If you log out again a corresponding message is generated. Fields with an asterix annotation are compulsory fields, if they are not completed then a message will be generated stating that. Accordingly, if they are not completed in line with the validation assigned to them such as mismatch of passwords or log in user details.

Deployment of the project went through extensive testing due to experiencing many failed builds. Below is copy of the failed attempts.

[email protected]: Build failed Today at 9:34 AM · View build log [email protected] [email protected]: Build failed Today at 9:13 AM · View build log [email protected] [email protected]: Build failed Today at 9:06 AM · View build log [email protected] [email protected]: Build failed Today at 8:45 AM · View build log [email protected] [email protected]: Build failed Today at 2:22 AM · View build log [email protected] [email protected]: Build failed Today at 2:13 AM · View build log

The failures were due to a configuration error in the AWS S3 The error report is in the pdf folder in the project director workspace/hangout/hangout-4 Build_Heroku.pdf

It was fixed in the end as i discovered it was due to the policy not being attached to the Group and also the user had also not been attached policy and the group.

The Checkout, My Profile and Sign UP views seem to be cut off at the top. I have gone into inspect and played with the margin-top where the tops reappeared but after transfering the css to the base.css of the project, there appeared to be no change made to the views.

The project is deployed to Heroku Heroku and Github [Github] (https://github.com/isiko1/hangout).

There are no differences between the deployed version and the development version.

My Course Mentor Code Institute Module 11 - Full Stack Frameworks with Django Facebook Developers Code Institute Student Care
YouTube

The majority of the code around 90%, used in the project was taken from the Django Mini project and modifications was made accordingly to some of that code to accomodate the functionality of this project. This was mainly because the ecommerce concept is identical and ubiquitous amongst the ecommerce applications.

The Home page image was obtained from pixaby The photos used in this site have been otained from Newchic

Inspiration for this project was from the Django mini project. The compilation of the products and creation of the json files was inspired by my course mentor after having had the iinitial mentor session.