React Node.js Booking App Full Tutorial | MERN Stack Reservation App (JWT, Cookies, Context API)
In this tutorial, we will be building a booking app using the MERN stack – MongoDB, Express, React, and Node.js. We will also be implementing JWT (JSON Web Tokens) for authentication, cookies for session management, and the Context API for state management.
Introduction
The MERN stack is a popular choice for building full-stack web applications. It combines the power of MongoDB for the database, Express.js for the backend framework, React for the frontend, and Node.js for the backend runtime environment.
In this tutorial, we will be creating a booking app where users can reserve slots for various activities or services. Users will be required to sign in to make a reservation, and their authentication will be handled using JWT and stored as a session cookie.
We will be using React for the frontend, where users can view available slots, select a slot, and make a reservation. The backend will be built using Node.js and Express, which will handle authentication and manage the reservations in the MongoDB database.
Technologies Used
- React: A JavaScript library for building user interfaces.
- Node.js: A JavaScript runtime environment for executing JavaScript code on the server.
- Express.js: A minimal and flexible Node.js web application framework.
- MongoDB: A document-oriented NoSQL database.
- JWT (JSON Web Tokens): A standard method for representing claims securely between two parties.
- Cookies: Small pieces of data stored on the client’s machine for session management.
- Context API: A React feature for managing global state.
Tutorial Outline
- Setting up the project structure and dependencies.
- Creating the backend using Node.js and Express.
- Configuring MongoDB and setting up a database.
- Implementing user authentication using JWT and cookies.
- Creating the frontend using React and setting up routes.
- Building the booking app’s user interface.
- Integrating the frontend with the backend for making reservations.
- Managing state using the Context API.
- Testing and deploying the application.
Conclusion
By following this tutorial, you will have built a complete booking app using the MERN stack, incorporating JWT authentication, cookies for session management, and the Context API for state management. This project will provide you with hands-on experience with the most popular technologies used in modern web development.
Feel free to continue enhancing the app by adding more features such as payment integration, email notifications, or user reviews. Happy coding!
Hi friends, I checked your comments in the previous video. And majority of people wanted Node.js and MongoDb as backend. However, that doesn't mean we won't build other apps using different technologies. Let me know in the comments what else you'd like to see for the next projects. Love ya <3
what is name the theme vscode please??
@LamaDev I have a problem in 1:54:40 it cant load list of hotels but in the console showing everything find. it seem this code is not working when doing the data,map like this
{loading ? (
"loading"
) : (
<>
{data.map((item) => (
<SearchItem item={item} key={item._id} />
))}
</>
)}
Images are not showing in availability
Please I need your help thanks.
@LamaDev 1:06:56
i am getting an error at this timestamp in insomnia that says :
"success": false,
"status": 401,
"message": "You are not authenticated!",
"stack": "Error: You are not authenticated!n at createError
i have not been able to resolve this error since past 5 days . Can someone please please help me!!!!!
i have tried removing the cookie, setting expiration for token but it's still not working !
i would really appreciate it anyone helps me solve it asap!
did someone complete this project ?
Know pretty much about mern but a beginner though can I build this?
how about logout ? how about the jwt , i'm so confused
Hi Lama! I'm struggling with a problem: Insomnia seems not to send cookie when I try to to a GET request "verifyauthentication" and similar calls. I can see my token inside "cookie management" page, and even if "send cookie automatically to relevant requests" option is activated, iInsomnia does't send cookies. What could I do?
STUCK AT 2:54 ??? isAvailable() function wasn't disabling the checkbox. Fixed the some() function with this:
const isFound = roomNumber.unavailableDates.some((date, i)=>
allDates.includes(new Date(date[i]).getTime())
basically new Date(date).getTime(). was not returning a number to be compared with allDates.
let me know if it helps.
can you send the documentation for this project please?
How can i host this Project. Any free Sources
Did someone try to implement the update?
How to add first video content and this video content ? And make complete working website.
The limit does not work properly
>> localhost:8800/api/hotels?featured=true&limit=2&min=10&max=200
result get : [ ]
export const getHotels = async (req, res, next) => {
const { min, max, …others} = req.query.featured
try {
// const hotels = await Hotel.find({featured:req.query.featured}).limit(req.query.limit)
const hotels = await Hotel.find({…others,
cheapestPrice: { $gt: min | 1, $lt: max | 999 }
}).limit(parseInt(req.query.limit));
res.status(200).json(hotels);
} catch (err) {
next(err)
}
}
How can it work properly?
Can anyone tell how can we connect 2 frontend folders??
😢o
what about flight taxi etc?????
I am getting err is not defined error in insomnia during using verifyToken function in code please help me with that 1:09:53
Can you please do make a fullstack application using Laravel as the backend API and React frontend?
I am not able to get the link for the mongoDB connection
It does not contain the database name can you help me please 🙏