Shyftcut - Empowering Your Journey to Success

Shyftcut is an AI-driven platform for the MENA region, providing personalized learning paths, course recommendations, and gamified progress tracking to empower users with career-ready skills.

Comment

Project Story: ShyftCut - Empowering Career Transformation

What Inspired Us

The idea for ShyftCut was born out of a simple yet profound observation: many fresh graduates, students, and career shifters in the MENA region struggle to navigate their professional journeys. They face challenges such as unclear learning paths, overwhelming resources, and a lack of personalized guidance. We wanted to create a platform that not only addresses these pain points but also empowers users to take control of their careers with confidence.

Inspired by the power of AI and gamification, we envisioned ShyftCut as a transformative tool that combines intelligent learning roadmaps, curated resources, and community engagement to help users achieve their goals. Our mission is to democratize access to high-quality, personalized education and career development for Arabic-speaking audiences.

What We Learned

Building ShyftCut has been an incredible learning journey. Here are some key takeaways:

  1. AI Integration Complexity:
    We learned that integrating advanced AI models like Perplexity Sonar and Sonar Pro requires careful planning. Balancing cost optimization with performance was a challenge, but it taught us the importance of model selection and real-time cost monitoring.

  2. Localization Nuances:
    Supporting both Arabic (RTL) and English (LTR) introduced unique design and development challenges. We discovered the importance of cultural adaptation, not just translation, to ensure the platform resonates with users in the MENA region.

  3. Gamification Psychology:
    Gamifying user engagement isn’t just about adding streaks or badges—it’s about creating meaningful interactions that motivate users. We learned to focus on intrinsic rewards, like progress visualization and community support, to drive long-term retention.

  4. User-Centric Design:
    Through iterative feedback loops, we realized how critical it is to prioritize mobile responsiveness, accessibility, and intuitive navigation. Every feature must serve a clear purpose and enhance the overall user experience.

How We Built It

We approached the development of ShyftCut with a modular and scalable architecture, ensuring the platform could grow alongside its user base. Here’s an overview of our tech stack and process:

Frontend Development

  • Framework: React 18 with TypeScript for type-safe development.
  • Styling: Tailwind CSS combined with shadcn/ui for a consistent, professional design system.
  • Animations: Framer Motion for smooth transitions and engaging visuals.
  • Data Fetching: TanStack Query for efficient caching and state management.

Backend Infrastructure

  • Database: PostgreSQL with Row Level Security (RLS) via Supabase.
  • Real-Time Features: Supabase subscriptions for live updates on notifications, progress tracking, and community interactions.
  • Serverless Functions: Edge Functions for AI processing, course validation, and other backend tasks.

AI Integration

  • Perplexity Models: Used Sonar for quick queries and Sonar Pro for complex roadmap generation.
  • Intelligent Model Selector: Automatically optimizes between models based on query complexity and cost.

Deployment

  • Hosting: Netlify for frontend and Supabase for backend, ensuring global CDN support and scalability.
  • Security: HTTPS enforcement, Content Security Policy (CSP), and secure API key management.

Challenges We Faced

  1. Balancing Cost and Performance:
    AI processing can be expensive, so we implemented request deduplication, circuit breakers, and real-time cost tracking to stay within budget while maintaining performance.

  2. Localization Implementation:
    Switching between RTL and LTR layouts required extensive testing to ensure proper alignment, text wrapping, and UI consistency across devices.

  3. Gamification Engagement:
    Designing a gamification system that feels rewarding without being gimmicky was tricky. We iterated multiple times to strike the right balance between fun and functionality.

  4. Resource Validation:
    Ensuring real-time course availability and pricing updates posed technical challenges. We solved this by building a robust validation pipeline using Supabase Edge Functions.

Built With

  • lovable
  • perplexity
  • react
  • sonar
  • sonar-pro
  • supabase
Share this project:

Updates