JAPA

Inspiration

JAPA was inspired by the Nigerian slang term meaning "to leave" or "to escape" - commonly used when discussing emigration. We noticed that many Nigerians and Africans considering migration face overwhelming challenges: scattered information, confusing visa processes, and uncertainty about which countries best match their goals. We wanted to create a single platform that simplifies this journey by providing personalized country recommendations based on individual priorities like salary, visa success rates, and cost of living.

What it does

JAPA is a migration assistant web app that helps users find their ideal destination country. Users input their profession, budget, priority (visa success rate, salary, or cost of living), and home country. The app then:

Recommends 3 countries with real-time data including flags, capitals, and population from the REST Countries API Compares countries side-by-side with visa success rates, processing times, salaries, and cost of living Provides prep guidance with country-specific visa requirements, housing tips, and community resources Shows arrival info including Nigerian community size, African churches, restaurants, markets, and detailed cost breakdowns

How we built it

Frontend: React.js with React Router for navigation APIs: REST Countries API for real country data (flags, population, capital, currencies) Styling: Custom CSS with a cohesive color palette (Ink, Slate, Storm, Mist, Fog) Features: Dark mode toggle, smooth animations, responsive design, active nav highlighting State Management: React hooks (useState, useEffect, useRef) for managing user data and selected countries

Challenges we ran into

API limitations: Most cost of living and places APIs (Numbeo, Yelp, Google Places) require paid subscriptions. We integrated REST Countries API for free real data and used mock data for cost/community info Data flow: Passing selected country data between pages (Compare → Prep → Arrival) required careful state management at the App level User experience: Balancing information density with clean design - we solved this with card layouts and progressive disclosure across pages

Accomplishments that we're proud of

Built a complete end-to-end migration planning flow in a short time Integrated a real API (REST Countries) that displays live country flags and data Created a clean, professional UI with dark mode support Made the app mobile-responsive Added smooth animations and transitions for a polished feel

What we learned

How to integrate and work with REST APIs in React Managing complex state across multiple pages/routes The importance of fallback data when APIs have limitations CSS animations and transitions for better UX How to structure a multi-page React application with React Router

What's next for JAPA

Real API integration: Connect to Geoapify or Foursquare for live community/places data User accounts: Save preferences and track migration progress More countries: Expand beyond the current 5 to include more destinations Document checklist: Interactive checklist for visa applications Community forum: Connect users migrating to the same country Cost calculator: Personalized budget planning based on user income and destination

Built With

• axio
• babel
• css3
• fadeout
• fog
• github
• javascript
• localstorage
• mist
• navlink
• npm
• react
• react.js
• restcountriesapi
• slate
• webpack