Visa Navigator

📜 Project Overview

Welcome to Visa Navigator, Visa Navigator is a comprehensive, user-friendly platform designed to simplify the visa application process for individuals worldwide. Whether users are planning to work, study, travel, or relocate, Visa Navigator provides personalized guidance, country-specific visa requirements, step-by-step application assistance, and real-time updates to ensure a seamless experience.

---

🚀 Live Links

• Client Repo: This repository serves as the main Visa Navigator platform and includes the frontend setup.
• Live Site: visa-navigator.com

---

🔍 React Concepts Used

• Components
• Hooks: useState, useEffect, useContext
• React Router: useParams, useLocation, useNavigate
• Conditional Rendering
• Context API for global state management

---

🛠️ Technologies Used

👩🏼‍💻 Frontend

• React
• Firebase
• Tailwind CSS
• DaisyUI
• React Router
• React Icons
• React Hot Toast
• React Hook Form
• JWT-based Authentication

｡🇯‌🇸‌ Backend

• Node.js
• Express.js

🛢️ Database

• MongoDB

---

✨ Key Features of Visa Navigator

• 📝 Personalized Visa Guidance: Users receive tailored visa recommendations based on their purpose (work, study, travel, or relocation). Provides a checklist of required documents specific to their visa type.
• 🌍 Country-Specific Visa Requirements Detailed visa policies and application procedures for different countries. Real-time updates on immigration rules, embassy guidelines, and deadlines.
• 🔄 Step-by-Step Application Assistance: A guided process for users to navigate through visa applications smoothly. Interactive progress tracking to monitor each stage of the application.
• 📢 Real-Time Updates & Notifications Alerts for deadline reminders, application status updates, and policy changes. Email and in-app notifications to keep users informed.
• 🔍 Smart Document Management Secure upload and storage of essential visa documents. Auto-validation to ensure all required documents are submitted correctly.ad
• 🖥 User-Friendly Interface: A clean, intuitive design optimized for both desktop and mobile devices. Multilingual support for users worldwide.
• User: Users can add visas for any country. After adding, they can update and delete as needed through a confirmation toast.

---

🧰 NPM Packages Used

• "@emotion/react": "^11.13.5",
• "animate.css": "^4.1.1",
• "aos": "^2.3.4",
• "firebase": "^11.0.2",
• "localforage": "^1.10.0",
• "lottie-react": "^2.4.0",
• "match-sorter": "^8.0.0",
• "react": "^18.3.1",
• "react-awesome-reveal": "^4.2.14",
• "react-countup": "^6.5.3",
• "react-dom": "^18.3.1",
• "react-icons": "^5.4.0",
• "react-loader-spinner": "^6.1.6",
• "react-responsive-carousel": "^3.2.23",
• "react-router-dom": "^7.0.2",
• "react-simple-typewriter": "^5.0.1",
• "react-toastify": "^10.0.6",
• "react-tooltip": "^5.28.0",
• "sort-by": "^1.2.0",
• "sweetalert2": "^11.14.5",
• "swiper": "^11.1.15"

---

🛠 Installation

Prerequisites

• Node.js and npm installed
• MongoDB connection string

---

Client Side Setup

1. Clone the client-side repository:

   git clone https://github.com/shorifulbd1st/Visa-Navigator-Portal.git
   cd Visa-Navigator-Portal

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   VITE_apiKey=................................
   VITE_authDomain=................................
   VITE_projectId=................................
   VITE_storageBucket=................................
   VITE_messagingSenderId=................................
   VITE_appId=................................
   

   Note: Replace the VITE_API_KEY and VITE_AUTH_DOMAIN, along with other placeholders, with actual values.

Server Side Setup

1. Clone the server-side repository:

   git clone https://github.com/shorifulbd1st/Visa-Navigator-Portal-Server.git
   cd Visa-Navigator-Portal-Server

2. Install dependencies:

   npm install

3. Start the server:

   node index.js

   --- OR ---

   nodemon index.js

4. Open the project in a code editor:

   code .

5. Add the .env file in the root directory and include the following environment variables:

   DB_USER=..........................................
   DB_PASS=..........................................

   Note: Replace the index.js file's mongo_uri and the .env file's DB_USERand DB_PASS.

🧑‍💻 Authors

• Shoriful Islam (Lead Developer)
• Lead Developer & Maintainer
• Connect with me on GitHub & Facebook