Bookshop

User Centric Frontend Development Project

I built this website because the type of books which interest me would be sport only. I wouldnt be a huge reader but I got hooked when I started reading Tiger Woods. The primary objective of this website is to allow potential buyers search for the sports book they desire within the options available, allow them to make contact with the seller should they have any queries or request the purchase of a book which may not be offered throught the site and allow them to read reviews by previous customers. In the footer section the social media icons link to the homepage of each site. The other links have no functionality at this time.

UX

The design of this site is minimilistic with a greyscale theme to the entirity. There is continuity between each of the links(soccer, horseracing and golf) which gives structure. On each page the header and footer section are constant and display the same information throughout the site. The user is not overwhelmed with having to read too much text, but the option of reading more is available through the use of a dropdown button. Within the nav-bar, there is a link to each page which proves a smooth experience for the user. The use of the breadcrumb function allows the user to move back a step without having to use the 'back button' on the browser itself.

User story:

As a potential consumer of this site, I would like to know a little about the background of the company and what they pride themselves in. Most importantly the navigation through the site itself needs to be smooth and seamless. Using the dropdown menu from the navbar allows the user to go directly to the sport genre that is of interest to them.

Wireframing

Wireframes were drawn using balsamiq diagram and can be found in the wire_frame folder. The wireframe diagrams did not end up as the final design. While building the application, it was clearer to see what worked and looked better.

Features

• linkable sections on the site from the navbar
• a google map implemented as an iFrame
• links to social media
• breadcrumb for each page so that the user to move back a step without having to use the 'back button' on the browser itself.

Features left to implement

• On the contact us page, the contact form has no functionality yet.
• link the social media links to their proper accounts.
• Add more categories such as GAA, fishing, cricket for example.

Technologies Used

• HTML - Hyper Text Markup Language was used to write the code for this project
• CSS - Cascading Style Sheets was used to style each page.
• Bootstrap - Bootstrap was used to aid the design and layout of each page

Testing

The site was tested on 21" monitors, 15" and 13" laptop screens and on the following phone screens: iPhone 6/7/8; Galaxy S5, Pixel 2; Pixel 2XL; iPhone 5/SE; and iPhone x. It was also tested on iPad and iPad Pro screen sizes. The site was also tested on different internet platforms such as google chrome and internet explorer.

User testing was carried out to ensure the following:

• All links work correctly.
• Links to other sites(social media) use target="_blank", so as to open in a new tab.
• The navbar links link to the correct section of the site for the link clicked on.
• All hover effects work correctly and as intended.
• Breadcrumb feature works as intended, tested on each page.
• Carousel feature works correctly. Rotates independantly or by using the arrows.

Deployment

It is deployed from the master branch. This site is hosted on github pages and can be accessed throught the following link (https://brianquinlan1989.github.io/Bookshop---Project-1/).

Credits

Content

The title, synopsis and information for each book was obtained from sites https://www.amazon.co.uk/ and https://www.easons.com/

Media

• The header image across each page was obtained from https://www.pexels.com/
• Book images were obtained from various sites such as https://www.amazon.co.uk/ and https://www.easons.com/

Acknowledgements

• I received inspiration for this project from other online bookshop sites such as https://www.amazon.co.uk/ and https://www.easons.com/. My original idea for this project was that for me, which is not a religious reader, but one who would read anything to do with sport was to have an application which caters to just avid sports book readers. If a potential consumer was looking for a sports related book, they would immediatly think of this website.
• I also took inspiration from https://www.kennys.ie/