Grocery Store Documentation

Purpose

My own creative idea to build a website for a grocery store. I wanted to put my JavaScript skills to the test and see if I could build a program like an addition and subtraction calculator. The customer will be able to add and subtract grocery items from their shopping cart with a click of a button. The total before tax will appear in a fixed bar on the left side of the screen to give them a clear idea of how much the total cost will be. The customer should be able to understand the flow of the website and how to navigate it smoothly and easily. After the customer is done choosing their items, it will redirect the user to a confirmation page showing them all the items they chose. From there they will be directed to a page where they will enter their information to buy the groceries. After that it will send them to a page that gives them their receipt which they would then be able to print out. Since this is just for fun though, I will not actually code the payment page or the receipt page as I don’t own a grocery store and this is a fictitious website.

Goals

  • To take what I learned from the JavaScript basics course on TreeHouse.com and use it in a real world scenario such as a grocery store website.
  • User interface and user experience should be straight forward for the user.
  • The grocery website will be responsive and be able to use on any phone, tablet or laptop or desktop computer.
  • Main goal is to create the items page where the user will be able to add and subtract items from their cart. The total price bar should directly correlate with which ever and how many ever items the user chooses.
  • This is going to be tough, so I plan to be using my problem solving skills to a great extent as well as trial and error when I run into bugs.

Target Audience

If this were a fully functioning website the target audience that I would be aiming for is anyone over the age of 18 years old, who has a valid debit or credit card who shops at a grocery store and would like the opportunity to be able to shop online. This would save the user on time and difficulty trying to find each item in the store.

From a web developers stance looking for a full-time front-end web developer career, my target audience is job employers. To show them my coding abilities in JavaScript, my thought process, my creativity when it comes to building a website with html and css, my organization skills and how I go about creating a website from beginning to end; plan, wireframes, photoshop mockups then actual website.

Flow Chart

Flow chart