This is the frontend application for the Ticket Booking Dashboard, a web-based platform that allows users to create, view, and manage event bookings. Built with React and styled using Tailwind CSS, this application offers a user-friendly interface for seamless event management.
- Event Management: Users can create, view, and manage events, including setting event details such as name, description, date, price, and capacity.
- Booking Management: Users can view all bookings associated with events, with detailed information on each booking.
- Authentication: Secure login and authentication mechanisms to ensure only authorized users can access and manage event data.
- Responsive Design: Fully responsive layout using Tailwind CSS to ensure a smooth experience across all devices.
- React: For building the user interface.
- Tailwind CSS: For styling and ensuring a responsive design.
- Axios: For making API requests.
- React Router: For navigation and routing.
- LocalStorage: For storing authentication tokens.
Make sure you have the following installed on your local development machine:
- Node.js
- npm or yarn
-
Clone the Repository:
git clone https://github.com/your-username/ticket-booking-dashboard-frontend.git cd ticket-booking-dashboard-frontend -
Install Dependencies:
npm install # or yarn install -
Set Up Environment Variables: Create a
.envfile in the root directory and add your environment variables:VITE_SERVER_BASE_URL= https://ticket-booking-dashboard-backend.onrender.com/api -
Start the Development Server:
npm start # or yarn start
# Admin
Email: [email protected]
Password: password123
# user
Email: [email protected]
Password: password123
A form component for creating new events. Utilizes Tailwind CSS for styling.
Displays a list of events fetched from the backend API.
Displays a list of bookings associated with an event.
Context provider for handling authentication and user state.
Authentication is handled using JWT tokens stored in local storage. The AuthProvider context manages the authentication state and provides helper functions for login and logout.
API requests are made using Axios. The base URL for the API is set in the environment variables, and the token is included in the headers for authenticated requests.