JourneyJive

JourneyJive is a travel agency website offering a range of travel-related services, including holidays, destinations, city breaks, travel lists, and more. The site provides users with a smooth browsing experience, attractive UI, and various dynamic features to explore travel-related content.

🚀 Live Preview: JourneyJive

---

Features

• 🎯 Interactive Navigation Bar
  A responsive and user-friendly navigation bar, designed to help users easily navigate between different sections like Home, Holidays, City Breaks, Destinations, and more.

• 📱 Responsive Design
  Optimized for mobile and desktop devices, ensuring the best user experience across all platforms.

• 🌍 Holiday and City Breaks
  Information on holidays and city breaks with easy-to-browse packages, details, and pricing.

• 📋 Travel List Management
  A unique "Far Away" component allows you to create a to-do list for your trip. You can add tasks, delete completed ones, and track the percentage of completed items.

• 🛍️ Booking and Contact Pages
  Easy booking interface and contact details to get in touch with the team.

• 📑 Mega Menu
  A detailed and user-friendly mega menu with access to all the important pages like Terms, Privacy Policy, FAQs, etc.

• 👇 Customizable Footer
  A clean footer that contains useful links like social media, contact information, and payment methods.

• 👨‍👩‍👧‍👦 Tour Guides and Feedback
  Access to tour guide information and feedback from other travelers to help you make informed decisions.

• 🔍 Search Functionality
  A search bar to help users quickly find information, destinations, or services they are looking for.

• ⭐ User Testimonials
  Display of user reviews and testimonials, making it easier for new users to trust and rely on the services.

• 💳 Payment Methods Integration
  Secure integration with popular payment methods like Visa, MasterCard, PayPal, and InstaPay for easy transactions.

• 🎨 Animated Elements
  Smooth animations using libraries like animate.css and framer-motion to improve the overall user experience.

• 🌐 Social Media and Payment Icons
  Displays major payment methods (Visa, MasterCard, PayPal, InstaPay) and links to social media platforms for enhanced trust.

• 🌀 SVG Animations
  Logo animations and rotating text for an engaging user interface.

• 🔐 User Authentication
  Authentication forms to ensure users can sign up, log in, and manage their profiles.

• 📱 Mobile-Friendly Forms
  Form components such as sign-up, login, and contact forms are optimized for mobile devices with form validation via Yup and Formik.

• 🌟 On-demand Content Fetching
  Components like Holiday Details and Travel List load content as needed, reducing unnecessary data fetches.

• ⚠️ Error Handling
  Graceful error handling for failed API requests or missing pages, improving user experience.

• 📈 SEO Optimization
  The website has basic SEO optimizations for better discoverability by search engines.

• 🌐 Cross-Browser Compatibility
  The site is designed to work seamlessly across all major browsers.

• 🚫 Offline Detection
  With react-detect-offline, users are informed if they lose internet connection, enhancing accessibility.

• 📍 Sticky Navigation
  The navigation bar remains fixed at the top as users scroll down, providing easy access to the menu.

• 📝 User Feedback
  Provides a Feedback section for users to leave comments and reviews, increasing interaction.

• 📚 Blog Integration
  A blog section with dynamic loading of posts and the ability to add new content for the community.

• 🏖️ Holiday Booking
  Users can explore and book holidays through various travel packages listed on the website.

• 🔒 Privacy and Terms Pages
  Dedicated pages outlining privacy policy and terms of use for legal transparency.

---

Technologies Used

Here are the key technologies used in the project:

• React.js - JavaScript library for building user interfaces
• React Router - For routing and navigation within the app
• React Query - Data fetching and synchronization
• Formik - Form handling and validation
• Yup - Schema validation for forms
• Fetch API - Native JavaScript API for making HTTP requests
• Bootstrap - Front-end framework for responsive design
• React Bootstrap - Bootstrap components built with React
• Font Awesome - Icons for enhanced user experience
• Framer Motion - Animation library for interactive UIs
• React Scroll - For smooth scrolling effects
• Slick Carousel - Carousel component for image slideshows
• Web Vitals - Performance monitoring library for tracking web vitals

---

Installation

To run the project locally, follow these steps:

1. Clone the repository: git clone https://github.com/SaraReda8/JourneyJive.git 2-Navigate to the project directory: cd JourneyJive 3-Install the dependencies:npm install 4-Start the development server:npm start