You need to develop a simple event listing app, where users can see the list of upcoming events of a particular musician. To develop the system, use Vue.js with ES6 (or newer JavaScript syntax). You can submit it in plain vanilla JS or React, but we highly prefer Vue.js. The design is not limited—you can use Bootstrap, Tailwind, etc., or feel free to be creative.
- Implement this UI (Figma link)
- Consume this API endpoint
- When a user clicks on “Buy Ticket”, it takes the user to the event url from the API
- When the user uses the search field, It should filter the “All events” section. (this should be a frontend implementation alone)
- There are 2 sections, Featured events and All events. Note that, it’s up to you to pick the events that are featured from the list of all events that the API supplies.
- It should be noted that the API endpoint may not provide all the information the design requires. In such cases, you can fill such requirements with some arbitrary data.
- You need to use Vue.js with ES6 or newer JavaScript (you can also use vanilla JS or React, but we prefer Vue.js).
- The design has to be responsive, you can use your intuition for the responsiveness.
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.