The Ticket Booking App is a simple React application that allows users to book and manage tickets for various destinations. Users can enter their name, departure address, destination address, departure time, and date to book a ticket. The app also provides functionality to edit and delete existing tickets.
- Ticket Booking Form: Users can fill out a form to book a ticket with the following details:
- Name: The name of the ticket holder.
- Departure Address: The address from where the journey starts.
- Destination Address: The address of the destination.
- Departure Time: The time of departure.
- Date: The date of the journey.
- Ticket List: All booked tickets are displayed in a list format, showing the ticket details along with options to edit or delete each ticket.
- Edit Ticket: Users can edit the details of an existing ticket, and the changes are reflected in the ticket list.
- Delete Ticket: Users can remove a booked ticket from the list.
- User Feedback: Users receive alerts upon booking a ticket or making changes to a ticket.
- Make sure you have Node.js installed on your system.
- Clone the repository or download the source code ZIP file.
- Open a terminal and navigate to the project directory.
- Run the following command to install the required dependencies:
npm install
- After installing the dependencies, start the development server by running the following command:
npm start
-
Open a web browser and navigate to
http://localhost:3000
to access the Ticket Booking App. -
Fill out the ticket booking form with your details, including name, departure address, destination address, departure time, and date.
-
Click the "Confirm" button to book a new ticket.
-
Booked tickets will appear in the ticket list below the form, displaying the ticket holder's name, departure and destination addresses, departure time, and date.
-
To edit a ticket, click the "Edit" button on the corresponding ticket card. Make the necessary changes in the form fields and click the "Confirm Changes" button.
-
To delete a ticket, click the "Delete" button on the corresponding ticket card.
-
User feedback alerts will appear upon successful booking or changes.