stayVista-starter-template

• Live Site

Important Links:

• StayVista Part 1
• StayVista Part 2
• StayVista Part 3
• StayVista Part 4 (Complete)
• StayVista Resources
• Project Requirement Doc

Topics Covered in each session:

Part 1 (03/02/2026):

• Introduction & Project overview.
• Starter Template Setup
• Setup MongoDB and upload fake json data in MongoDB.
• Setup server side & define get route for fetching all rooms data from db.
• Category Filter section in Homepage.
• TanStack Query Implementation.
• Room Details Page.
• react-date-range package implementation in Room Details Page.
• Registration Page & Functionality.
• Image upload using api (IMGBB).
• Login Page & Functionality.

Part 2 ():

• Dashboard Layout
• Add Room Page setup and functionality implement.
• My Listings Page setup and functionality implement.
• Save Registered users info in db.
• Become a host api request implement.
• Calendar issue fix in Room Details Page.

Part 3 ():

• useRole Hook.
• Profile Page.
• Manage Users Page.
• Sidebar modifications.
• Secure client and server routes.
• Become a host Button functionality.
• Booking modal and routes in dasboard.

Part 4 ():

• Payment system (Stripe).
• Email Sending (NodeMailer).
• Statistics Page in Dashboard.
• Update Room Functionality.

Packages and api docs used in this project:

• Stripe Website
• Stripejs Github
• Stripejs Documentation
• @stripe/react-stripe-js
• Resend Email
• @headlessui/react
• IMGBB Api
• @tanstack/react-query
• axios
• date-fns
• query-string
• react-date-range
• react-helmet-async
• react-hot-toast
• react-icons
• react-router-dom
• react-spinners
• @stripe/stripe-js
• firebase
• react-google-charts