A modern, full-stack web application for streamlined visa browsing, application management, and progress tracking — designed to make every step of the visa journey simple, organized, and stress-free.
Viso is a visa navigator portal that brings clarity and control to the visa application process. Users can browse all available visa types, view detailed requirements, submit applications, add new visa entries, and manage everything from a personalized dashboard — all backed by Firebase authentication and a RESTful backend API.
Where every visa journey begins with confidence.
| Feature | Description |
|---|---|
| Browse All Visas | Explore a comprehensive catalog of available visa types with filtering and search capabilities |
| Detailed Visa View | View complete visa information including requirements, processing time, fees, and eligibility criteria |
| Add Visa | Authenticated users can contribute new visa entries to the platform database |
| My Visas | Manage and track all visa entries you've added to the system from a personal dashboard |
| My Applications | View and manage all visa applications you've submitted in one organized place |
| Feature | Description |
|---|---|
| Email/Password Auth | Register and sign in with email credentials powered by Firebase Authentication |
| Google OAuth | Quick one-click sign-in using Google account via Firebase |
| Protected Routes | Visa details, add visa, my visas, and applications pages are secured behind private routes |
| Profile Display | Logged-in users see their profile photo and name with a sign-out dropdown |
| Feature | Description |
|---|---|
| Responsive Design | Fully optimized for mobile, tablet, and desktop viewports using Tailwind CSS |
| Interactive Carousels | Swiper-powered sliders for dynamic banner and content presentation |
| Reveal Animations | Smooth entrance animations powered by react-awesome-reveal |
| Typewriter Effects | Engaging text animations using react-simple-typewriter |
| Toast Notifications | User-friendly feedback through react-toastify alerts |
| Sweet Alerts | Beautiful confirmation dialogs via sweetalert2 for critical actions |
| Technology | Version | Purpose |
|---|---|---|
| React | ^18.3.1 | Component-based UI development |
| JavaScript | ES6+ | Application logic and interactivity |
| Vite | ^6.0.1 | Lightning-fast dev server and build tooling |
| Firebase | ^11.0.2 | Authentication and user management |
| React Router DOM | ^7.0.2 | Declarative client-side routing |
| Tailwind CSS | ^3.4.16 | Utility-first CSS framework |
| DaisyUI | ^4.12.14 | Tailwind-based UI component library |
| Swiper | ^11.1.15 | Touch-enabled slider and carousel |
| React Awesome Reveal | ^4.2.14 | Scroll-triggered reveal animations |
| React Simple Typewriter | ^5.0.1 | Typewriter text animation effects |
| React Toastify | ^10.0.6 | Toast notification system |
| SweetAlert2 | ^11.14.5 | Beautiful alert and confirmation dialogs |
| React Icons | ^5.4.0 | Popular icon sets as React components |
┌─────────────────────────────────────────────────────────────┐ │ Browser │ ├─────────────────────────────────────────────────────────────┤ │ React App (Vite) │ │ ┌───────────┐ ┌──────────────┐ ┌──────────────────────┐ │ │ │ Layout │ │ React │ │ Auth Provider │ │ │ │ (Navbar+ │◄─┤ Router │ │ (Firebase Context) │ │ │ │ Footer) │ │ (Public + │ │ │ │ │ │ │ │ Private) │ │ • Login / Register │ │ │ └───────────┘ └──────┬───────┘ │ • Google OAuth │ │ │ │ └──────────────────────┘ │ │ ┌────────▼────────┐ │ │ │ Pages │ │ │ │ Home │AllVisas │ │ │ │ AddVisa│MyVisas│ │ │ │ MyApplications │ │ │ │ VisaDetails │ │ │ └────────┬────────┘ │ │ │ │ │ ┌────────▼────────┐ │ │ │ Components │ │ │ │ Banner│ Cards │ │ │ │ Slider│ Forms │ │ │ └─────────────────┘ │ ├─────────────────────────────────────────────────────────────┤ │ Backend API: https://server-one-ashen-40.vercel.app │ │ Database: MongoDB (via Vercel serverless functions) │ └─────────────────────────────────────────────────────────────┘
milestone-10-client/
│
├── index.html # HTML entry point
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
│
├── public/ # Static assets
│ └── assets/ # Images, icons, banners, and media
│
└── src/
├── main.jsx # React DOM entry point
├── App.jsx # Root application wrapper
├── index.css # Global styles and Tailwind directives
│
├── Layout/ # Shared layout (Navbar + Footer)
├── Routes/ # Route config and private route guard
│
└── Components/
├── Auth/ # Firebase authentication (Login, Register, OAuth, Context)
├── Home/ # Landing page sections (Banner, Cards, About, Category, Process)
├── AllVisas/ # Browse visas, individual visa details
├── AddVisa/ # Add new visa form
├── MyVisas/ # User's added visas dashboard
└── MyApplications/ # User's submitted applications
| Requirement | Details |
|---|---|
| Node.js | v18 or higher recommended |
| npm | Comes bundled with Node.js |
| Firebase Project | Required for authentication features |
| Modern Browser | Chrome, Firefox, Safari, or Edge |
# 1. Clone the repository
git clone https://github.com/zahid-official/milestone-10-visoClient.git
# 2. Navigate to the project directory
cd milestone-10-client
# 3. Install dependencies
npm install
# 4. Set up environment variables (see section below)
# 5. Start the development server
npm run devThe application will be available at http://localhost:5173 by default.
Create a .env.local file in the project root with the following Firebase credentials:
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_project.firebaseapp.com
VITE_projectId=your_project_id
VITE_storageBucket=your_project.appspot.com
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_idNote: All environment variables must be prefixed with
VITE_for Vite to expose them to the client bundle. Never commit.env.localto version control.
| Command | Description |
|---|---|
npm run dev | Start the Vite development server with HMR |
npm run build | Create an optimized production build |
npm run preview | Preview the production build locally |
npm run lint | Run ESLint to check for code quality issues |
User lands on Home ──► Browses Visa Catalog ──► Selects a Visa
│
┌───────────────────────┘
▼
Route requires auth?
┌──── Yes ────┐
▼ ▼
Not logged in Logged in
│ │
▼ ▼
Redirect to View Visa
Login Page Details
│ │
▼ ▼
Authenticate Apply for Visa
(Email/Google) (Submit Application)
│ │
▼ ▼
Return to ────► Manage Dashboard
Visa Page (My Visas & Applications)
- Landing — Users explore the platform overview, featured visas, categories, and the application process on the home page.
- Visa Browsing — All available visas are rendered dynamically from the backend API with filtering support.
- Authenticated Access — Selecting a visa to view details triggers a private route; unauthenticated users are redirected to sign in.
- Visa Details & Application — Users can view complete visa information and submit applications directly from the details page.
- Dashboard Management — Users can add new visas, manage their added entries, and track submitted applications from dedicated dashboard pages.
Web Developer | Tech Enthusiast
Creating impactful digital experiences with passion and purposeful design
Contributions are welcome and appreciated! Here's how you can help improve Viso:
# 1. Fork the repository
# 2. Create a feature branch
git checkout -b feature/your-feature-name
# 3. Make your changes and commit
git commit -m "feat: add your feature description"
# 4. Push to your fork
git push origin feature/your-feature-name
# 5. Open a Pull Request against the main branchViso — Where every visa journey begins with confidence and clarity.