Portfolio Project powered by Adform

Creating an Events Reservation Portal

Two Women Looking at the Code at Laptop

Many cities around the world participate in an event where exclusive locations, whether industrial, historical, or art-specific, open their doors to the public. This event is very popular, attracting visitors from all around the world who want to ensure they can visit their chosen locations.

To manage the influx and prevent overcrowding, visitors can book reservations. Each visitor must authenticate using a third-party authority (GitHub or Facebook, or both of them) and will receive 500 credits upon authentication. These credits can be used to pay for tickets.

Your task is to develop a reservation portal that facilitates these bookings and handles visitor authentication and credit management efficiently.

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.

    1. The main goal of this task is to create a user-friendly, scalable, and secure online portal that enables visitors to book reservations for exclusive events in various cities. The portal should efficiently manage user authentication, event bookings, and credit transactions, ensuring a seamless experience across different devices and browsers.

    2. Suggested completion time is 2-4 weeks.

    3. Recommended for a team of 1-2 frontend and 1-2 backend engineers. Head to Women Go Tech Community Slack to find your teammates.

    4. You will have the opportunity to meet with Adform representatives and discuss the outcome of your task and any outstanding questions during Career Day at the beginning of September. More details will be shared via email and Slack leading up to the event.

    Technologies Recommended

    • Pick a Node.js as a runtime for building your backend application.
    • For building REST APIs there are many frameworks available such as Hapi or Express.
    • For data storage, use either MongoDB or any SQL-like database.
    • For the frontend, use React as the main library and Vite for bundling and optimizing the code.
    • To enhance the appearance, use component libraries like MUI, Ant Design, or Adobe Spectrum Web Components.
    • Host your application on third-party service providers and expose it under your custom domain name. Consider using AWS, DigitalOcean, or GoDaddy.