ReeWise - Frontend Mobile App 📱

A high-performance, premium cross-platform mobile application that helps software engineers revise Data Structures & Algorithms (DSA) through swipeable, bite-sized "reels" cards, custom/smart playlists, and a robust offline-first synchronization engine.

---

🔗 Project Links & Live Demo

• Frontend Repository: GitHub Link
• Backend Repository: GitHub Link
• Production API Base URL: https://dsa-revison-backend.vercel.app/api

---

✨ Core Engineering Features

• Bite-Sized DSA Reels (Interactive Flashcards): Swipeable cards with syntax-highlighted code blocks, memory-retention tags, and difficulty classification, styled dynamically using NativeWind/Tailwind CSS.
• Offline-First Synchronization Engine: Fully functional offline mode using a local SQLite database (expo-sqlite). Sync actions queue locally and synchronize seamlessly with MongoDB via a delta-sync contract when connectivity is restored.
• Performance-Driven Rendering: Optimized FlatLists utilizing device-tier configuration (budget vs. flagship presets) to maintain a smooth 60 FPS scroll.
• Lazy Loading & Preloading: Implements React.lazy and preloads heavy components (like the Reels engine) in background threads, reducing screen mount latency from 700ms to <150ms.
• Custom Transition Scheduler: A prioritized queueing system that defers non-critical execution (such as analytics, haptics, and cache warming) during active UI transitions to eliminate animation stutter.

---

🛠️ Tech Stack

• Framework: React Native, Expo SDK 55 (using Expo Router v3)
• State Management: Zustand (client state & offline actions queue), TanStack React Query v5 (server-state caching)
• Database & Caching: SQLite (expo-sqlite), React Native Async Storage, Expo Secure Store (for auth token security)
• Animations: React Native Reanimated, Expo Image (for smooth asset fading)
• Styling: NativeWind (Tailwind CSS for React Native), Lucide React Native Icons
• Typing & Validation: TypeScript, React Hook Form, @hookform/resolvers

---

📂 Project Structure

dsa-rev-front/
├── app/                           # Expo Router file-based navigation
│   ├── (auth)/                    # Sign-in/Sign-up screen components
│   └── (protected)/               # Authenticated user tabs & sub-screens
│       ├── (tabs)/                # Tab Bar routes (Reels, Learn, Personal)
│       ├── folder/                # Folder-based category details
│       ├── playlist/              # Playlist views (Custom & Smart)
│       └── _layout.tsx            # Protected navigation gate
├── src/
│   ├── components/                # Reusable UI widgets & modals
│   ├── hooks/                     # Custom Hooks (useSyncEngine, useProfiler, query hooks)
│   ├── services/                  # API client handlers (auth, progress, reels feed)
│   ├── store/                     # Global stores (Zustand)
│   ├── utils/                     # Performance utilities, SQLite bridges, schedulers
│   └── theme/                     # Typography and color definitions
└── package.json                   # Project dependencies and configurations

---

⚙️ Environment Variables

Create a .env file in the root directory:

EXPO_PUBLIC_API_URL=https://dsa-revison-backend.vercel.app/api
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=your_google_web_client_id.apps.googleusercontent.com
EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID=your_google_android_client_id.apps.googleusercontent.com
EXPO_PUBLIC_GOOGLE_EXPO_CLIENT_ID=your_google_expo_client_id.apps.googleusercontent.com
EXPO_PUBLIC_SUPERADMIN_EMAIL=your_admin_email@gmail.com

---

🚀 Installation & Setup

1. Clone the repository:

   git clone https://github.com/MohitPant2803/DSA-REVISON-frontend.git
   cd DSA-REVISON-frontend

2. Install dependencies:

   npm install

3. Run the Expo Development Server:

   npm run start

4. Run on Android / iOS Simulator: Press a for Android Emulator or i for iOS Simulator in the Expo CLI terminal.

---

🧩 Usage Walkthrough

1. Authentication: Sign in securely using standard registration or Google Single Sign-On (SSO).
2. Revise via Reels: Swipe up and down on the Reels tab to read curated concept snippets, code examples, and complexity tables.
3. Manage Playlists: Organize concepts into custom playlists or use auto-generated smart folders (e.g., "Must Do," "Bookmarks").
4. Toggle Offline Mode: Put your device in airplane mode—the application shifts query operations to SQLite and queues mutations locally, syncing back automatically when you re-establish a connection.

---

💡 Engineering Challenges & Learnings

1. Eliminating Frame Drops and Mount Latency on Reels Swiping

• Challenge: The syntax highlighter and card rendering components were complex, causing screen mount delays of over 600ms on budget devices and dropping frame rates down to 35 FPS.
• Solution: We structured a lazy compilation pattern where code blocks are deferred. We preloaded the core Reels component off-screen when the tab bar mounts. In addition, we introduced a transitionScheduler that delays heavy database writes or analytics tracking during navigation transitions, restoring a smooth 60 FPS experience.

2. Maintaining Data Integrity Across Client & Server (Offline Sync)

• Challenge: Multi-device users editing playlists offline could create write conflicts and data duplication.
• Solution: We built an offline write-ahead log stored in SQLite. Upon network connection, the app executes a delta-sync transaction using deterministic checksums. A Conflict-Free Merge Policy resolves differences where local optimistic user modifications take precedence over backend values.

---

🔮 Future Enhancements

• Interactive Code Playgrounds: Compile and run short DSA snippets directly inside the mobile app.
• AI-Powered Concept Simplifier: Integration with Gemini/OpenAI API to generate customized card explanations based on user difficulty ratings.
• Social Learning Spaces: Shared revision playlists and bookmarks for teams and study groups.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.