-
-
Foli AR an AR Story App thats creating a book experience
Inspiration We were inspired by the major gaps in the current digital publishing landscape. We noticed that new writers struggle immensely to gain visibility, while readers are often left with digital reading apps that are static and unengaging. This creates a significant disconnect, where readers have little connection with the authors or the characters they love. Our goal was to create FoliAR, a platform to bridge this gap by transforming passive reading into an immersive, interactive, and community-driven experience.
What it does FoliAR is a modern, cross-platform mobile application built with Expo, designed to revolutionize the reading experience by integrating augmented reality (AR) with digital books. It serves as both a digital library and an open storytelling platform where anyone can write and publish their stories.
- For Readers: Users can discover a rich catalog of books and read them in a customizable reader. For select titles, FoliAR offers a game-changing AR experience, bringing scenes and characters from the story into the user's physical environment through their phone's camera. Readers can also become influential "critics" by donating or subscribing, directly impacting story ratings and community rankings.
- For Writers: FoliAR provides a frictionless creation process, allowing authors to publish their stories for free. It gives them a platform to reach a new audience and provides the unique ability to link their own AR assets to their work, creating a new dimension of storytelling.
- Core AR Functionality: The app's standout feature is the AR Viewer. It uses expo-camera to access the device's camera and overlays 3D models using Three.js. This is demonstrated with a fully rendered 3D scene for "The Hound of the Baskervilles," showcasing how FoliAR brings narratives to life.
How we built it FoliAR was built entirely within the Expo Managed Workflow to ensure a smooth, cross-platform experience without needing to write native code.
- Navigation: All application routing, from the main tabs to nested screens, is handled by Expo Router.
- Styling: We used NativeWind, which allows for rapid UI development with Tailwind CSS utility classes in a React Native environment.
- AR & 3D Rendering: The core AR feature is powered by a combination of libraries. We use expo-camera for the camera feed, with expo-gl and expo-three acting as a bridge to the powerful Three.js library. This stack allows us to set up a 3D scene, manage lighting, and render .glb 3D models using the GLTFLoader.
- Authentication & Data: User sessions are securely managed using expo-secure-store. The frontend currently functions independently for demonstration purposes, using a mock API built in TypeScript to simulate fetching book and user data.
- UI/UX: We used lucide-react-native for a clean and comprehensive icon set and integrated custom fonts like Inter and Playfair Display with @expo-google-fonts to create a polished and professional look.
Challenges we ran into
- 3D in React Native: Integrating Three.js into an Expo project was a major challenge. It required bridging the gap between the WebGL context provided by expo-gl and the Three.js rendering engine, ensuring that 3D models loaded correctly and performed well over the live camera view.
- Designing for Engagement: A key goal is to reward reader engagement through donations and a critic system. We had to design UI components like the "Worth It?" dialog that prompts user feedback during AR viewing without disrupting the immersive experience.
- Future-Proofing Monetization: While the MVP is pre-monetization, we designed the technical architecture with future revenue streams in mind. The business model includes reader subscriptions, AR enhancement fees, and promotion boosts. We built placeholder UI and logic that can later be connected to a payment integration like RevenueCat.
© Anagenessi Ltd. All rights reserved.
Log in or sign up for Devpost to join the conversation.