code-institute-submissions / vinbdev-ru_design_julyresubb Goto Github PK

This is a detailed, full stack website implemented with the intention of allowing both profile users and anonymous users of the site to purchase various forms of artwork.

The site has been built with the intention for users to create and build a user profile which will allow them to track their order history and have full ownership and understanding of all purchases. Building this trust is essential for a healthy e-commerce business. The capabilities for anonymous users has also been incorporated into the site in order to encourage a high volume of online sales.

The motivation for this site came from a childhood friend of mine who was always a very skilled artist. His work has gathered and grown over the years as he never pursued a career as an artist before now. Prior to this he worked in the entertainment sector as an editor for TV shows so this project really allowed him to go back to his routes and reignite the passion he has for art.

Purchasing anything online comes with risk involved and when purchasing high valued products, users can be even more skeptical of making a purchase. Especially due to the size of the art piece as well as the materials involved in creating the piece. Therefore the description of each piece includes the material it was made from and the product detail page also has the size and dimensions of each size

Visit Live Site Here

Visit Live Site Here

Ru was born in Dublin city in the early 90's and was given the Irish name Ruadhan Murray but has gone as Ru since he was a small child. After his birth in the Ratunda hospital Ru and his family moved to the remote area of Ratoath in county Meath which had a population of 2,000 at the time and has been a rapid development area ever since with over 10,000 current residents.The area has seen many changes in this time and some of Ru's art depicts this especially with the photography. Ru has always ahd a natuiral passion and drive for art however in previous years he feared that monopolising his interests may turn this into a disinterest and it is due to this that he never pursued a career as an artist.

Ru himself is a very humble person and not the art work shown in this project dates back over 10-15 years so without the site being created the beautiful artwork would have stayed hidden away in a folder under a staircase. This project began as a brief and basic idea in order to build and submit the project on time but it has ignited an interest for further development and I very much look forward to continuously adding on to the project and securing it further for public use.

The site itself was built in full so that anyone from anywhere can purchase the artwork of their choice without having to create an account. This generally will provide the users with less pain points when going through the e-commerce payment process. Instead of getting bogged down with providing information and personal data, they can just choose the billing and delivery address and they will be able to order. The only negative aspect to this is that they will not be able to view their order history should they be return visitors in the future.

The site really encourages active users to create profiles and gather the order history of their purchases. This as mentioned is not a requirement however with the plans to grow this app and business, ideally we will incorporate a favoriting system where users can highlight their favourite pieces as well as build a contact us page which will include a form encouraging vistors to make enquiries about freelance work and potentially free lance art classes!

The long term plan for this would be to continuously add on various features as the apps are used. Including a feedback button at the bottom of the about us page which would essentially highlight information, awards and accolades that Ru has won over his years in industry as well as a short section on his time in the Entertainment industry. this would help build the image of ru as a professional artist and encourage Ru to come and host art partys! Not only would this generate more traffic to the site but it would definitely help Ru's business strategy and growth.

My plans for this application would be to test it with family, friend and team members at work to see if any of them find the app convenient to use but also to see if there is any interest in Ru's art as I believe he can really succeed in this field if he gets some small traction at the start.

The website has been built with a simplistic layout. The intention of this is to drive sales of the artwork as much as possible. The site was built with the intention of both Ru and a site visitor being able to go to the site and for Ru to be able to Create, Read, Update and Delete his artwork off of the site as he may require or to add items to his site for future business growth.This functionality is mirrored for users as well they do not have the ability to make product changes however they can update the profile information as they please which means they can order proactively with their delivery details ready to go.

When a new user goes to this site they can view the artwork but do not have any permissions to edit/ delete or create any products. They also limited access to the site which encourages them to create a profile and track their orders.

An existing user is someone who has an account and is a returning customer. They have been to the site and know the navigation is simplistic in function and layout and if they already have an idea of what they want they can simple use the search bar for a direct link to the product of interest or can use the various filter options available.

An Admin has the most privileges as they have admin access to everything. This is because the app is designed for anonymous and return visitors and encouraged to increase the volume of sales. The admin however in this case is actually Ru, being an artist the creative passion can take over and therefore I have decided to give him the ability to add products to his site as he pleases. This very much fits in with his plans for developing is artwork further and potentially using this site to publish and sell his freelance work. The Admin has the ability to create , read, update and delete the products on the site. This too is synced with MongoDB to enable transparent collection of data as well as allowing the team to grow and be dynamic in size.

