Project Description
I need to build a prototype mobile/tablet app for a smart mirror product called Pixie, focused on hairstyling tutorials and guided user flows. This is a frontend-focused project only. Camera integration will be handled separately.
Scope of Work
Build a mobile/tablet app based on provided Figma designs (The Figma UI already has basic navigation)
Implement:
* Screen layouts
* Navigation flows
* UI interactions and transitions
* Ensure smooth performance on Android tablet
This is a clean UI build, not a complex backend or AI project.
Tech Stack
Open to:
* React Native (preferred)
* Flutter
Please specify your recommendation and why.
What is NOT included
* No camera integration
* No video streaming
* No AI / tracking logic
* No backend required (unless minimal/local)
IMPORTANT: Camera Placeholder Screen (Critical Requirement)
Please refer to the attached example image for visual guidance.
One of the app screens will later display a live camera feed with tracking and auto-zoom. For this phase, you are NOT required to implement any camera functionality.
However, it is critical that this screen is designed correctly so a native camera module can be integrated seamlessly later.
What You Need to Build:
* Create a dedicated “Camera / Tutorial” screen that visually matches the attached example:
* A full-screen video-style layout
* This should look like a video player/tutorial interface, not a static page
Required Elements
A large central container that represents the video/camera area (this will later be replaced by a live camera feed)
Basic UI overlay elements such as:
* Play / pause button (as shown in the example)
* Progress bar / timeline (optional but preferred for realism)
* Section/title overlay (as per design)
* A simple Start / Stop button (UI only)
* A loading / idle state (e.g. spinner or placeholder screen before video starts)
Critical Technical Requirement
The video/container area must be built as a replaceable component, allowing a native camera view to be embedded later.
* It should support a full-screen video layer
* Avoid fixed or restrictive layouts that would block video rendering
* Think of this area as a “live video window” placeholder
Key Objective
You are designing a realistic video/camera experience UI, but without implementing the actual camera.
The final result should look and behave like the example image, ready for the camera feed to be “plugged in” later.
Goal
* Deliver a clean, polished, working UI app that:
* Matches the Figma designs
* Runs smoothly on Android tablet
* Is ready for future camera integration
Deliverables
* Fully functional app (APK)
* Source code
* Clean structure for future extension