WanderNest - Tour Booking App
Overview
Full-featured tour booking platform for a travel agency. Users can explore destinations, view details, and book tickets seamlessly with secure payment integration. While admins can manage tours, availability, and bookings through a powerful admin panel.
Features
Interactive tour catalog with filters
Secure booking flow with Stripe
Google Login for easy user authentication
Account section to see booking history and reviews on confirmed bookings
Payment resume feature in account section in case of failed transactions or users abandoning the flow
Supabase edge function to handle stripe webhooks for booking confirmation and payment status updates
Caching and (almost) real-time updates through redis cloud
Detailed tour page including multiple tour options, image carousel, description, reviews and ratings
Cart functionality for saving items before checkout
Coupons Functionality for discounts and promotions
Collections feature to group tours into categories like 'Best of Canada'
Contact Us page with email contact form
Confirmation email through resend on booking confirmation
Admin panel for managing tours, availability, bookings and other content of website like cities, collections, coupons, categories, hero sections, etc.
Bookings data export to Excel file for offline analysis and record-keeping
Front website deployed on Render and supabase served handled auth, database and storage needs of the project
Built with
Challenges & Solutions
Problem
Caching and real-time updates for bookings data
Solution
I was using pure supabase queries in my loaders which was causing performance issues. So i switched to using redis cloud for caching the data and my supabase load was also decreased around 85%.
Problem
Wrong deployment environment
Solution
At first i deployed this project front website on vercel but it was not suitable because vercel has cold starts but the react router framework works best with a persistent server environment. So i switched to render which has much better performance for this type of project and it solved all the performance issues and made the website much more responsive and faster. Moreover moving to render was also the best option because of redis cache which also needs a persistent server environment to work effectively and provide real-time updates.
Problem
Handling edge cases in payment flow
Solution
I implemented a payment resume feature in the account section which allows users to resume their payment in case of failed transactions or if they abandon the flow. This was done by saving the booking data in the database and allowing users to retry the payment from their account section. Moreover admins are also provided with the functionality to manually send the payment link to resume the failed or forgotten payment to confirm the booking.
Problem
Handling payment status updates in real-time
Solution
I used supabase edge functions to handle stripe webhooks for booking confirmation and payment status updates. This allowed me to update the booking status in real-time and provide a better user experience.
Problem
Exporting bookings data to Excel file
Solution
I implemented a feature in the admin panel that allows admins to export bookings data to an Excel file for offline analysis and record-keeping. This was done using the 'xlsx' library which provides an easy way to generate Excel files from JavaScript.
Problem
Multiple tour options decision
Solution
A tour can have multiple options with their different pricing per participants and availability. That is why, I implemented the database design where each tour can have one or more tour options and each tour option has its own pricing and availability. This allowed me to provide a better user experience and also made it easier to manage the tours and their options in the admin panel.
Problem
Available booking capacity check
Solution
I implemented checks to ensure available booking capacity for each tour before allowing users to book a tour. This was done by querying the database for the number of available spots and comparing it with the number of bookings.