• To increase the volume of online sales.
• To allow every user the right and ability to purchase any products of their choice.
• to encourage return visitors and customer who can make multiple purchases.
• To grow the demand and interest in freelance art for Ru.
• To showcase the art that ru has created over the years. Many artists will have folders of great work that would not see the light of day without projects like this.

• To provide a simple yet easy flowing website capable for users of varying tech abilities.
• To easily purchase items for themselves/ gifts for others.
• To encourage other artists to reflect on their own work and to celebrate art for what it is.
• To provide the user with helpful insights in terms of product descriptions and sizes.
• To provide the user with everything they need to make an educated purchasing decision.

• Any person with an interest in art
• Any person who wants to support Irish businesses from anywhere in the world.
• Any person who wants inspiration for their own career goals or artistic design intentions.
• Any company looking to freshen up the office.
• Anyone looking to refurbish/ remodel their home.

My goal for this design was to allow ease of access to information as well as allowing all the admin to change and update product information which means they do not need to remember every product off the top of their head and can refer back to previous work easily too. The strategy for this is to allow a central point for Ru to host his art work and to collate a customer base and following.

For users of the site, I wanted to allow easy navigation across site structure depending on user permissions. This is to enable new users on the site to easily make their way to the register page or login page if they are already users. For non registered users the site is limited in functionality and page views to simplify the experience and focus more on selling the art work.

The informational design will be very simple and easy to follow, as this app will have both experienced and non experienced users, I want to appeal to the general audience. The homepage will have a navbar that is consistent across the site on every page as well as a hero image and central button to go to the products page and start shopping. This will provide insight in terms of site navigation but also encourage users to get in to the product details of each piece.

The navigation bar allows easy access to any page (once logged in) as well as clear button markers for the non-technical visitors to the site. Each page has a clear descriptive title as I wanted any user to have a clear and easy way to either sign up to become a member or to get the information they need to go to an event without having to sign up in case they are not tech savvy.This feature can be seen on many websites and therefore re enforces the functionality of the site.

