diff --git a/Projects/Product-Landing-Page.md b/Projects/Product-Landing-Page.md index fa30a070..d51aa65f 100644 --- a/Projects/Product-Landing-Page.md +++ b/Projects/Product-Landing-Page.md @@ -6,6 +6,10 @@ Whenever you have a product (or a service) that you want to sell, you'll want to Conversion rate - the % of the visitors which purchase the product or service. +When you have completed this app and the bonus features try leveling up your +skills by expanding it to incorporate the features specified in the +[Simple Online Store](./Simple-Online-Store.md). + ## User Stories These will cover the visual part of the project. diff --git a/Projects/Simple-Online-Store.md b/Projects/Simple-Online-Store.md new file mode 100644 index 00000000..eec7f136 --- /dev/null +++ b/Projects/Simple-Online-Store.md @@ -0,0 +1,74 @@ +# Simple Online Store + +**Tier:** 2-Intermediate + +In the [Product Landing Page](./Product-Landing-Page.md) project you implemented +a landing page to provide your users with information about a product and to +hopefully increase your sites conversion rate. + +The goal of the Simple Online Store is to give your users the capability of +selecting a product to purchase, viewing purchase information, adding it to +an online shopping cart, and finally, actually purchasing the products in the +shopping cart. + +### Constraints + +- Starting out you may implement your product inventory as an array of +Javascript objects if you are developing in Javascript. For other languages +feel free to choose the in memory solution of your choice. + +## User Stories + +- [ ] User can click on a 'View Products' button on the Landing Page to +display the Products Page. +- [ ] User can see a card on the Products Page for each +Product showing the product thumbnail, name, price, a short description, +and a 'Select' button. +- [ ] User can see a Product Details page displayed when the 'Select' button +is clicked showing the same information from the product card, but also a +unique product id, a long description, 'Add to Cart' button, and a +'See More Products' button. +- [ ] User can see a confirmation message when the product is added to the +shopping cart. +- [ ] User can click on the 'See More Products' page to return to the +Products Page. +- [ ] User can see a 'Shopping Cart' button on both the Landing +Page or the Products Page. Hint: a top bar might be a good common location +for this button. +- [ ] User can click on the 'Shopping Cart' button to display the Shopping +Cart page containing the product id, name, price, and quantity +ordered input box for each product previously added to the Shopping Cart. +- [ ] User can see a total purchase amount on the Shopping Card that is +calculated as the sum of the quantities multiplied by the unit price for each +product ordered. +- [ ] User can adjust the quantity ordered for any product to adjust the +total purchase amount. +- [ ] User can click a 'Place Order' button on the Shopping Cart Page to +complete the order. User will see a confirmation number when the order has been +placed. +- [ ) User can click a 'Cancel Order' button on the Shopping Cart Page to +cancel the order. User will see the product quantities and the total purchase +amount reset to zero. +- [ ] User can click a 'See More Products' button on the Shopping Cart Page +to return to the Products Page. If the order hasn't been placed yet this will +not clear the products that have already been added to the Products Page. + +## Bonus features + +- [ ] User can see an error message if the quantity ordered exceeds the +"on hand" quantity of the product. +- [ ] User can specify a bill to and ship to address when the order is +placed from the Shopping Cart Page +- [ ] User can see shipping charges added to the total purchase amount +- [ ] User can see sales taxes added to the total purchase amount +- [ ] Developer will implement the product inventory in an external file or +a database. + +## Useful links and resources + +There are plenty of eCommerce Stie Pages out there. You can use [Dribbble](www.dribbble.com) and [Behance](www.behance.net) for inspiration. + +## Example projects + +- [eCommerce Animations](https://codepen.io/RSH87/pen/RagqEv) + diff --git a/README.md b/README.md index 695d9227..d4731c11 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,7 @@ required to complete them. | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediate | | [🌟Meme Generator App](./Projects/Meme-Generator-App.md) | Create custom memes | 2-Intermediate | | [Regular Expression Helper](./Projects/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | +| [🌟Simple Online Store](./Projects/Simple-Online-Store.md) | Simple Online Store | 2-Intermediate | | [Sports Bracket Generator](./Projects/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediate | | [String Art](./Projects/String-Art.md) | An animation of moving, colored strings | 2-Intermediate | | [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediate |