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

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

What to Submit

• Assignment Category: Sunflower

• Your client-side code GitHub repository link : https://github.com/programming-hero-web-course2/b10-a10-client-side-DeveloperMonirBD

• Your server-side code GitHub repository link: https://github.com/programming-hero-web-course2/b10-a10-server-side-DeveloperMonirBD

• Live link to the deployed project : https://visa-navigator-bb0c9.web.app