BanAir is a MERN-stack travel airline agency website template that pairs a Next.js 13 frontend with an Express.js backend to deliver tour packages, flight search, and separate admin and user dashboards.
What is BanAir?
BanAir is a full-stack travel booking platform built with MongoDB, Express, React (via Next.js), and Node. It provides two role-based dashboards: an admin dashboard for managing packages, users, bookings, and testimonials, and a user dashboard for managing bookings, feedback, and profile settings. Demo credentials are provided in the README for both roles, and the live site is deployed at https://banair.vercel.app/.
Key Features
- Role-based dashboards — After login, users are redirected to either an admin or user dashboard depending on their role; each dashboard includes an overview page summarizing recent activity.
- Tour package management — Admins can add, view single or all, update, and delete packages; users can view package details from a card by clicking the View Details button and book them through a booking form.
- Flight search with real airport data — The site includes a flight search feature that queries real airport data and shows real-time aviation flight details.
- Package filtering and pagination — The Our Packages page offers a search bar, checkbox category filters, a price slider, package-type filtering, and pagination to narrow down options.
- Dynamic testimonial system — Users can submit feedback and view it publicly, while admins can manage testimonials from the admin dashboard.
- Authentication stack — Firebase handles authentication, NextAuth enables social login, and Axios manages API requests; Redux Toolkit and react-redux handle state.
- UI and form toolkit — The interface is styled with Tailwind CSS and Flowbite, with react-hook-form for form handling, slick-carousel for carousels, react-toastify for notifications, react-table for data tables, and react-countup for animated numbers.
Who is it for?
- Travel and airline agencies that want a production-ready website with package listings, a booking flow, and an admin panel to process requests.
- MERN stack developers looking for a complete reference project that demonstrates role-based authentication, CRUD operations, and dashboard routing.
- Startup teams building an air-ticket or tour-booking product who need a working starting point with separate admin and user experiences.
What can you do with BanAir?
- Admins: manage tour packages, accept or decline booking requests, manage user accounts and testimonials, and monitor activity on the overview page.
- Customers: search flights using airport data, browse packages, filter by category and price, submit bookings, track booking history, and update their profile.
- Developers: extend the project as a boilerplate for any booking platform, reusing the role-based redirect logic, package CRUD endpoints, and testimonial workflows.
How does BanAir work?
Clone the repository, run npm install, and then npm run dev to start the Next.js development server. The Express.js backend handles the API, Firebase and NextAuth manage authentication, and the provided admin and user credentials let you explore both dashboards immediately.
FAQ
What are the demo admin credentials?
The admin demo account is [email protected] with the password [email protected], as listed in the README.
What are the demo user credentials?
The user demo account is [email protected] with the password user123. You can also create a new account through the signup flow.
Is BanAir a Next.js or Express.js project?
BanAir is both: the frontend runs on Next.js and the backend is built with Express.js, making it a full MERN stack application.
Does BanAir support social login?
Yes, NextAuth is used for social login, and Firebase is used for the primary authentication system.
