# How to Vibe Code Your Own WorkAbroad Hub (and Stop Paying for It) > Your gateway to global career opportunities and verified overseas job portals - Site: https://workabroadhub.com - Category: Job Board / Career Portal - Verdict: **Weekend build** (85/100 vibecodeable) - Estimated effort: A weekend ## Verdict You can build a fully functional personal clone of this career portal in a weekend; the single biggest catch is manually populating and verifying real job listings. WorkAbroad Hub in its operational form is a straightforward CRUD directory paired with a payment gate and direct messaging links. Vibecoding this with an AI agent takes minimal effort because it relies entirely on standard web patterns: a Next.js frontend, a Turso SQLite database, and better-auth for user sessions. The engineering is trivial — your actual friction will be sourcing the real international job data or mocking a realistic database of listings for personal use. ### What you can't replicate - The proprietary relationships with overseas employers and agencies - Existing user trust and community brand recognition ## What it does An overseas employment consultation and job aggregation service connecting international job seekers with verified international employers, visa guidelines, and WhatsApp-based career mentoring. ### Core features - Job listing aggregation and categorisation by destination country - Admin CRUD dashboard for posting and updating job opportunities - One-time payment gateway integration for portal access - WhatsApp direct integration for consultation inquiries - Basic blog / announcement feed for visa updates - User session authentication and access gating ## The business ### Pricing - Consultation & Job Portal Access: KES 4,500 (~$35 USD) one-time Founded 2025. Team size: 1-5. ## The hard parts - Maintaining up-to-date and verified international job listings to avoid scam exposure - Gating content securely behind a one-time payment verification flow ## How to vibe code WorkAbroad Hub ### Prerequisites - Node.js (free): Required runtime for running Next.js and modern JavaScript build tools. - GitHub (free): Version control and automated deployment trigger for your hosting provider. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding the entire full-stack Next.js app, setting up database schemas, and writing clean TypeScript components. - Cursor: Ideal for iterative UI styling adjustments and tweaking Tailwind CSS classes across the job directory layout. ### Stack - Frontend: Next.js (React) with Tailwind CSS - Backend: Next.js Server Actions / API Routes - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: Stripe - Other: Vercel AI SDK, Resend ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints with zero-config GitHub deployments.): $0/mo (Hobby Tier) - Turso (Serverless SQLite database storing job listings, category tags, and user access records.): $0/mo (Free Tier) ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize a Next.js project with TypeScript, Tailwind CSS, and Turso SQLite via better-sqlite3 or libSQL client. Define the database schema for jobs, categories, and user access. ``` Create a new Next.js 16 project configured with TypeScript and Tailwind CSS v4. Set up a Turso SQLite database connection using `@libsql/client`. Create migration scripts for a `jobs` table (id, title, country, description, salary, requirements, category, created_at), a `categories` table, and a `user_access` table (id, email, paid_status, created_at). Ensure clean folder organization with `app/` router conventions and include error boundary handling. ``` 2. **Authentication and Access Gating** — Implement authentication using better-auth to support email/password and magic links, protecting paid job portal views for verified users. ``` Integrate `better-auth` into the Next.js application for secure user authentication supporting email and password login. Create login and registration pages using Tailwind CSS. Add middleware or layout guards that check if a user has an active entry in the `user_access` table before letting them view full job details and direct application links. ``` 3. **Job Board Directory and Filtering UI** — Build the main job listing interface with search functionality, country filters, and category tabs. ``` Build a responsive job board homepage and search interface in Next.js. Include a sidebar or top filter bar for filtering jobs by destination country (e.g., Canada, Germany, Qatar, UK) and category. Render job cards displaying title, country flag/badge, short description, and a 'View Details' button. Implement server-side search and pagination querying the Turso database. ``` 4. **Payment Integration for Portal Access** — Incorporate Stripe Checkout to handle the one-time access fee, automatically updating user status upon successful webhook confirmation. ``` Implement Stripe Checkout for a one-time portal access fee using the official Stripe Node library. Create a checkout session API route that redirects users to Stripe payment. Implement a `/api/webhooks/stripe` webhook endpoint that listens for `checkout.session.completed` events and updates the `user_access` table to grant lifetime or permanent access to the user's email record. ``` 5. **Admin Dashboard and WhatsApp Integration** — Create a simple admin interface for posting new jobs and embed WhatsApp consultation call-to-action widgets. ``` Build an admin dashboard route (`/admin/jobs`) restricted by email or admin flag, allowing authenticated admins to create, edit, and delete job postings. On the job detail page, add a prominent 'Consult via WhatsApp' button that opens a pre-filled WhatsApp message template containing the job title and user reference. Polish all UI components with responsive Tailwind styling and loading skeletons. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain name: $12 one-time - Total: ~$12 one-time **Ongoing costs (monthly):** - Hosting & Database (Vercel & Turso free tiers): $0/mo - Total: $0/mo - Paying for the SaaS instead: Free / One-time fee (~$35) - Build time: 6-10 hours - AI tool credits: $20 (Claude Pro subscription) - Break-even: N/A (Personal build) ## Sources - [workabroadhub.com Scraped Site Content](https://workabroadhub.com) - [Google Search - WorkAbroad Hub Overview & Context](https://workabroadhub.tech)