🎤 Ticketstore App for concerts

This project showcases a modern, responsive frontend built with Vue.js and styled with Tailwind CSS, offering a sleek user interface for a concert ticket booking application. It is designed to work seamlessly with a pre-existing Spring Boot backend.

📽️ Demo

Here is a demo of the project functionality with the backend operational.

🔗 Backend Repository

This frontend application is built to interact with a dedicated backend. You can find the backend repository here:

SpringBoot3.3.1-HibernateDB_Concerts-TicketStore-App

Make sure to set up and run the backend alongside this frontend for full functionality.

📋 Table of Contents

1. Main Features
2. Technologies Used
3. Quick Start
4. Project Structure
5. Backend integration
6. Customization
7. Contributing
8. License

🚀 Main Features

• 🔐 User registration and login system
• 🎫 Concert and ticket exploration
• 🛒 Multi-step ticket booking process
• 📊 Order management and viewing
• 🔄 Access and refresh token authentication
• 🔒 Secure API calls with Axios interceptors
• 📱 Responsive design for all devices
• 🍔 Animated menu for improved user experience
• 🖨️ PDF export of order receipts using html2canvas
• 🗂️ Customizable UI components

Detailed Functionality

• User Authentication:

  • Secure login and registration process
  • JWT-based authentication with access and refresh tokens
  • Automatic token refresh for seamless user experience

• Concert Exploration:

  • Browse available concerts and ticket details
  • Advanced search and filtering options
  • Detailed view of concert information

• Ticket Booking:

  • Intuitive multi-step booking process
  • Real-time availability checking
  • Multiple payment method options

• Order Management:

  • View and manage personal orders
  • PDF export of order receipts for easy record-keeping

• Responsive Design:

  • Tailwind CSS for consistent, responsive UI across devices
  • Custom animated menu for improved mobile navigation

• API Integration:

  • Centralized API services for efficient data management
  • Axios interceptors for automatic request/response handling and token management

🛠 Technologies Used

Category	Technologies
Core
Build Tools
Routing
HTTP Client
UI Components
PDF Generation

🚀 Quick Start

# Clone the repository
git clone https://github.com/saraobialero/Vue3-TailwindCSS_Concerts-TicketStore-App.git
cd your-frontend-repo

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

📁 Project Structure

src/
├── assets/
├── main.css
├── components/
│   ├── AnimatedMenuIcon.vue
│   ├── CardOrder.vue
│   ├── Footer.vue
│   ├── Header.vue
│   ├── PaymentForm.vue
│   └── PersonalDataTable.vue
├── composables/
│   └── userAuth.js
├── layouts/
│   ├── DefaultLayout.vue
│   └── NoHeaderFooterLayout.vue
├── router/
│   └── index.js
├── services/
│   ├── AuthService.js
│   ├── OrderService.js
│   ├── ReplyService.js
│   └── UserService.js
├── views/
│   ├── Forbidden.vue
│   ├── Home.vue
│   ├── Login.vue
│   ├── Orders.vue
│   ├── Page404.vue
│   ├── ReplyDetail.vue
│   └── Signup.vue
└── api.js
└── App.vue
└── main.js

🔌 Backend Integration

This frontend is designed to work with the Spring Boot backend available at SpringBoot3.3.1-HibernateDB_Concerts-TicketStore-App. To integrate with the backend:

1. Ensure the backend server is running.
2. Configure the backend URL in your frontend environment variables or configuration file.
3. The api.js file handles API calls and authentication with the backend.

// Example of API configuration in api.js
import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL || 'http://localhost:8080/api',
  // ... other configurations
});

// ... rest of the API setup

Make sure to update the baseURL to match your backend's URL.

🔐 Authentication and API Calls

This project uses JWT for authentication. The access token is stored in localStorage and automatically included in API calls using an Axios interceptor. The api.js utility handles token refresh and API error management.

// Example of Axios interceptor in api.js
instance.interceptors.request.use(
  async (config) => {
    const token = await AuthService.ensureValidToken();
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

🎨 Customization

Tailwind CSS can be customized in the tailwind.config.js file. Add your own color palette, fonts, and other design tokens here.

🤝 Contributing

Contributions are welcome! Please ensure that your contributions are compatible with the existing backend structure.

📄 License

This project is licensed under the MIT License.