EventTicket

Discover and buy tickets for your exclusive events.

You can experience live

Screens

Events Screen

In this screen, all events are listed. You can click 'See Detail' buttons to go details about related event.

Event Detail Screen

• All details about event such as venue, title, date and description.
• In this screen you can choose a category and go to seat selection page.
• Without selecting a category, you cannot move on.

Seat Selection Launching Screen

• This screen is seen when no seat is selected.

Seat Selection Screen After Seat Selection

• You can choose one or multiple seats by clicking on available seats.
• When seat is selected, it will be listed under 'Tickets'.
• When selection completed, you move forward to payment page by clicking 'Go to payment' button.

Payment Screen

• In order to complete payment, all inputs must be filled properly.
• For example, you can only enter numbers in credit card section and security code section .
• Total price can be seen on top of 'Pay Now' button.
• Once you fill all inputs on form, you can click on 'Pay Now' button to complete payment

Payment Success Screen

• In this page, you will see payment summary such as selected seats, total amount of payment and category.
• You can explore new events by clicking 'Buy a New Ticket' button.

Project tools

• Vue 3 composition API
• Vue-router
• Vuex
• Tailwind
• Vue tost notification
• Vue-Select

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build