The Grinch's Posse team arrived at the decision to create an application that will facilitate the creation of Gift Wish Lists which may be publicly posted within the application. Each user who creates the list will need the ability to choose family members to whom she wishes the list to be visible. In addition, the designated family members must have the ability to select a given gift and indicate that they are purchasing that gift. To maintain the element of surprise, the owner of a list may not see who has chosen to get a gift, or even that it has been selected.

Gift Wish List (working title) has the potential to be a fairly sophisticated application with wide appeal to a broad user base. In the interest of expediency and adhering to the agile development model of continuous integration, The Grinch's Posse intends to reign in the feature set by outlining a core feature set likely to be feasible within the established 6-week schedule for development.

Three broad capabilities are necessary as the underpinnings of the application:

1. The ability for a user to create her own holiday gift wish list
2. The ability to view the holiday gift wish lists submitted by other family members
3. The ability to select gifts on the lists of others and indicate that she will buy that gift

As a user, I want to be able to

• Create a user account
• Edit user account details
• Delete my user account
• Log in to Gift Wish List.
• Accept an invitation to a family member's list
• Select a gift and indicate that I am buying that gift
• See if other family members have selected a gift to buy

As the creator of a gift wish list, I want to be able to:

• Add gift items to my list
• Delete gift items from my list
• Edit gift items on my list
• Invite family members to the list

As the creator of a gift wish list, I do not want to be able to see what gifts have been purchased for me.

---

Feature Set Item	Wish List Item
Landing Page for User Signup	Invite family members to list component
User Login/Signup Component
User Signup Page Component
User Account Landing Page
Create Wish List Component
Edit Wish List Component
Delete Wish List Component
Select Gift for Purchase Component

---

Broken down by views in the application, here are the functional requirements:

At a nominal level, we should aim to have the following elements on this page:

• The application title as a level one heading (<h1>) within a site (<header>)
• A short blurb about joining and creating your own list
• A Login/Signup input and button that when clicked expose a modal box which allows user either to login if she is an existing user or to create a user account if she is not.

This page should allow the user to create a user name and a password. Required subcomponents for the page include inputs for the user name and password and a Create Account button.

The content of this page is conditional. If the user has created a wish list of her own, it will appear on the page, along with any other wish list to which she has been invited as a family member.

Thus, there are two subcomponents to the Account Landing Page Component as follows:

• A pane containing her own gift wish list if she created it.
• A pane or panes containing other gift wish lists to which she has been invited.

If she has not created a gift wish list of her own,within that pane, in place of the gift wish list would be Create Gift Wish List button.

This component is preferably a modal box which opens when the user clicks the Create Gift Wish List button

Within the modal box would be dynamically expanding rows of input fields for a gift description, where to buy the gift and who has decided to buy it. (Obviously at this stage the last field would by empty.)

Beneath the dynamically expanding rows is a Save List button. When clicked, the user is returned to her user landing page, but now with her gift wish list populated in the top panel on the page.

When the Gift Wish List Component is populated on the user landing page, an ** Edit Wish List** button will appear beneath it. When clicked, a nearly identical modal box as seen in the Create Wish List Component will appear, allowing the user to make any changes she sees fit.

When finished, should would click a Save Changes button appearing beneath her list.

Adjacent to the Edit Wish List button described above, there is also a Delete Wish List button that, when clicked, will raise a modal box asking Are you sure you want to delete this list?

Two buttons beneath the question in the modal allow the user to Cancel if she does not want to delete the list, and Yes, if she wishes to delete the list.

The Select Gift for Purchase Component is a subcomponent of the populated Gift Wish list of users other than the user currently logged in. Each row in the list has a column that contains a dropdown selector with the names of the people invited to the list.

In such a list of other family members, the user may select her name from the dropdown list. When selected, some stylistic change (perhaps invoked by the Angular *ngClass directive) would visibily change the row, e.g. a change in the background color of the columns that comprise the row.

---

1. HTML5
2. CSS3
3. If needed, CSS Framework such as Zurb Foundation or the more lightweight similar solution Semantic UI
4. TypeScript
5. Angular

1. Node.js
2. Express.js
3. MySQL (Database Server engine) v8.x
4. Sequelize ORM (Object Relational Modeler)
5. JWT Tokens as a possible means of authentication.
6. Passport as a more robust means of authentication and authorization.

In a project of this relative complexity, we will very possibily need to make several mid-course adjustments, triaging where necessary to achieve the best possible outcome in software usability and a comfortable user experience.

---

Return to Wiki Home