[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80432":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":35,"discoverSource":36},80432,"react-native-lingua","adrianhajdin\u002Freact-native-lingua","adrianhajdin","React Native Duolingo clone with a real-time AI voice teacher. Built with Expo, Stream Voice Agents, Clerk auth, and NativeWind for a complete, interactive mobile learning experience.","https:\u002F\u002Fjsmastery.com",null,"TypeScript",75,60,56,0,2,5,17,6,50.56,false,"main",true,[25,26,27,28,29,30,31],"clerk","getstream-io","nativewind","posthog","react-native","typescript","vision-agents","2026-06-12 04:01:28","\u003Cdiv align=\"center\">\n  \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FQ7AYc2kECDI\" target=\"_blank\">\n      \u003Cimg src=\"public\u002Freadme\u002Freadme-hero.webp\" alt=\"Project Banner\">\n    \u003C\u002Fa>\n  \u003Cbr \u002F>\n\n  \u003Cdiv>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FExpo-000020?style=for-the-badge&logo=expo&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FNativeWind-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FZustand-443E38?style=for-the-badge&logo=react&logoColor=white\" \u002F>\n\u003Cbr \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClerk-6C47FF?style=for-the-badge&logo=clerk&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStream-005FFF?style=for-the-badge&logo=getstream&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FPostHog-8B4513?style=for-the-badge&logo=posthog&logoColor=white\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCodeRabbit-FF6600?style=for-the-badge&logo=coderabbit&logoColor=white\" \u002F>\n\n  \u003C\u002Fdiv>\n\n  \u003Ch3 align=\"center\">Duolingo Clone | Stream & Visual Agents\u003C\u002Fh3>\n\n   \u003Cdiv align=\"center\">\n     Build this project step by step with our detailed tutorial on \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=XUkNR-JfHwo\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa> YouTube. Join the JSM family!\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n## 📋 \u003Ca name=\"table\">Table of Contents\u003C\u002Fa>\n\n1. ✨ [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🔗 [Assets](#links)\n6. 🚀 [More](#more)\n\n## 🚨 Tutorial\n\nThis repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@javascriptmastery\u002Fvideos\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa>.\n\nIf you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!\n\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FQ7AYc2kECDI\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fsujatagunale\u002FEasyRead\u002Fassets\u002F151519281\u002F1736fca5-a031-4854-8c09-bc110e3bc16d\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"introduction\">✨ Introduction\u003C\u002Fa>\n\nThis application is a full-featured React Native language-learning platform that leverages a sophisticated AI teacher for real-time voice interaction. Rather than just another \"toy\" demo, it serves as a masterclass in Practical Vibe Coding, a structured workflow using tools like Expo, Clerk, and Stream to build production-ready apps without writing manual code. It transforms the \"app you never built\" into a shipped reality by bridging the gap between raw AI prompting and professional software architecture.\n\nIf you're getting started and need assistance or face any bugs, join our active Discord community with over **50k+** members. It's a place where people help each other out.\n\n\u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fn6EdbFJ\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fsujatagunale\u002FEasyRead\u002Fassets\u002F151519281\u002F618f4872-1e10-42da-8213-1d69e486d02e\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"tech-stack\">⚙️ Tech Stack\u003C\u002Fa>\n\n- **[React Native](https:\u002F\u002Freactnative.dev\u002F)** is an open-source framework for building native mobile applications using React. It allows developers to use a single codebase for both iOS and Android by rendering with native UI components for high performance.\n\n- **[Expo](https:\u002F\u002Fexpo.dev\u002F)** is an open-source platform and framework for universal React applications. It provides a set of tools and services that simplify the development, building, and deployment process, allowing for rapid iteration and seamless access to native device APIs.\n\n- **[TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F)** is a strongly typed programming language that builds on JavaScript, providing static types to catch errors early and improving the developer experience with robust autocompletion and refactoring tools.\n\n- **[NativeWind](https:\u002F\u002Fwww.nativewind.dev\u002F)** uses Tailwind CSS as a scripting engine to create a universal styling system for React Native. It allows you to style mobile components using familiar utility classes, ensuring consistent design and rapid UI development.\n\n- **[Zustand](https:\u002F\u002Fdocs.pmnd.rs\u002Fzustand\u002Fgetting-started\u002Fintroduction)** is a small, fast, and scalable state-management solution. It provides a simple API based on hooks, making it easy to manage global application state without the boilerplate or complexity of other libraries.\n\n- **[Clerk](https:\u002F\u002Fjsm.dev\u002Flingua-clerk)** is a complete user management and authentication solution. It offers pre-built components for sign-in, sign-up, and user profiles, along with secure social login integration and multi-factor authentication out of the box.\n\n- **[Stream](https:\u002F\u002Fjsm.dev\u002Flingua-stream)** provides real-time audio infrastructure for AI-driven voice interactions. It enables the app to hear, see, and act in real-time, powering the conversational AI teacher with low-latency communication.\n\n- **[PostHog](https:\u002F\u002Fjsm.dev\u002Flingua-posthog)** is an all-in-one product analytics platform. It helps developers understand user behavior, track key events within the app, and utilize session recordings to improve product-market fit and user engagement.\n\n- **[CodeRabbit](https:\u002F\u002Fjsm.dev\u002Flingua-coderabbit)** is an AI-powered code review platform that integrates into your CI\u002FCD pipeline. It automatically reviews pull requests to identify bugs and suggest improvements, acting as a persistent reviewer for every AI-generated code change.\n\n## \u003Ca name=\"features\">🔋 Features\u003C\u002Fa>\n\n👉 **Onboarding Flow**: A seamless mobile sequence for language selection and goal setting, proving the gap between \"I want to build this\" and \"it's running on my phone\" is now just a weekend.\n\n👉 **Auth Pages**: Secure and professional signup and sign-in functionality utilizing email and social auth, powered by **Clerk** for robust user management.\n\n👉 **Real-Time AI Teacher**: An immersive \"speak and respond\" experience powered by **Stream Voice Agents**, allowing for natural, back-and-forth verbal practice that feels like having a tutor always around.\n\n👉 **Lesson Interface**: A core learning engine built with **React Native**, **Expo**, and **TypeScript**, using **NativeWind** to maintain a polished UI that survives contact with serious features.\n\n👉 **State Management**: Clean and scalable app logic handled by **Zustand**, ensuring your \"Practical Vibe Coding\" workflow stays structured without getting lost in spaghetti code.\n\n👉 **Analytics & Review**: Production-ready monitoring via **PostHog**, paired with **CodeRabbit** to automatically review every AI-generated PR before it ever merges into your codebase.\n\nAnd many more, including code architecture and reusability.\n\n## \u003Ca name=\"quick-start\">🤸 Quick Start\u003C\u002Fa>\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https:\u002F\u002Fgit-scm.com\u002F)\n- [Node.js](https:\u002F\u002Fnodejs.org\u002Fen)\n- [npm](https:\u002F\u002Fwww.npmjs.com\u002F) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Freact-native-lingua.git\ncd react-native-lingua\n```\n\n## Installation\n\nBefore you begin developing your app, it's essential to set up Expo and initialize your project.\n\n- Start by creating a folder for your application. Then, open your terminal and navigate to that folder. To create an Expo app, you can use:\n\n```bash\nnpx create-expo-app@latest\n```\n\nBy default, you get a TypeScript Expo app with Expo Router configured.\n\nIf you want a different starter (blank JS, blank TS, tabs, etc.), you can run:\n\n```bash\nnpx create-expo-app@latest --template\n```\n\nAnd pick whichever template fits your workflow.\n\nSince this repository is already created, install dependencies and start the development server:\n\n```bash\nnpm install\nnpx expo start\n```\n\n`npx expo start` means \"download (if needed) and execute Expo locally.\" It starts Metro Bundler, which compiles and serves your React Native code.\n\nOnce it starts, you'll see a QR code and shortcut keys in the terminal. For example:\n\n- `a` opens Android\n- `i` opens iOS Simulator (macOS)\n- `w` opens web\n- `r` reloads\n- `m` opens dev menu in Expo Go \u002F device context\n\nWe don't need to rely on heavy IDE tooling to begin. The easiest flow is using Expo Go on your phone.\n\nExpo Go is a mobile app that lets you test React Native apps quickly by scanning a QR code. It's fast, beginner-friendly, and supports real-time updates while you code.\n\nOpen Google Play Store or Apple App Store, install **Expo Go**, then come back here and scan the QR code.\n\n### iOS VPN Turn OFF, and network permissions…\n\nNow open Expo Go and scan the QR code from the terminal. The app should compile and launch.\n\nIf all is good, you'll see the starter app with two tabs: Home and Explore.\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env` in the root of your project and add the following content:\n\n```env\nEXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=\n\nPOSTHOG_PROJECT_TOKEN=\nPOSTHOG_HOST=\n\nSTREAM_API_KEY=\nSTREAM_API_SECRET=\n\n# Vision Agent\n# Run `uv run main.py serve` inside vision-agent\u002F\nVISION_AGENT_URL=http:\u002F\u002Flocalhost:8000\n\n# OpenAI API key (required for the vision-agent)\nOPENAI_API_KEY=\n```\n\nReplace the placeholder values with your real credentials. You can get these by signing up at: [**Stream**](https:\u002F\u002Fjsm.dev\u002Flingua-stream), [**PostHog**](https:\u002F\u002Fjsm.dev\u002Flingua-posthog), [**Clerk**](https:\u002F\u002Fjsm.dev\u002Flingua-clerk).\n\n**Running the Project**\n\n```bash\nnpx expo start\n```\n\n## \u003Ca name=\"links\">🔗 Assets\u003C\u002Fa>\n\nAssets and snippets used in the project can be found in the **[video kit](https:\u002F\u002Fjsmastery.com\u002Fvideo-kit\u002F042a469c-66fb-4922-9648-cbb1ca62d32e)**.\n\n\u003Ca href=\"https:\u002F\u002Fjsmastery.com\u002Fvideo-kit\u002F042a469c-66fb-4922-9648-cbb1ca62d32e\" target=\"_blank\">\n  \u003Cimg src=\"public\u002Freadme\u002Freadme-videokit.webp\" alt=\"Video Kit Banner\">\n\u003C\u002Fa>\n\n## \u003Ca name=\"more\">🚀 More\u003C\u002Fa>\n\n**Advance your skills with our Pro Course**\n\nEnjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with\ndetailed explanations, cool features, and exercises to boost your skills. Give it a go!\n\n\u003Ca href=\"https:\u002F\u002Fjsm.dev\u002Flingua-jsm\" target=\"_blank\">\n  \u003Cimg src=\"public\u002Freadme\u002Freadme-jsmpro.webp\" alt=\"Project Banner\">\n\u003C\u002Fa>\n","该项目是一个基于React Native的Duolingo克隆应用，内置实时AI语音教师。它利用Expo、Stream Voice Agents、Clerk认证和NativeWind等技术，提供了一个完整的互动式移动学习体验。核心功能包括通过AI实现的实时语音教学，以及使用现代前端工具和技术构建的高度可定制用户界面。适合需要开发高质量语言学习应用程序或希望探索如何将AI集成到移动应用中的开发者。","2026-06-11 04:00:42","CREATED_QUERY"]