Froliik

Froliik is a playful mobile app that gives you fun, bite-sized side quests to spark curiosity, boost growth, and break routine—helping you explore life in new, meaningful ways every day.

Comment

Froliik: A Journey into Gamified Daily Life

What Inspired Me

The inspiration for Froliik came from a simple yet profound realization: daily life can feel monotonous, but it doesn't have to be. I noticed that people often get stuck in routines that, while comfortable, lack the excitement and sense of achievement that makes life truly engaging.

The concept of "side quests" in video games fascinated me - these optional challenges that players undertake not because they have to, but because they want to. They add depth, variety, and a sense of progression to the gaming experience. I wondered: What if we could apply this same principle to real life?

The name "Froliik" (meaning "playful" or "merry" in Danish) perfectly captures this vision - transforming everyday activities into playful adventures that bring joy and fulfillment.

Technical Skills

React Native & Expo Ecosystem

  • Built a cross-platform mobile app using React Native with Expo
  • Mastered the new Expo Router for file-based navigation
  • Implemented complex state management with React Context API
  • Learned to work with native modules and platform-specific features

Backend Development with Convex

  • Discovered the power of real-time databases with Convex
  • Built real-time subscriptions for live community updates
  • Designed a comprehensive database schema with proper indexing

AI Integration

  • Integrated OpenAI's API for intelligent quest generation
  • Built a system that creates personalized quests based on user preferences
  • Implemented fallback mechanisms for when AI generation fails
  • Learned to balance AI creativity with user safety and appropriateness

Mobile App Development Best Practices

  • Implemented proper authentication flow with Clerk
  • Built responsive UI components with custom design system
  • Added pull-to-refresh, notifications, and haptic feedback
  • Created smooth animations and transitions

Product Development Insights

User Experience Design

  • Learned the importance of onboarding flow in user retention
  • Discovered how gamification elements (points, achievements, leaderboards) drive engagement
  • Understood the balance between automation and user control
  • Realized the power of community features in building lasting engagement

Data Architecture

  • Designed a scalable database schema that supports complex social features
  • Implemented proper indexing for performance optimization
  • Built systems for real-time data synchronization
  • Created flexible user settings that can evolve over time

How I Built the Project

Phase 1: Foundation & Core Features

I started with the essential building blocks:

  1. Authentication System: Integrated Clerk for secure user authentication
  2. Database Schema: Designed the core tables for users, quests, and settings
  3. Basic Quest Management: Created CRUD operations for side quests
  4. User Preferences: Built a flexible settings system for quest preferences

Phase 2: Quest Generation & Personalization

This was the heart of the application:

  1. AI-Powered Quest Generation: Integrated OpenAI API to create intelligent, contextual quests
  2. Preference System: Built categories (mindfulness, creativity, movement, etc.) and difficulty levels
  3. Automatic Generation: Created a scheduler that generates quests based on user frequency preferences
  4. Onboarding Flow: Designed a 3-step process to capture user preferences and generate their first quest

Phase 3: Community & Social Features

The most complex and rewarding phase:

  1. Community Feed: Real-time updates showing quest completions and achievements
  2. Leaderboards: Competitive rankings across different time periods
  3. Achievement System: Gamified milestones with different rarity levels
  4. Social Interactions: Likes, comments, and sharing capabilities
  5. User Profiles: Public profiles with stats and achievements

Phase 4: Polish & User Experience

The final touches that make the app feel professional:

  1. Enhanced Home Screen: Prominent current quest display with community updates
  2. Notifications: In-app and push notifications for quest completions
  3. Animations: Confetti effects and smooth transitions
  4. Theme System: Dark/light mode support with custom color schemes
  5. Error Handling: Graceful degradation and user-friendly error messages

Technical Architecture

Frontend (React Native + Expo)
├── Navigation (Expo Router)
├── State Management (Context API)
├── UI Components (Custom Design System)
└── Real-time Subscriptions (Convex)

