Let’s create a portal where people can book a reservation for a place in a given city. It must be designed in such a way that the website can be accessed on desktops or mobile devices, on different browsers. The portal should have an authentication and authorization mechanism where the email is used as the primary key to identify a visitor. The portal will have its own API with a database, and multiple pages, some static and some dynamic:

Homepage: with a logo, a big header (Banner) on the top with an introduction and a few words about the event. The Menu-bar is at the top of the page. A footer, that is sticked to the bottom of a page, with a small logo (repeated), and a few hyperlinks to other simple static pages: homepage, sponsors, contacts, rules etc.  

List page: displays a table of places with multiple columns: name, short description, number of total seats, number of remaining seats, price, date of an event. An “Add to Basket” control for every item in the list:

a) A control is displayed for available Places, where remaining seats number is greater than 0 and visitor has enough credits left on his balance.

b) A control has numeric stepper, so that you can add one or more tickets, but not more than its left.

c) A control is active only up to 24 hours until the event.

d) Control makes constant queries to a server to verify the number of places and seats left.

Details page: for every row in the list, there must be a hyperlink to read more about a place. The “Add to Basket” control is repeated on details page.

Edit page: for specific users of the portal who are authenticated and authorized as admins of the content, there is an edit button in the list. Once clicked, an admin can update the details of an event.

Basket page: It shows items added to a basket, total ticket price and the remaining balance of the visitor. Warnings are shown if a visitor added too many items to the basket, or if a ticket is no longer available. There is also a click to confirm (checkout) button.

Thank You page: it is displayed once the items in the basket are confirmed (checkout). A summary is displayed, that can be printed. The thank you page has its unique url, that can be accessed without authentication.

Profile page. Displays the details of the user and the reservations already booked by the user. There is a delete button next to each reservation. Once clicked, the ticket is returned back to the pool.