Skip to content

Latest commit

 

History

History
91 lines (54 loc) · 3.4 KB

README.md

File metadata and controls

91 lines (54 loc) · 3.4 KB

Assignment Category: Sunflower

Visa Navigator Portal

Overview

Visa Navigator Portal is a user-friendly platform designed to simplify the process of checking visa requirements, applying for visas, and tracking visa applications. The portal offers a seamless user experience with a dynamic interface, robust authentication, and responsive design, making it easy for users to navigate through visa information and manage their applications.

Features

  • Visa Information: Users can easily browse and check visa requirements for various countries, including processing time, fee, required documents, and more.
  • User Authentication: Secure login and registration using Firebase Authentication (including Google sign-in).
  • Add & Manage Visas: Users can add visa details and manage their own added visas.
  • Apply for Visas: Users can apply for visas by submitting their details and tracking their visa applications.
  • Responsive Design: Fully responsive, ensuring a smooth experience on mobile, tablet, and desktop devices.
  • CRUD Operations: Create, Read, Update, and Delete visa data with intuitive interactions.

Technologies Used

Frontend:

-   React.js
-   React Router
-   Firebase Authentication (for login & registration)
-   Axios (for API calls)
-   React Toastify/sweetalert2 (for notifications)
-   Lottie (for animations)
-   CSS/SASS or Tailwind CSS (for styling)

Backend:

-   Node.js
-   Express.js
-   MongoDB (for storing visa data and applications)
-   Firebase for user authentication

Key Pages

  1. Home Page: Displays a slider with meaningful information, latest visa cards, and two extra sections.

  2. Visa Details: View detailed information about a specific visa and apply for it.

  3. Add Visa: A private page to add new visa data (only for logged-in users).

  4. All Visas: Browse all visas added by all users with filtering options.

  5. My Added Visas: View and manage visas that the user has added (including the option to update or delete them).

  6. My Visa Applications: Track the user's visa applications, with the option to cancel an application.

  7. Login and Register: User authentication with email/password and Google sign-in.

Challenges Implemented

  1. Visa Type Filter: Dropdown filter on the "All Visas" page to filter visas by type.

  2. Search Functionality: Search by country name on the "My Visa Applications" page.

  3. Theme Toggle: Dark/Light theme toggle on the home page.

  4. Animations: Lottie and React Awesome Reveal for engaging animations.

Getting Started

Prerequisites

  • Node.js and npm installed on your machine.
  • Modern web browser (Chrome/Edge) with support for the Web Speech API.

Installation

  1. Clone the repository: https://github.com/programming-hero-web-course2/b10-a10-client-side-DeveloperMonirBD.git

  2. Install the dependencies: bash npm install

  3. Start the development server:

bash npm start

  1. Open your browser and navigate to https://visa-navigator-bb0c9.web.app to view the application.

What to Submit