TrailBliss

Let's bring yourself close to Nature

---

TrailBliss is a Echo Friendly Travel Adventure blog where nature Lovers can find their right place to tak a break from this carnival of rust, Here user can choose their packages by get to know every details about it, Even our Experts are always ready to support them from 10:00AM to 8:00PM

Purpose

To help people to live the life fullest without harming the Nature,WE do provide guidance and love to both nature and Humanity cause we believe in the balance of Nature.Our purpose is to inspire nature lovers to explore the world responsibly. By offering eco-friendly travel adventures, we promote sustainable tourism, protect natural habitats, and encourage a deep connection with nature. We aim to provide unforgettable experiences while ensuring the preservation of our planet for future generations.

Key Features

• In this website user can choose packages by checking all details and with Consultancies.
• If they failed to get into the time frame, they can save a reminder appointment on their own profile page
• Of course only logged in user will got the chance to scheduled up appointments and to know more about the details of packages.
• It might be confusing to you cause whenever you will try to see details or browse to any personal route you will redirect to login page straight, No worries simple signUp can solve your all issues..
• User can be logged in by any anonymous email and password.
• Or can Select Google Login.
• And only Logged in user will have the access to reset his password and have the access to update his picture and Name.
• Reset password will direct the user to his Gmail Page.
• User who has already an account can be Signed in by choosing the SignUp option.
• And signed in user can see their previous appointments reminder just under their Profile details if they have any.
• On Clicking on Explore more button signed in user will be redirect to the details page.
• Between 10am to 8pm user can talk with our experts and after 8pm he can save a reminder appointment with us.
• We appreciate your time and decision so you can remove your apps anytime if you want.
• This website also have an Admin panel, where admin can see all the remaining appointments, we do respect your queries so even our Admin don't have the access to remove any other apps rather then his own apps.

Firebase Authentication

• This Project is Secured by Google Firebase. Here you will found few firebase Features like
  • signInWithPopup for Google
  • createUserWithEmailAndPassword()
  • signInWithEmailAndPassword()
  • updateUserProfile()
  • resetPasswordEmail()
  • signOut()
  • onAuthStateChanged()

React-Router-DOM

• To get the Single page layout we used React-Router-Dom and its built in Components and Hooks...
  • createBrowserRouter
  • routerProvider
  • useLoaderData()
  • useOutletContext()
  • useLocation()
  • useNavigate()
  • <Navigate/>
  • useParams()
  • useRouterError()
  • <Link>
  • <NavLink/>
  • and few mentionable process to handle the Data like passing state from one component to another by using the property of <Navigate state/> Navigate component and handling it with useLocation hook.
  • To focus on default route I used <Navigate to="path" replace> in the path of index:true.
  • To Get the value from users input I used dynamic path:"/path/:value?" to avoid the 404 error,
  • Dynamic routes and useParams hook to share and grab single value to sanitize data

React features

• In this react based project Rookie level project 🙂 I implemented few basic React basics
  • JSX concepts
  • Props Drilling to Child Components light way
  • useSate() to preserve , serve and set the data based on simple javascript conditions.
  • useEffect() to handle side effects,
  • running useEffect() on state change,
  • execute useEffect() based on props,
  • execute useEffect() once when component mounts,
  • Execute useEffect() based on multiple dependencies,
  • handling input values in more controlled way,
  • useContext() Context API to serve the data and to avoid prop drilling into deeply nested Components
  • Custom Hook,
  • Few mentionable methods of Javascript like most favorite array methods
  • map(),
  • flatMap(),
  • filter(),
  • find()
  • .popular object methods like
    • .some(), and so on like
    • includes(),
    • toUpperCase(),
    • split(),
    • join(),
    • Date(),
    • getHours(),
    • window.open(),
    • slice(),
    • object
    • destructuring,
    • array
    • destructuring,
    • spread operations,
    • chain ternary
    • if else,
    • fetch(),
    • async function,
    • try catch block

npm Packages used in this Project

• AOS for scroll Animation
• Firebase for Authentication
• React-fast-marquee for Category Navbar
• React-icons for Icons
• React-slick for Carousel
• React-toastify for Alerts

---

Drawbacks and Limitations

• For Admin Panel
• Admin : ami@dmin.com
• Password : Ami@dmin123
• It's based on context driven data so reload will erase them all
• This project is responsive for Large, Medium and Small devices

---

Thanks for Reading

"Gratitude to the visionaries and creators who transform ideas into reality, weaving the endless possibilities of the digital world through the art of web development"

Visit this Website