https://github.com/adrianhajdin/react-native-recurrly
Recurrly is a production-ready mobile app for managing subscriptions, featuring automated billing reminders and full monetization. Built with React Native, Expo, Nativewind, and Clerk.
https://github.com/adrianhajdin/react-native-recurrly
clerk clerk-auth coderabbit expo posthog react-native
Last synced: about 1 month ago
JSON representation
Recurrly is a production-ready mobile app for managing subscriptions, featuring automated billing reminders and full monetization. Built with React Native, Expo, Nativewind, and Clerk.
- Host: GitHub
- URL: https://github.com/adrianhajdin/react-native-recurrly
- Owner: adrianhajdin
- Created: 2026-03-24T11:09:30.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-03-27T19:22:55.000Z (4 months ago)
- Last Synced: 2026-05-29T09:35:12.709Z (about 2 months ago)
- Topics: clerk, clerk-auth, coderabbit, expo, posthog, react-native
- Language: TypeScript
- Homepage: https://jsmastery.com
- Size: 10.7 MB
- Stars: 69
- Watchers: 1
- Forks: 26
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Subscription Management | React Native App
Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!
## 📋 Table of Contents
1. ✨ [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🤸 [Quick Start](#quick-start)
5. 🔗 [Assets](#links)
6. 🚀 [More](#more)
## 🚨 Tutorial
This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.
If 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!
Recurrly is a full-stack subscription management application designed to help users monitor and control their recurring expenses in one centralized hub. Built using a modern "Next.js-style" mobile architecture, the app features robust subscription tracking for both active and inactive charges, automated email reminders to ensure users never miss a billing date.
If 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.
### Frontend & Mobile
* **[React Native](https://reactnative.dev/)** is a powerful framework for building native mobile applications using React. It allows for a single codebase to run on both iOS and Android while maintaining the performance and feel of a truly native app.
* **[Expo](https://jsm.dev/nativesub-expo)** is the official framework recommended by the React Native team. It provides a robust set of tools and services—like file-based routing and EAS (Expo Application Services)—that streamline the development, building, and submission process.
* **[TypeScript](https://www.typescriptlang.org/)** is a strongly typed programming language that builds on JavaScript. It provides static typing to catch errors early during development, improving code maintainability across the entire full-stack codebase.
* **[NativeWind](https://www.nativewind.dev/)** allows you to style your React Native applications using **Tailwind CSS**. It brings the efficiency of utility-first CSS to mobile, enabling rapid UI development with a consistent design system.
### Backend & Database
* **[Node.js](https://nodejs.org/)** serves as the cross-platform JavaScript runtime environment that executes the backend service, providing high performance for asynchronous API operations.
* **[Express](https://expressjs.com/)** is a minimal and flexible Node.js web application framework. It serves as the middleware layer for the Recurrly backend, handling routing, API requests, and seamless integration with the database.
* **[MongoDB](https://www.mongodb.com/)** is a NoSQL database used to store user data and subscription details. Its flexible document-based structure is ideal for handling the evolving data needs of a subscription management platform.
### Infrastructure & Tools
* **[Clerk](https://jsm.dev/nativesub-clerk)** provides a complete suite of authentication and user management tools. It handles secure sign-ins, session management, and integrates seamlessly with billing workflows.
* **[PostHog](https://jsm.dev/nativesub-posthog)** is an all-in-one platform for product analytics. It helps track user behavior, feature usage, and conversion rates, giving you the data needed to improve the app based on real-world usage.
* **[CodeRabbit](https://jsm.dev/nativesub-coderabbit)** is an AI-powered code review assistant. It provides deep, context-aware feedback on pull requests, helping maintain high code quality and catching potential bugs before they reach production.
## 🔋 Features
## ✨ Key Features
👉 **Subscription Dashboard**: A centralized hub to monitor all your recurring expenses at a glance, featuring a clean and intuitive interface built with NativeWind.
👉 **Active & Inactive Tracking**: Easily toggle and categorize your subscriptions to see exactly where your money is going and identify unused services you can cancel.
👉 **Scheduled Email Reminders**: Never get surprised by a renewal again with automated, timely notifications that alert users before a billing date arrives.
👉 **Secure Authentication**: A seamless onboarding experience using Clerk, providing enterprise-grade security for user sign-ups, logins, and profile management.
👉 **Native Navigation**: A custom-built tab navigation system designed to provide a fluid, high-performance experience that feels native to both iOS and Android.
👉 **Full-Stack Data Persistence**: Reliable storage for all your subscription data, powered by a high-performance Node.js/Express backend and MongoDB.
👉 **Monetization Ready**: Integrated billing and payment flows, allowing you to transition from a free tool to a paid service with professional-grade infrastructure.
👉 **Production-Grade Analytics**: Real-time insights into user behavior and app performance via PostHog, ensuring every feature is optimized for the best user experience.
And many more, including code architecture and reusability.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/adrianhajdin/react-native-recurrly.git
cd react-native-recurrly
```
## Installation
Before you begin developing your app, it's essential to set up Expo and initialize your project.
- 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:
```bash
npx create-expo-app@latest
```
By default, you get a TypeScript Expo app with Expo Router configured.
If you want a different starter (blank JS, blank TS, tabs, etc.), you can run:
```bash
npx create-expo-app@latest --template
```
And pick whichever template fits your workflow.
Since this repository is already created, install dependencies and start the development server:
```bash
npm install
npx expo start
```
`npx expo start` means "download (if needed) and execute Expo locally." It starts Metro Bundler, which compiles and serves your React Native code.
Once it starts, you'll see a QR code and shortcut keys in the terminal. For example:
- `a` opens Android
- `i` opens iOS Simulator (macOS)
- `w` opens web
- `r` reloads
- `m` opens dev menu in Expo Go / device context
We don't need to rely on heavy IDE tooling to begin. The easiest flow is using Expo Go on your phone.
Expo 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.
Open Google Play Store or Apple App Store, install **Expo Go**, then come back here and scan the QR code.
### iOS VPN Turn OFF, and network permissions…
Now open Expo Go and scan the QR code from the terminal. The app should compile and launch.
If all is good, you'll see the starter app with two tabs: Home and Explore.
## Set Up Environment Variables
Create a new file named `.env` in the root of your project and add the following content:
```env
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=
POSTHOG_PROJECT_TOKEN=
POSTHOG_HOST=https://us.i.posthog.com
```
Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp), [**PostHog**](https://jsm.dev/nativesub-posthog) .
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.
## 🔗 Assets
Assets and snippets used in the project can be found in the **[video kit](https://jsmastery.com/video-kit/906b6d70-b862-4257-85dd-56b3ba76db59)**.
## 🚀 More
**Advance your skills with Next.js Pro Course**
Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with
detailed explanations, cool features, and exercises to boost your skills. Give it a go!
