Creating a ticket booking React app involves several steps. In this example, we’ll build a simple app where users can select a movie, choose a seat, and book tickets. We’ll use Redux Toolkit for state management. This example assumes you have set up a React app using Create React App and installed Redux Toolkit.
Overview:
- Objective:
- Create a simple ticket booking application in React with Redux Toolkit for state management.
- Key Features:
- Users can select a movie from a list.
- Users can choose seats for the selected movie.
- The app displays a booking summary with the selected movie and seats.
- Technologies Used:
- React: JavaScript library for building user interfaces.
- Redux Toolkit: Simplifies state management in React applications.
- Create React App: A tool to set up a new React project quickly.
Implementation Steps:
- Redux Slice (
bookingSlice.js
):- Created a Redux slice to manage the state related to the booking process.
- Defined actions (
selectMovie
,toggleSeat
,clearBooking
) and initial state.
- Redux Store (
store.js
):- Configured the Redux store using
configureStore
from Redux Toolkit. - Combined the reducer from the
bookingSlice
into the store.
- Configured the Redux store using
- React Components:
- MovieList (
MovieList.js
):- Displayed a list of movies.
- Allowed users to select a movie, triggering the
selectMovie
action.
- SeatSelector (
SeatSelector.js
):- Displayed a list of seats.
- Allowed users to toggle seat selection, triggering the
toggleSeat
action.
- BookingSummary (
BookingSummary.js
):- Displayed a summary of the selected movie and seats.
- Connected to the Redux store to retrieve the selected movie and seats.
- MovieList (
- App Integration (
App.js
):- Integrated the
MovieList
,SeatSelector
, andBookingSummary
components into the mainApp
component.
- Integrated the
- Connect to Redux Store (
index.js
):- Wrapped the
App
component with theProvider
fromreact-redux
to connect it to the Redux store.
- Wrapped the
- Styling:
- Applied basic styles to components to enhance the visual presentation of the app.
- Run the App:
- Ran the React app using
npm start
. - Users can visit
http://localhost:3000
to interact with the ticket booking app.
- Ran the React app using
Extend the app by adding more features, such as payment processing, user authentication, or additional movie details.
Implement further styling and improve the user interface.
Enhance the app’s responsiveness for a better user experience on different devices.
This overview provides a snapshot of the ticket booking React app, and you can customize and expand it based on your specific requirements and preferences
Step 1: Set Up the Redux Store and Slice
Create a bookingSlice.js
file for your Redux slice:
// bookingSlice.js
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
selectedMovie: null,
selectedSeats: [],
};
const bookingSlice = createSlice({
name: 'booking',
initialState,
reducers: {
selectMovie: (state, action) => {
state.selectedMovie = action.payload;
},
toggleSeat: (state, action) => {
const seatIndex = state.selectedSeats.indexOf(action.payload);
if (seatIndex === -1) {
state.selectedSeats.push(action.payload);
} else {
state.selectedSeats.splice(seatIndex, 1);
}
},
clearBooking: (state) => {
state.selectedMovie = null;
state.selectedSeats = [];
},
},
});
export const { selectMovie, toggleSeat, clearBooking } = bookingSlice.actions;
export default bookingSlice.reducer;
Step 2: Configure the Redux Store
Create a store.js
file to configure the Redux store:
// store.js
import { configureStore } from '@reduxjs/toolkit';
import bookingReducer from './bookingSlice';
export const store = configureStore({
reducer: {
booking: bookingReducer,
},
});
Step 3: Create React Components
Now, you can create React components for your app. Below is a simple example:
// MovieList.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { selectMovie, clearBooking } from './bookingSlice';
const movies = [
{ id: 1, title: 'Movie 1' },
{ id: 2, title: 'Movie 2' },
// Add more movies as needed
];
const MovieList = () => {
const dispatch = useDispatch();
const handleSelectMovie = (movie) => {
dispatch(selectMovie(movie));
};
return (
<div>
<h2>Movie List</h2>
<button onClick={() => dispatch(clearBooking())}>Clear Booking</button>
<ul>
{movies.map((movie) => (
<li key={movie.id} onClick={() => handleSelectMovie(movie)}>
{movie.title}
</li>
))}
</ul>
</div>
);
};
export default MovieList;
SeatSelector.js
// SeatSelector.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { toggleSeat } from './bookingSlice';
const seats = ['A1', 'A2', 'A3', 'B1', 'B2', 'B3', 'C1', 'C2', 'C3'];
const SeatSelector = () => {
const dispatch = useDispatch();
const selectedSeats = useSelector((state) => state.booking.selectedSeats);
const handleToggleSeat = (seat) => {
dispatch(toggleSeat(seat));
};
return (
<div>
<h2>Seat Selector</h2>
<ul>
{seats.map((seat) => (
<li
key={seat}
onClick={() => handleToggleSeat(seat)}
className={selectedSeats.includes(seat) ? 'selected' : ''}
>
{seat}
</li>
))}
</ul>
</div>
);
};
export default SeatSelector;
BookingSummary.js
// BookingSummary.js
import React from 'react';
import { useSelector } from 'react-redux';
const BookingSummary = () => {
const selectedMovie = useSelector((state) => state.booking.selectedMovie);
const selectedSeats = useSelector((state) => state.booking.selectedSeats);
return (
<div>
<h2>Booking Summary</h2>
<p>Selected Movie: {selectedMovie ? selectedMovie.title : 'None'}</p>
<p>Selected Seats: {selectedSeats.join(', ') || 'None'}</p>
</div>
);
};
export default BookingSummary;
Step 4: Integrate Components in App.js
Now, integrate these components in your App.js
:
// App.js
import React from 'react';
import MovieList from './MovieList';
import SeatSelector from './SeatSelector';
import BookingSummary from './BookingSummary';
function App() {
return (
<div>
<MovieList />
<SeatSelector />
<BookingSummary />
</div>
);
}
export default App;
Step 5: Connect the App to Redux Store
Wrap your App
component with the Provider
to connect it to the Redux store in index.js
:
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Step 6: Style the App
You can add some basic styles to your components to make the app visually appealing.
Step 7: Run Your App
npm start
Summary:
We’ve created a simple ticket booking React app using Redux Toolkit for state management. Here’s a quick overview of the key steps and components:
Redux Slice (bookingSlice.js
):
- Created a Redux slice to manage the state related to the booking process.
- The slice includes actions like
selectMovie
,toggleSeat
, andclearBooking
. - It defines the initial state with
selectedMovie
andselectedSeats
.
Redux Store (store.js
):
- Configured the Redux store using
configureStore
from Redux Toolkit. - Imported and combined the reducer from the
bookingSlice
into the store.
React Components:
- MovieList (
MovieList.js
):- Displays a list of movies.
- Allows users to select a movie, triggering the
selectMovie
action.
- SeatSelector (
SeatSelector.js
):- Displays a list of seats.
- Allows users to toggle seat selection, triggering the
toggleSeat
action.
- BookingSummary (
BookingSummary.js
):- Displays a summary of the selected movie and seats.
- Connects to the Redux store to retrieve the selected movie and seats.
App Integration (App.js
):
Integrated the MovieList
, SeatSelector
, and BookingSummary
components into the main App
component.
Connect to Redux Store (index.js
):
Wrapped the App
component with the Provider
from react-redux
to connect it to the Redux store.
Run the App:
- Ran the React app using
npm start
. - Users can visit
http://localhost:3000
to interact with the ticket booking app.