Backend (Convex)
├── Database (Real-time, RLS)
├── API Functions (TypeScript)
├── Authentication (Clerk Integration)
└── AI Integration (OpenAI)

Key Features
├── Quest Generation (AI-powered)
├── Community System (Real-time)
├── Achievement System (Gamification)
└── User Preferences (Flexible)

Challenges I Faced

1. Real-time Data Synchronization

Challenge: Building a community feed that updates in real-time across all users while maintaining performance.

Solution: Leveraged Convex's real-time subscriptions and implemented proper indexing. Used optimistic updates for immediate UI feedback while ensuring data consistency.

Learning: Real-time systems require careful consideration of data flow, user experience, and performance optimization.

2. AI Quest Generation Reliability

Challenge: OpenAI API calls could fail or return inappropriate content, potentially breaking the user experience.

Solution: Implemented comprehensive error handling with fallback quests, content filtering, and retry mechanisms. Created a curated database of backup quests for when AI generation fails.

Learning: When integrating external APIs, always plan for failure and provide graceful degradation.

3. Complex State Management

Challenge: Managing user preferences, quest states, community updates, and real-time data across multiple components.

Solution: Used React Context API with custom hooks for different concerns. Separated concerns into specific contexts (quests, user settings, community) while maintaining clear data flow.

Learning: Complex state management requires careful architecture and separation of concerns.

4. Mobile Performance Optimization

Challenge: Ensuring smooth performance on mobile devices with real-time updates and complex UI interactions.

Solution: Implemented proper list virtualization, optimized re-renders with React.memo, and used efficient data structures. Added loading states and skeleton screens for better perceived performance.

Learning: Mobile performance requires constant attention to detail and regular optimization.

5. User Onboarding Flow

Challenge: Creating an onboarding experience that captures user preferences without overwhelming them.

Solution: Designed a 3-step progressive disclosure process that feels natural and engaging. Used visual feedback and clear progress indicators to guide users through the setup.

Learning: Onboarding is crucial for user retention and should feel effortless while gathering necessary information.

6. Cross-platform Compatibility

Challenge: Ensuring consistent experience across iOS, Android, and web platforms.

Solution: Used Expo's cross-platform APIs and created platform-specific components when necessary. Tested extensively on different devices and screen sizes.

Learning: Cross-platform development requires careful consideration of platform differences and user expectations.

Key Achievements

Technical Accomplishments

  • Real-time Community System: Built a fully functional social platform with live updates
  • AI Integration: Successfully integrated OpenAI for intelligent quest generation
  • Scalable Architecture: Created a database schema that supports complex social features
  • Cross-platform App: Deployed on iOS, Android, and web with consistent experience

Product Accomplishments

  • Gamification System: Implemented points, achievements, and leaderboards that drive engagement
  • Personalization: Created a system that adapts to individual user preferences
  • Community Building: Built features that encourage social interaction and friendly competition
  • User Experience: Designed an intuitive interface that makes daily life more engaging

Future Vision

Froliik represents just the beginning of what's possible when we apply gaming principles to real life. The potential for expansion is enormous:

  • Machine Learning: Improve quest recommendations based on user behavior
  • Social Features: Friend systems, quest collaboration, and team challenges
  • Integration: Connect with calendar apps, fitness trackers, and other life tools
  • Localization: Expand to different cultures and languages
  • Enterprise: Adapt for workplace wellness and team building

Conclusion

Building Froliik has been an incredible journey that taught me not just about mobile app development, but about creating meaningful experiences that enhance people's lives. The combination of technical challenges, user experience design, and the opportunity to make daily life more engaging has been deeply rewarding.

The most valuable lesson has been understanding that technology should serve human needs and desires. By gamifying daily activities, we can transform routine tasks into opportunities for growth, connection, and joy. Froliik is more than just an app - it's a tool for making life more playful, more meaningful, and more connected.

As I continue to develop and improve Froliik, I'm excited to see how this concept can evolve and inspire others to approach their daily lives with the same sense of adventure and possibility that makes video games so compelling.

Built With

Share this project:

Updates