🎯 RoleFlow

A modern, personalized job discovery platform that helps you find the perfect role based on your preferences, skills, and career goals.

📋 Overview

RoleFlow is a web application designed to streamline your job search journey. Instead of manually browsing through thousands of job listings, RoleFlow learns your preferences and shows you opportunities that match your career aspirations. The platform aggregates jobs from multiple sources and uses intelligent matching algorithms to surface the most relevant opportunities for you.

✨ Key Features

🔐 User Authentication

• Secure Login/Signup: Email-based authentication system
• Profile Management: Keep your information updated
• Session Persistence: Stay logged in across sessions

🎨 Intelligent Profile Setup

A comprehensive 4-step onboarding wizard that captures your career preferences:

1. Job Preferences

   • Select desired roles (Frontend Developer, Data Scientist, DevOps Engineer, etc.)
   • Choose job types (Full-time, Part-time, Contract, Internship)
   • Specify work mode (Remote, Hybrid, On-site)

2. Location Preferences

   • Browse global locations organized by region
   • Select multiple preferred work locations
   • Options include Remote, US, Europe, Asia-Pacific, Middle East, Canada, Australia, Latin America, and Africa

3. Experience & Salary

   • Indicate your experience level (Entry, Mid, Senior, Lead/Staff, Executive)
   • Set your salary expectations with multi-currency support (USD, EUR, GBP, INR, CAD, AUD, SGD, AED)
   • View salary range preview

4. Skills & Technologies

   • Pick from categorized skills (Programming Languages, Frontend, Backend, Databases, Cloud & DevOps, AI/ML, Design)
   • Add custom skills
   • Select interested industries

🔍 Smart Job Discovery Dashboard

• Intelligent Search: Search for jobs using keywords (e.g., "React", "Python", "Designer")
• Multi-Source Aggregation: Jobs from Arbeitnow and JSearch APIs
• Advanced Filtering:
  • Filter by country/region
  • Filter by job type
  • Remote vs On-site/Hybrid options
  • Reset filters with one click

⭐ Personalized Job Matching

• Smart Scoring Algorithm: Jobs are ranked based on your preferences with a match score
• Scoring Criteria:
  • Role alignment (40 points)
  • Location match (30 points)
  • Job type preference (15 points)
  • Remote preference (15 points)
• Visual Indicators: See match scores and remote status at a glance

💼 Job Cards

Each job listing displays:

• Job title and company name
• Location and job type
• Salary information (when available)
• Remote work indicator
• Match score based on your preferences
• Job description preview
• Direct application link

👤 User Profile Management

• View and update your profile information
• Manage job preferences
• Access account settings

🛠️ Tech Stack

Frontend

• React 18.2: Modern UI library
• React Router 6.20: Client-side routing
• Tailwind CSS 3.4: Utility-first CSS framework
• Vite 3.2: Fast build tool and development server

Build & Development

• PostCSS 8.4: CSS processing
• Autoprefixer 10.4: CSS vendor prefixes
• ESLint: Code quality and linting

APIs Integrated

• Arbeitnow API: Job listings from Germany and EU
• JSearch API (RapidAPI): Comprehensive job data globally

📁 Project Structure

RoleFlow/
├── codebase/
│   ├── public/                 # Static assets
│   ├── src/
│   │   ├── assets/            # Images and logos
│   │   ├── components/        
│   │   │   └── ProtectedRoute.jsx    # Route protection wrapper
│   │   ├── context/
│   │   │   └── AuthContext.jsx       # Global auth state management
│   │   ├── pages/
│   │   │   ├── Login.jsx            # User login page
│   │   │   ├── Signup.jsx           # User registration page
│   │   │   ├── ProfileSetup.jsx     # 4-step preference wizard
│   │   │   ├── Dashboard.jsx        # Main job discovery interface
│   │   │   └── Profile.jsx          # User profile management
│   │   ├── services/
│   │   │   └── jobService.js        # Job API integration and search logic
│   │   ├── App.jsx            # Main app routing
│   │   ├── App.css            # Global styles
│   │   ├── index.css          # Base styles
│   │   └── main.jsx           # React entry point
│   ├── package.json           # Project dependencies
│   ├── vite.config.js        # Vite configuration
│   ├── tailwind.config.js    # Tailwind CSS setup
│   ├── postcss.config.js     # PostCSS configuration
│   └── index.html            # HTML entry point
└── backend/                   # Backend placeholder (future expansion)

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/ArihantK15/RoleFlow.git
   cd RoleFlow/codebase

2. Install dependencies

   npm install

3. Configure API Keys

   • Get your RapidAPI key from RapidAPI
   • Add your key to src/services/jobService.js:

     const RAPIDAPI_KEY = 'your_rapidapi_key_here';

4. Start development server

   npm run dev

   The app will be available at http://localhost:5173

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run ESLint
npm run lint

🔄 User Flow

1. Landing → User arrives at login page
2. Authentication → Sign up or log in
3. Profile Setup → Complete 4-step preference wizard
4. Dashboard → Explore jobs with search and filters
5. Job Matching → View jobs ranked by preference match
6. Application → Click "Apply Now" to apply directly
7. Profile Updates → Manage preferences from profile page

🎯 How Job Matching Works

The platform uses a sophisticated scoring algorithm:

Total Match Score = Role Match (40) + Location Match (30) + 
                    Job Type Match (15) + Remote Preference (15)

• Role Matching: Checks if job title contains any of your preferred roles
• Location Matching: Verifies if job location matches your preferences
• Job Type Matching: Ensures job type aligns with your preferences
• Remote Preference: Adds points if you prefer remote and job is remote

Jobs are sorted by match score in descending order, ensuring the most relevant opportunities appear first.

🌐 Supported Countries

The platform supports job searches in:

• India, United States, United Kingdom, Germany, Canada
• Australia, Singapore, UAE, Netherlands, France, Switzerland
• Plus global remote opportunities

🔒 Security Features

• Protected routes ensure only authenticated users access the dashboard
• Secure authentication context prevents unauthorized access
• API keys securely managed in environment configuration

📱 Responsive Design

• Mobile-first approach with Tailwind CSS
• Optimized for all screen sizes (mobile, tablet, desktop)
• Smooth animations and transitions

🚦 Authentication Flow

• Public Routes: /login, /signup
• Protected Routes: /dashboard, /profile, /profile-setup
• Default Route: / redirects to /dashboard (or login if not authenticated)

🎨 Design System

• Color Scheme: Dark theme with accent colors (blue and cyan)
• Typography: Clean, readable fonts with proper hierarchy
• Components: Reusable, modular component structure
• Icons: Emoji-based indicators for quick visual scanning

📊 Job Data Sources

Arbeitnow API

• Primary source for European jobs
• No authentication required
• Real-time job listings

JSearch API

• Global job coverage
• Comprehensive job details (salary, employment type)
• Powered by RapidAPI

🔮 Future Enhancements

• Backend implementation for user data persistence
• Advanced filters (experience level, salary range)
• Saved jobs and application tracking
• Email notifications for new opportunities
• CV/Resume upload and parsing
• LinkedIn integration
• Job recommendations based on browsing history

📝 License

This project is private and maintained by ArihantK15

🤝 Contributing

Currently, this is a personal project. Feel free to fork and create your own version!

📞 Support

For issues or feature requests, please open an issue on the GitHub repository.

---

Made with ❤️ by ArihantK15

Happy job hunting! 🚀