Skip to content

Latest commit

 

History

History
105 lines (75 loc) · 3.87 KB

README.md

File metadata and controls

105 lines (75 loc) · 3.87 KB

Travel World

Website URL: https://b10-a10-projects.web.app

Main Technologies Used:

  • Front-End: React, Tailwind CSS,
  • Back-End: Node.js, Express.js, MongoDB
  • Tools: Axios, Firebase.

🌟 Features of the Website

  1. Protected Routes

    • 🛡️ The navigation bar contains five routes (excluding "Home").
    • 🔒 Users must log in to access data on routes other than "Home."

  2. Homepage Design

    • 🎯 A banner or slider is featured at the top of the homepage.
    • 🖼️ Includes an extra section below the banner.
    • 🗂️ Displays a list of visas.
    • ➕ Another extra section is included below the visa list.
    • 📄 The page ends with a footer.

  3. Firebase Integration

    • 🔥 Firebase is used for authentication.
    • 💾 MongoDB is used to store data.
    • NPM Frameworks and Libraries Used
    • 📝 React-simple-typewriter
    • 🎥 Lottie React
    • 💡 React Icons

  4. Visa Features

    • 🛂 Clicking on "Add Visa" navigates to the "Add Visa" route, where users can create visas by filling in detailed information.
    • 🏠 Home and "My Added Visas" sections display created visas. All Visas Route
    • 📂 Displays four categories of visas, organized by type.
    • 🗂️ Clicking on a category shows all visas under that category.

  5. My Added Visas Route

    • ✅ Displays all visas created by the user.
    • 🗑️ Includes "Delete" and "Update" buttons for managing visas.

  6. My Visa Application Route

    • 📋 Shows all visas the user has applied for.
    • ❌ A "Cancel" button allows the user to cancel any visa application. 🔍 A search input lets users search visas by country name.
    • 📦 Libraries and Tools Implemented
    • 🎥 Lottie React: Used for animations to enhance user experience.
    • 📝 React-simple-typewriter: Used for dynamic text effects.

Project Dependencies

This project uses the following npm packages for its functionality:

Core Libraries

- **react (`^18.3.1`)**: A JavaScript library for building user interfaces.
- **react-dom (`^18.3.1`)**: Provides DOM-specific methods for React.

Routing

- **react-router-dom (`^7.0.2`)**: Enables routing for single-page applications in React.

Animations

  • @lottiefiles/react-lottie-player (^3.5.4): A library to embed and control Lottie animations in React.
  • framer-motion (^11.16.0): A library for declarative animations and gestures in React.
  • lottie-react (^2.4.0): Another library to render and manipulate Lottie animations.

Styling

  • @material-tailwind/react (^2.1.10): Tailwind CSS components for building modern UIs.
  • swiper (^11.2.0): A modern touch slider for implementing carousels and sliders in React.

UI Enhancements

  • react-icons (^5.4.0): A library of popular icon sets for React.
  • react-responsive-carousel (^3.2.23): A carousel component optimized for responsive designs.

Notifications

  • react-toastify (^10.0.6): A library for customizable toast notifications.
  • sweetalert2 (^11.14.5): A library for creating beautiful and responsive popup alerts.

State Management & Storage

  • localforage (^1.10.0): A library for offline storage using IndexedDB, WebSQL, or localStorage.

API & Data Handling

  • axios (^1.7.9): A promise-based HTTP client for making API requests.

Utilities

  • match-sorter (^8.0.0): A utility for fuzzy matching and sorting arrays.
  • sort-by (^1.2.0): A simple utility for sorting objects by key or property.

Typing Effects

  • react-simple-typewriter (^5.0.1): A library for creating typewriter animations in React.

Firebase

  • firebase (^11.0.2): Provides backend services such as authentication, database, and cloud storage.

Installation

To install all the dependencies, run:

npm install