Travel-Booking-Website (Voyawander)

Voyawander is a modern and intuitive travel booking platform built using the MERN stack. The website allows users to browse destinations, book hotels, flights, and confirm their bookings securely. Special features like email verification via OTP and PDF generation of booking details enhance the overall experience.

Snowflakes adorn the interface during the Christmas season, bringing festive cheer to users, with a toggle to enable or disable them. This project serves as a fun practice endeavor showcasing best coding practices, reusable components, and robust security mechanisms.

Voyawander - Explore the live site now!

---

Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Protected Routes
• Backend Security
• Stripe Payment Integration
• State Management
• Deployment
• Contact
• Screenshots

---

Features

• Responsive Design: Mobile-first responsive UI for seamless browsing.
• User Authentication: Secure login and signup using JWT tokens.
• Protected Routes: Access control based on user state.
• Email Verification: OTP-based email verification.
• Secure Payment: Stripe payment gateway integration (test mode).
• Booking Details PDF: Automated booking confirmation email with a detailed PDF attachment.
• Session Management: Leveraging sessionStorage for efficient state handling.
• Redis Caching: Temporary data storage for enhanced performance and security.
• Contact Form: Users can send inquiries through the contact form.
• Christmas Mode: Toggleable snowfall animation for seasonal celebrations.

---

Tech Stack

Frontend

• React.js (v18.3.1)
• Context API for state management
• React Router (v7.0.1)
• React Toastify for notifications
• React Icons for UI components
• React Snowfall for seasonal effects
• Axios for API integration

Backend

• Node.js with Express.js
• MongoDB with Mongoose
• Redis for caching OTPs and pre-payment data
• Bcrypt for password encryption
• JSON Web Tokens (JWT) for secure authentication
• Nodemailer for email services
• Stripe API for payment processing
• PDFKit for generating PDFs
• XSS for input sanitization

---

Installation

Prerequisites

• Node.js (v16 or higher)
• MongoDB database
• Redis server

Steps

Clone the Repository

$ git clone https://github.com/yourusername/voyawander.git
$ cd voyawander

Frontend Setup

$ cd frontend
$ npm install
$ npm start

Backend Setup

$ cd backend
$ npm install
$ npm start

---

Usage

Routes Structure

Frontend routes are protected to ensure proper access based on user state, if user don't have proper access then it will redirect to the Not found page.

---

Protected Routes

• Frontend routes are guarded using user and booking states.
• Backend routes are protected using JWT tokens and CORS policies.
• Validation is performed both on the client and server sides to ensure data integrity and prevent security vulnerabilities.

---

Backend Security

• Input Sanitization: XSS library ensures inputs are free from malicious scripts.
• Email Verification: OTPs stored temporarily in Redis for enhanced security.
• Encrypted Passwords: Bcrypt library secures user passwords.
• Secure Payment: Stripe handles payments in test mode with fake VISA card details.

---

Stripe Payment Integration

• Fully functional payment system using Stripe in test mode.
• Users can simulate transactions using provided test credentials.
• Payments are processed only for valid bookings; data is stored in MongoDB upon successful transactions.

---

State Management

• Context API for managing global state.
• Session storage used to persist data between hard refreshes, improving user experience.

---

Deployment

• Frontend: Vercel
• Backend: Render

---

Contact

For any questions or feedback, feel free to reach out:

• Email: voyawander@gmail.com

---

Screenshots

---

License

This project is licensed under the MIT License.

---