JobCode Pro

Generate and post jobs on your WordPress and blogspot

Comment

What it does

JobCode Pro is a specialized web application designed to simplify and automate the creation and publication of SEO-optimized job postings for the South African market. Its core functionalities include:

Structured Data Generation: It generates job postings that are compliant with Schema.org standards, making them highly discoverable by search engines like Google for Jobs. Dynamic Job Title Generation: Based on user input, it can suggest and generate SEO-friendly job titles. Comprehensive Form Input: Users can input detailed information about job roles, company, salary, employment type, and multiple locations. Rich Description Editor: It allows for detailed job descriptions, responsibilities, and requirements, which are then formatted for easy integration into content management systems. Excel Data Import ("Scrapped Mode"): A key feature that enables bulk generation of job postings by importing data from Excel spreadsheets. This is particularly useful for large-scale recruitment efforts. Direct Publishing Integrations: For authenticated users, it connects directly to WordPress and Blogger sites, allowing for one-click publishing of generated job codes. Live Preview: Users can see a real-time preview of how their job posting will appear on a website. User Authentication & Cloud Sync: Leverages Supabase for secure user authentication, enabling users to save their site configurations and access them from any device. Unauthenticated users have a daily limit on job generations. Download & Copy Options: Generated job codes can be easily copied to the clipboard or downloaded as HTML files.

How we built it

JobCode Pro was built as a modern web application using a robust stack:

Frontend: The user interface is developed with React and TypeScript, providing a component-based architecture and strong type safety. Styling: Tailwind CSS is used for rapid and consistent styling, allowing for a highly customized and visually appealing "liquid glass" design. Icons: Lucide React provides a comprehensive set of customizable icons used throughout the application for visual cues and branding. State Management: React's built-in useState and useEffect hooks manage component-level state and side effects, with localStorage used for persisting form data and daily usage limits for unauthenticated users. Drag and Drop Functionality: The react-dnd library is integrated to enable intuitive drag-and-drop mapping of Excel column headers to form fields in the "Scrapped Mode." Excel Processing: The xlsx library is utilized for parsing and extracting data from uploaded Excel (.xlsx, .xls) and CSV files, converting them into a usable JSON format. Backend & Database: Supabase serves as the backend-as-a-service, providing: Authentication: Handles user sign-up, sign-in, and session management. Database: Stores user-specific WordPress and Blogger site configurations in wordpress_sites and blogger_sites tables, ensuring data persistence and synchronization. Row Level Security (RLS): Implemented to ensure users can only access and manage their own site configurations. API Interactions: Custom functions are implemented to interact with external APIs: WordPress REST API: Used for testing connections and publishing posts to configured WordPress sites. Blogger API: Used for testing connections and publishing posts to configured Blogger sites. Build Tool: Vite is used as the build tool, offering a fast development server and optimized production builds.

Challenges we ran into

Developing JobCode Pro presented several interesting challenges:

Dynamic Excel Column Mapping: Implementing a flexible and intuitive drag-and-drop system using react-dnd to map arbitrary Excel column headers to specific form fields was complex. Ensuring that the mapping correctly applied data from different rows to the correct fields during bulk generation required careful state management and data transformation. External API Integration Nuances: Interacting with the WordPress REST API and Blogger API involved handling various authentication methods (Application Passwords for WordPress, OAuth tokens for Blogger) and diverse response structures. Robust error handling and connection testing for each platform were crucial.

Supabase Integration and RLS: Properly setting up Supabase for user authentication and ensuring that Row Level Security policies correctly restricted data access to only the authenticated user's sites required a deep understanding of Supabase's security model. Managing User Limits (Authenticated vs. Unauthenticated): Implementing a daily job generation limit for unauthenticated users while providing unlimited access for signed-in users, and ensuring this limit resets correctly each day, added a layer of complexity to the application logic. Consistent UI/UX with "Liquid Glass": Achieving the desired "liquid glass" aesthetic consistently across all components using Tailwind CSS and custom animations required meticulous attention to detail and creative use of CSS properties like backdrop-filter and gradients. Form Validation for Dynamic Content: Validating a complex form with dynamic elements (like multiple job locations and other job opportunities) and ensuring that errors are clearly communicated to the user was challenging. This was compounded by the need to validate data imported from Excel.

Accomplishments that we're proud of

We are particularly proud of several key accomplishments in JobCode Pro:

Seamless "Scrapped Mode": The successful implementation of the Excel import feature, allowing users to generate multiple job postings from a single file, is a significant achievement that provides immense value and efficiency. Robust Supabase Integration: The secure and functional integration with Supabase for user authentication and cloud-synced site management is a core strength, providing a reliable backend for user data. Direct Publishing Capabilities: The ability to publish generated job codes directly to WordPress and Blogger from within the application streamlines the user's workflow and eliminates manual steps. High-Quality Structured Data Output: The application consistently generates valid Schema.org structured data, ensuring that job postings are optimized for search engines and Google for Jobs. Intuitive and Visually Appealing UI: The "liquid glass" design, combined with a user-friendly interface, makes a potentially complex task feel simple and enjoyable. Comprehensive Form Validation: The robust validation system ensures data integrity and provides clear feedback to users, improving the overall user experience.

What we learned

Throughout the development of JobCode Pro, we gained valuable insights:

Importance of Clear Data Models: Defining precise TypeScript interfaces for form data, Excel data, and API responses was crucial for maintaining code quality and reducing bugs, especially with complex data transformations.

Power of react-dnd for Interactive UIs: We learned how to effectively leverage react-dnd to create highly interactive and intuitive user experiences, particularly for data mapping. Best Practices for External API Consumption: We deepened our understanding of handling various API authentication mechanisms, rate limiting, and robust error handling when integrating with third-party services. Supabase as a Full-Stack Solution: We gained hands-on experience with Supabase's capabilities beyond just authentication, including its database features, Row Level Security, and how it simplifies backend development for web applications. Designing for Scalability and User Experience: Considering how features would scale (e.g., generating hundreds of jobs) and designing the UI to remain performant and user-friendly under various conditions was a key learning. Iterative Development with User Feedback: The process reinforced the value of breaking down complex features into smaller, manageable tasks and continuously refining them based on potential user interactions.

What's next for JobCode Pro

JobCode Pro has a bright future with several exciting possibilities for expansion:

Expanded Publishing Integrations: Adding support for more job boards and CMS platforms (e.g., Joomla, custom job board APIs) to further broaden publishing reach. Advanced Excel Mapping Features: Implementing more sophisticated mapping options, such as: Allowing users to combine multiple Excel columns into a single form field. Conditional mapping based on column values. Saving and loading mapping templates for different Excel file structures. User Dashboard & Analytics: Developing a personalized dashboard for authenticated users to view their publishing history, track job posting performance, and manage their saved job templates. AI-Powered Content Generation: Integrating AI models to assist with generating more nuanced job descriptions, responsibilities, or even suggesting optimal salary ranges based on market data. Premium Features & Subscription Model: Introducing a premium tier for unlimited generations, advanced analytics, priority support, and additional integrations. Blogger OAuth Flow: Implementing a proper OAuth 2.0 flow for Blogger integration to remove the need for manual token management and improve security. Enhanced Location Management: Allowing users to import a list of locations from Excel or manage a custom list of frequently used locations.

Built With

Share this project:

Updates