✈ VisaReady — Student Visa Checklist Assistant
Inspiration
As an international student preparing to move abroad for my Bachelor of Data Science, I experienced firsthand how overwhelming the visa application process can be. There are dozens of documents to gather, each with different requirements depending on your destination country and study level — and one missing item can delay or even reject your application.
I kept asking myself: "Why isn't there a simple tool that just tells me exactly what I need, and lets me track it?"
That question became VisaReady.
What It Does
VisaReady is a web application that helps international students manage their student visa application requirements through an interactive checklist system.
- Select your destination country (Australia, USA, UK)
- Select your study level (Undergraduate / Postgraduate)
- Get a personalized checklist grouped by document category
- Track your progress with a live progress bar and readiness percentage
- Ask the built-in Quick Help FAQ about confusing documents like SOP, OSHC, CoE, SEVIS, and more
- Your progress is saved in-session so you don't lose it on refresh
How I Built It
The stack was intentionally kept simple and beginner-friendly:
| Layer | Technology |
|---|---|
| Backend | Python · Flask |
| Frontend | Vanilla HTML5 · CSS3 · JavaScript (ES6+) |
| Persistence | Flask Sessions |
| Fonts | Sora + DM Mono (Google Fonts) |
Architecture:
Browser (HTML/CSS/JS) | fetch() API calls Flask Server (run.py) ├── GET /api/checklist → returns items by country + level ├── POST /api/save → saves checked items to session └── GET /api/load → restores session progress
The checklist data is stored as a Python dictionary in run.py — no database needed. Each entry has an id, label, and category so the frontend can group items visually.
The progress percentage is calculated as:
Progress = (Checked Items / Total Items) x 100
Challenges I Faced
Keeping it truly framework-free The requirement was vanilla JS only — no React, no Vue. Building dynamic DOM manipulation, grouped rendering, and smooth animations from scratch was a great exercise in understanding what frameworks actually do under the hood.
Making session persistence feel seamless Flask sessions use signed cookies, which meant progress had to be serialised cleanly per country+level key. Getting the save/load cycle to feel instant required careful async fetch() handling so the UI never blocked.
Designing a useful FAQ without a real AI backend Instead of an API call, I built a lightweight keyword-matching engine in JS that covers the 10 most commonly confused visa terms. The trick was making it feel responsive — partial matches, word-level fuzzy search, and animated answer reveals all contribute to that experience.
Responsive design without a CSS framework Every layout decision — the two-column selector grid, the progress card, the quick chips row — had to degrade gracefully to a single column on mobile using only CSS Grid and media queries.
What I Learned
- How Flask sessions work under the hood (signed cookies, server-side state)
- Writing clean, grouped DOM manipulation in vanilla JavaScript
- CSS custom properties (var()) for maintaining a consistent design system
- How to scope a hackathon project: build the core loop perfectly, then add polish
- The real-world pain points international students face during visa prep
What's Next for VisaReady
- Add Canada, Germany, New Zealand
- File upload tracking per checklist item
- Deadline reminders with calendar integration
- Export checklist as PDF
- University-specific checklists (e.g. UNSW vs Melbourne vs UCL)
- Persistent user accounts for cross-device access
Built With
python · flask · html5 · css3 · javascript · google-fonts
VisaReady was built to solve a real problem that I — and thousands of students like me — face every year. Every international student deserves a stress-free start to their study abroad journey.
Log in or sign up for Devpost to join the conversation.