Implement Event Detail Page in Frontend with Nuxt 3

[LeHuth]

We need to implement the Event Detail Page in our ticketing app's frontend using Nuxt 3. This page will display detailed information about a specific event, fetched from the backend API, and provide options for users to purchase tickets or share the event.

Tasks:

• Design the layout and style for the Event Detail Page, following the app's design guidelines and UX best practices. #8

• Fetch event data from the backend API using the GET /events/:id endpoint:

• Implement an API client or service to interact with the backend.

• Handle any potential errors, such as network issues or API errors, and display appropriate error messages to the user.

• Display the fetched event data in the designed layout, including detailed information such as event title, description, date, time, location, category, tags, organizer, image, and ticket information.

• Implement a ticket purchasing flow for users:

• Create UI components for selecting ticket types and quantities.

• Integrate the ticket purchasing components with the backend API, sending a request to reserve or purchase tickets based on user input.

• Display a confirmation message and update the ticket information once the purchase is successful.

• Implement social sharing options, allowing users to share the event details with others:

• Add buttons for sharing the event on popular social media platforms (e.g., Facebook, Twitter, LinkedIn).

• Ensure the shared links include appropriate metadata and preview information for the event.

Acceptance Criteria:

• Event Detail Page is designed and implemented following the app's design guidelines and UX best practices.

• Event data is fetched from the backend API and displayed in the designed layout.

• Ticket purchasing flow is functional and integrated with the backend API.

• Social sharing options are implemented, allowing users to share the event on popular social media platforms.

• The implemented code follows established coding standards and project structure.

• The app is updated to include the new Event Detail Page in the navigation.

Notes:

• Make sure the code follows our established coding standards and project structure.

• Ensure that any necessary error handling is in place.

• Coordinate with the backend team to ensure the frontend is correctly integrated with the backend API.