My aim for this design was to use blue, black and white as the primary contrasting colors to indicate levels of importance to the various sections (navigation bar/ dashboard section/ login/ logout/ register/ existing users and new users. This is to give a professional, sleek yet practical feel to the site where users are not being overwhelmed with information, they only see what is relevant.

Here are my wireframes for multiple pages of the Ru Design.

• Initially there is a consistent navigation bar across all pages allowing access to Home, Products, Login/ Out / Register Page.

• There is a search bar at the top of every page, this giving users a quick way to find a specific product and they can search any key word that may be in name or description of the product.

• Below this, I have the navbar as previously mentioned, if the user is logged in as a customer or as admin they will have other options available on the navbar such as product management section and Profile editing section which also gives an order summary.

• Then in center of the page you will see the hero image. This is a paint brush mid stroke of a bright blue paint. I chose this as I wanted to choose a simplistic hero image that would highlight the button to start shopping and not make the home page to crowded in terms of the real estate available.

• Finally there is a central button directing users to go view products and start shopping.

• I did not add a footer to the site however this would be one of my future development plans to encourage a social media following for Ru Designs and incorporate these links at the footer.

• Initially there is a consistent navigation bar across all pages allowing access to Home, Products, Login/ Out / Register Page.

• There is a page titled Products positioned at the top of the page. This contains 36 various pieces of artwork which can be purchased directly from the site.

• The products themselves are mobile responsive using bootstrap containers, rows and columns I was able to structure this around mobile users.

• There is defensive programming in place here so if not an admin they will be brought to the login page.

• Once a user chooses the art they prefer they will add this to cart, meaning they do not leave the page an can continue to be inspired and purchase more art.

• Initially there is a consistent navigation bar across all pages allowing access to Home, Products, Login/ Out / Register Page.

• This section is designed so both the users and admin can actively and continuously edit and make changes to their profile, so if for example you may want to gift a piece of art to a friend in another country you can keep your billing details and shipping details separate.

• There is defensive programming in place here so if not an admin they will be brought to the login page.

• The profile Page allows you to also edit your username and account information not just delivery and billing information.

• Initially there is a consistent navigation bar across all pages allowing access to Home, Products, Login/ Out / Register Page.

• Similar to the add product page/ Product management page, this page allows the admin to actively make changes to the products so if there was an item that was not selling very well they can then change this to reflect and upcoming deal or clearance sale.

• There is defensive programming in place here so if not an admin they will be brought to the login page.

• There is an update or cancel button at the bottom to confirm the changes made as well.

• Initially there is a consistent navigation bar across all pages allowing access to Home, Products, Login/ Out / Register Page.

• This page contains a form where both users and admins can log into their account.

• There is defensive programming in place here so if not a user they will be brought to the registration page.

• Adding a CAPTCHA to the login page would reduce the volume of fake accounts or limit hacking.
• Cookie and GDPR compliance page to allow users to have more control of how their data will be used.
• It would be great to set up an FAQ page for this site as with older members of the group there can tend to be regular recurring questions. This could be added to the dashboard page.
• Ideally I would love to add more into the dashboard where users could create a full user profile to include their own career goals and then to set markers with the manager for working towards these goals.
• Remove checkout bug showing checkout section twice, this would be fixed by changing the classes and id's as well as putting in a new @media style to remove the mobile view once it goes past a certain screen size.

• HTML - Hyper Text Markup Language
• CSS - Cascading Style Sheets
• Bootstrap 4 - Mobile Responsive Framework
• Gitpod - Cloud Based IDE linked with Github
• Github - Online repository for hosting site
• Font Awesome - Provided a variety of font styles and icons used in the project
• Google Fonts
• Auto prefixer - to help structure code when finished - https://autoprefixer.github.io/
• HTML and CSS Validators - https://validator.w3.org/nu/#textarea / https://jigsaw.w3.org/css-validator/validator
• Chrome Developer Tools - Provided continuous learning and development tools to ensure high quality mobile user experience
• Javascript
• Python3
• Flask
• JQuery
• MongoDB
• Heroku
• Stripe
• AWS S3 Buckets
• SQLite
• Balsamic wireframes
• JShint

• There are various forms of defensive programming practices in this project used for each page of the site. The main functionality for this is to block anyone from getting access to make changes to profile or product information uploaded by the admin.

• Users who are logged in to their own account will then have the option to edit or delete their own sales

• Only the admin has access to the admin page, if a user tries to access this page that is not the user, they will be redirected to login.
• An Admin is the only person who can make changes to user accounts and to products
• They can also delete user profiles from the database

• In order to hide any password information I have used the Werkzeug hash method to hide each password in a secret key to keep sensitive information from the cookies, website and database.

• The navigation bar was built in a container using bootstrap so to ensure this was mobile responsive I used Chrome developer tools regularly to ensure the navbars responsiveness. This was tested with chrome dev tools using Iphone 5, desktop and IMAC sizes.
• This included a title, icon and 3-5 options to navigate throughout the site's pages.
• When in mobile view the menu would take the burger icon shape and go on the right corner of the screen, when clicked this would become a dropdown for the rest of the menu.
• The Products Section is one container, a series of collapsible rows and columns.

• The products were tested by clicking the element to see if they would open up, if not then I checked the classes to ensure they were Bootstrap and CSS compliant.
• When clicking the product, it would open up to the product details page and the information about that item would appear as well as an option to add to cart.
• In each product when logged in as admin, the admin could then see an edit or delete button for each product. This only shows for the admin to ensure maximum product management capabilities and consistency.

• The Search option was tested by first creating the function and search bar and then checking the mongo db index page to see if the categories and products were added correctly. I then went on to search for several items to ensure it was functioning correctly.
• All links including the main button to get started have been clicked and checked to ensure they are fully functional in mobile and desktop view.
• Lighthouse mobile testing system was used regularly to improve overall UX design and mobile experience.

• The navigation bar was built in a container using bootstrap so to ensure this was mobile responsive I used Chrome developer tools regularly to ensure the navbars responsiveness.
• This included a title, icon and 3-5 options to navigate throughout the site's pages.
• Each link has been tested by clicking and ensuring that if the link is to another area on the site that it opens in the same tab.
• This page is includes the base.html resource to limit the file size and allow the site ot be fully consistent. Therefore I had to carefully structure the products in the columns so they were mobile responsive. Below this I also included a link and resources for admins to make edits or delete products however in future I will add a prompt to confirm the deletion before its made. Each link was also clicked to ensure it worked properly.
• All links have been clicked and checked to ensure they are fully functional in mobile and desktop view.
• Each link has been tested by clicking and ensuring that if the link is to another area on the site that it opens in the same tab for the navbar.

• The navigation bar was built in a container using bootstrap so to ensure this was mobile responsive I used Chrome developer tools regularly to ensure the navbars responsiveness.
• This included a form where users would submit all sales information required to submit the sale to the app and database.
• Multiple fields are required to limit the amount of poor data being uploaded to the database.
• Each link has been tested by clicking and ensuring that if the link is to another area on the site that it opens in the same tab.
• There is a submit and cancel button below the form.

• When clicking cancel you will be brought back to the sale page
• When clicking submit the data is passed successfully to the DB. This was checked by submitting sales and checking MongoDB.

• The bottom of the page consists of 4 links to various social media sites to allow the user to easily follow the groups social platforms.
• All links have been clicked and checked to ensure they are fully functional in mobile and desktop view.
• Each link has been tested by clicking and ensuring that if the link is to another area on the site that it opens in the same tab.
• The checkbox function is not a required field as the same may not need approval.

• All payment pages have now been tested by following guidelines in Stripe documentation and by trying various forms of card payments with non registered member, registered memeber and super users
• This was trilaled for both successfula and unsuccessful payment types

• All Login pages were tested by usine correct and incorrect details to ensure form validation was working correctly.
• This was done with non registered member, registered memeber and super users to ensure full access

• There is full secure authentication across the site to ensure non members cannot negatively impact the UX.
• For exmaple in the comments and reviews section only members can create reviews for products.

Performance = 91% Accessibility = 98% Best Practices = 100% SEO = 91%

• This project was created using the Cloud based IDE Gitpod, I continuously added, committed and pushed my code to Github. This was instructed by Code Institute lessons and by my mentor. In order to deploy my website to github I followed the below steps:

• I began by logging into my Github account

• Then I click repositories section if not already in the top used repositories and click on the link Predict Your Sales

• Once I had opened this file, I then selected the settings option

• At this stage I scrolled down until you saw the Github pages section - this brought me to the dedicated page to deploying your site

• I then clicked a drop-down menu item which was labelled None and selected the Master branch

• The website automatically deployed once I selected the master branch

• I then scrolled back down to the section of Github pages to get the link for the deployed site.

• Scroll back down to the GitHub Pages section to retrieve the link to the deployed website. github have also now created their own page for the deployment process as well. Visit Live Site Here

The site was initially deployed on Github while in development but then I chose to deploy this via Heroku. Initially the steps were as follows:

1. Go to Heroku site and create an account.
2. Link my Heroku account with my github account by editing the settings and searching for my github account.
3. Once found, I then continue to search for the repo and select connect to repository.
4. Once connected I will then use the CLI to ensure the site is deploying successfully.

There was also a recent incident which meant the deployment process changed. Since I already had my app set up and created on my Heroku account, I simply had to use the CLI to reconnect the app back to the Heroku account.

I did this by typing the following command into the CLI "heroku git:remote -a Predict_Your_Sales"

After this I used git login -i which then prompted me to submit my email and password Once accepted I was then able to deploy the app to heroku again by using the following commands: git add . git commit -m "" git push git push to heroku

At this stage in the project I had already deployed my project to Heroku successfully and now needed to add my media and static files to AWS. To do so I went through the following steps.

1. Went to www.awsamazon.com
2. Create an account - using free version with cap on deployments
3. Go to Navbar and click S3 section
4. Go to Buckets
5. Create Bucket with similar name to project
6. Create a policy - at this stage I ran into an issue as you need ot attach your ARN number to create a policy but AWS was having an issue and would no accept the autogenerated ARN. To fix this I go the template for the base code used and included my own details. I also noticed several students having this issue so I shared my solution on the Code Institute Slack which helped out some students as well!
7. Attached policy to bucket
8. After this I created a user group
9. Then I attached the Group to the Bucket and policy
10. at this stage I created a user for the group
11. I then proceeded to upload all of my project images to the bucket
12. Finally I tested the deployment and project level changes were being reflected on S3.
13. At this stage I noticed some errors and actually removed all images, compressed them and uploaded them.

• The bugs experienced in developing this application were CSS and Python related.
• The biggest bug I have in this app is actually in the large screen version of the checkout page.
• THE ISSUE: Due to some testing and validating my code with a HTML validator. When I used the page source code from the deployed site I received an error in my code with regards to having duplicate id's for two matching sections of the checkout page. I did contact the tutor support team who advised that this was a common issues whihc was in the video tutorials and has since been amended. They said as this is a sizable change to comment and explain this in my Readme file and that the assessment team will be used to this issue. Essentially this bug causes the checkout section of the app to load once in mobile view but twice when in desktop mode. The remedy for this would be to change the css styling and hide the mobile view in desktop mode. This would be a short term fix. Ideally I would actually like to separate these further into separate file altogether so there would be no chance of them interfering with one another. In terms of the validation error this shows an error for duplicate ID's which is causing the duplication of the checkout app section. This does not impact the performance of the site in any way however the UX is affected by this on the checkout page. Once the project has been assessed I plan on returning to this app and this will be my first bug fix! as well s this , I do plan on working with Ru and helping cater the app toward his aesthetic and change the styling of the project to reflect his persona and artistic style.
• Thankfully I used Python and relied heavily on using print statements as well as getting Jinja feedback.
• This was most helpful when testing if there were any function errors, I would print the statement to ensure the logic was correct.
• Also a good way for DB testing is to submit various forms and see if the data is received in the DB.
• I had an image bug when uploading to S3 one image had a slight spoelling change after the compression and therefore it showed up as an error and the al message appeared on the deployed version of the site. To remedy this I removed the image form the github version + the cloud and reuploaded it.
• There were form bugs initially too, although some designs are intentional
• I had several bug issues with the models but this was remediated by changing and adjusting the attributes in the views.

Title: Form Issues Environment : add_product.html Steps to reproduce a Bug: In order to reproduce this bug, simply remove the {% extends "base.html" %}. Expected Result: Page will not load correctly (missing navbar) Actual Result: Emails were not sent Severity/Priority: High priority bug fix as without navbar there would be a very poor UI and lack of navigation

Title: Form Issues Environment : app.py Steps to reproduce a Bug: In order to reproduce this bug, simply remove hash section from app.py Expected Result: Passwords will not appear in MongoDB Actual Result: Passwords will appear in MongoDB Severity/Priority: High priority bug fix as without user info is not safe

Title: Permissions Environment : profile/app.py Steps to reproduce a Bug: In order to reproduce this bug, simply change the edit_user function from app.py Expected Result: Users cannot edit other users Actual Result: Users can edit users Severity/Priority: High priority bug fix as without users can create dummy accounts and mess with data

All files were put through the following validators:

• https://validator.w3.org/nu/#textarea
• https://jigsaw.w3.org/css-validator/validator
• https://www.jshint.com/
• https://extendsclass.com/python-tester.html

• I reviewed the previous lessons of the course while typing out the core HTML and CSS structure of this project. I then used the Bootstrap framework to enable site responsiveness for mobile/tablet and desktop users.

• For these sections I reflected back on the course to the lessons around functions, event listeners, setting up an api and working with maps/ email.js

Due to the time limitations with the project I used the learning material from the course as core inspiration for developing this project.

For this project I watched several youtube videos on creating full stack ecommerce sites such as:

• [https://www.youtube.com/watch?v=ommyvZnYwe8]
• [https://www.youtube.com/watch?v=yTpVTn0KAnI]
• [https://www.youtube.com/watch?v=-c6jnwmbMsE]
• [https://www.youtube.com/watch?v=zn1geTG3YrQ]

• Stack overflow was a great resource while using this project and navigating through javascript territory it allowed me to relate other developers problems to my own and then to reflect back on my own work using the feedback form other developers.
• It was also incredibly helpful while working with python and following the indentation and syntax rules.
• It was also very helpful when going through my python errors as well and validating anything that looked out of place.
• https://stackoverflow.com/questions/64122001/local-variable-intent-referenced-before-assignment
• https://stackoverflow.com/questions/10388033/csrf-verification-failed-request-aborted

• All content in the about me section was written by me and is fictionally based on my childhood friend Ruadhan Murray
• The content written in the app is all fictional except the majority of art description information

Youtube and other articles referenced are as follows :

• https://www.salesreadinessgroup.com/blog/how-to-become-a-great-sales-leader
• https://salesdrive.info/key-strategies-for-successfully-managing-a-sales-team/
• https://www.youtube.com/watch?v=9X2fjctfIHs
• https://www.youtube.com/watch?v=-N45bnTaSss
• https://www.saleshacker.com/12-tips-on-managing-a-high-performing-sales-team41
• https://www.youtube.com/watch?v=rylwgRSgjG0
• https://www.youtube.com/watch?v=GrhSLf0I-HM
• https://www.richardson.com/sales-resources/defining-consultative-sales/
• https://kapta.com/resources/key-account-management-blog/key-account-management/10-tips-for-successful-key-account-management
• https://blog.hubspot.com/sales/habits-to-become-a-more-effective-salesperson

• I was inspired to create this site by my friend Ru who I've always admired his creativity.
• I would often be curious as to what other sales people were doing in terms of performance and what I can learn form them.
• I also received various links and resources from my mentor Brian Macharia

• This project is for educational purposes only.

• I would like to come back to this project and add on a lot more art work as well as continuously add more stying to make the overall site more appealing.

• Ru himself has began his journey of creating art again and would like to see about selling his art in the future. For this reason, I would love to add a bio section on the hompage but due to time constraints I was unable to do sobut will return in the comin weeks to add this feature.