Flipzi is a minimalist mobile flashcard application built with React Native and Expo. It demonstrates the process of building a fully functional app from start to finish, including component architecture, state management, persistent storage, authentication, and deployment readiness.
The project was created as a hands-on exercise to showcase practical mobile development skills, with a focus on building a clean, touch-friendly interface and a complete workflow for creating, managing, and reviewing flashcards.
- React Native
- Expo
- JavaScript
- React Navigation
- AsyncStorage
- Supabase
- OpenAI API
- StyleSheet / Flexbox
- Jest
- Spaced repetition using confidence-based ratings (Easy / Medium / Hard)
- Adaptive review timing based on user performance
- Study session tracking and progress history
- Cards mastered tracking
- Create, edit, and delete flashcard decks
- Organize flashcards by subject or topic
- Full CRUD support for decks and cards
- Generate flashcards automatically using the OpenAI API
- Create decks from topics or subject descriptions
- Smart question-and-answer generation to speed up study preparation
- Clean, minimalist mobile interface focused on learning
- Touch-optimized interactions
- Subtle haptic feedback for key actions
- Portrait-only layout for consistent study sessions
- Tap-based navigation between decks and cards
- Swipe gestures for navigating flashcards
- Button-based confidence rating during study sessions
- Haptic feedback to reinforce user actions
- Designed wireframes to define the core study flow and screen layout.
- Implemented navigation and screen structure using React Navigation.
- Built reusable components for decks and flashcards.
- Developed study sessions with spaced repetition logic.
- Added persistent local storage using AsyncStorage.
- Integrated Supabase for authentication and cloud data storage.
- Implemented AI-powered deck generation with the OpenAI API.
- Enhanced the experience with animations, gestures, and haptics.
- Added unit tests to verify core functionality.
- Prepared the app for deployment using Expo tooling.
Each feature was built incrementally and validated before integration into the full study workflow.
- Designed confidence-based scheduling logic for spaced repetition.
- Managed complex state across multiple screens and study sessions.
- Implemented persistent local storage with AsyncStorage.
- Synced user data securely using Supabase.
- Handled offline-first scenarios and network issues gracefully.
- Implemented secure user authentication with Supabase Auth.
- Managed persistent user sessions.
- Handled sensitive configuration and API keys safely.
- Integrated the OpenAI API for automated flashcard generation.
- Managed loading states, errors, and API responses cleanly.
- Designed touch-first interfaces for mobile devices.
- Applied mobile UX patterns to support focused study sessions.
- Used gestures, animations, and haptic feedback to improve usability.
- Strengthened problem-solving and architectural thinking.
- Gained confidence building production-ready mobile applications.
- Improved ability to balance functionality, usability, and performance.
- Social features for sharing decks
- Advanced study analytics and visualizations
- Improved offline-first synchronization
- Voice-based flashcards for audio learning
- More customization options for study sessions
Clone the repository.
Install dependencies:
- Clone the repository to your local machine.
- Install the required dependencies: npm install
- Start the development server: npx expo start
- Run the app on a device or simulator: npx expo start --ios , npx expo start --android
(Video link to be added)