During my time in QUT, I was tasked with developing a Flask application along with SQLite, Jinja and Bootstrap in 3 weeks. 1 week was spent developing the website with Bootstrap, while 2 weeks were spent developing the backend part of it with SQLite, Flask and Jinja. Tools including User Stories and Conceptual Model was used to design the application.
The final demo screenshots can be found at the end.
User Stories
User Stories are among the tools used to design the simple eCommerce application of our choosing. A total of 6 user stories were generated for the assignment.
User Story #1 Title: View available art supplies Story: As a user I want to view the available art supplies sold at this ecommerce store because I am interested in exploring the art mediums I can do in my free time. Acceptance Criteria: 1) Home page contains pictures and descriptions of bestselling product items 2) Description of product items 3) Clicking on the picture and descriptions link to the full page of the product
User Story #2 Title: Allow user to find recommendations of items in product page Story: As a user, I want to be able to see other recommendations from the product I’m looking at because I want more convenience in navigating the art supplies I’m interested in. Acceptance Criteria: 1) Add a Recommended section in the product page based on its category
User Story #3 Title: Allow user to search for specific art supplies Story: As a user, I want to be able to search for art supplies because I want to find the items I want are available in this store Acceptance Criteria: 1) Add a search bar in the navigation of every page
User Story #4 Title: Allow user to add item to cart from item page Story: As a user, I want to be able to add the items I want to purchase to the cart because I want to purchase the item I’m interested in. Acceptance Criteria: 1) Product page has ‘Add to Cart’ button below description
User Story #5 Title: Allow user to browse for supplies via categories Story: As a user, I want to be able to browse through supplies through categories because I want to find the specific supplies I need through browsing in the category of my choice. Acceptance Criteria: 1) Divide items in category via secondary navigation 2) Label each item via its category
User Story #6 Title: Allow user to add item to cart from home page Story: As a user, I want to be able to add the items I want to purchase from the homepage conveniently because I will be familiar with some products and I want to save time to buy them at once. Acceptance Criteria: 1) Each description in each item card of the home page and category page has ‘Add to Cart’ button below for convenient adding of items
Conceptual Model
Final Demo Screenshots
1. The application is a simple eCommerce application. The home page contains bestsellers and brand new products.
2. The navigation bar shows the types of art supplies that the user can navigate. Each art supply page filters the art supplies.
3. Users can also click into the products to see their details or add to cart. The "New" tag is a label stored in the database and styled with HTML/CSS.
4. Users can add their item into the shopping basket. This was done with Flask's connection with the database.
Users can enter their details, and checkout.
The database (SQLite) then stores the user details.