Skip to content
Open
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions .env.example

This file was deleted.

47 changes: 0 additions & 47 deletions .posthog-events.json

This file was deleted.

90 changes: 44 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<img src="https://img.shields.io/badge/-Express-000000?style=for-the-badge&logo=express&logoColor=white" />
<img src="https://img.shields.io/badge/-MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white" /><br/>
<img src="https://img.shields.io/badge/-Clerk-6C47FF?style=for-the-badge&logo=clerk&logoColor=white" />
<img src="https://img.shields.io/badge/-PostHog-F0AD4E?style=for-the-badge&logo=posthog&logoColor=white" />
<img src="https://img.shields.io/badge/-CodeRabbit-FF5100?style=for-the-badge&logo=coderabbit&logoColor=white" />
</div>

Expand Down Expand Up @@ -52,20 +51,22 @@ If you're getting started and need assistance or face any bugs, join our active
## <a name="tech-stack">⚙️ Tech Stack</a>

### 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.

- **[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.

- **[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.

- **[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.
- **[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.

## <a name="features">🔋 Features</a>

Expand All @@ -85,8 +86,6 @@ If you're getting started and need assistance or face any bugs, join our active

👉 **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.

## <a name="quick-start">🤸 Quick Start</a>
Expand All @@ -110,63 +109,62 @@ 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:
Before you begin developing your app, it's essential to set up Expo and initialize your project.

```bash
npx create-expo-app@latest
```
- 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:

By default, you get a TypeScript Expo app with Expo Router configured.
```bash
npx create-expo-app@latest
```

If you want a different starter (blank JS, blank TS, tabs, etc.), you can run:
By default, you get a TypeScript Expo app with Expo Router configured.

```bash
npx create-expo-app@latest --template
```
If you want a different starter (blank JS, blank TS, tabs, etc.), you can run:

And pick whichever template fits your workflow.
```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:

Since this repository is already created, install dependencies and start the development server:
```bash
npm install
npx expo start
```

```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.

`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:

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
- `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.
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.
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.
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…
### 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.
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.
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) .
Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp).

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Point users to Clerk for the Clerk publishable key.

This line currently directs to Expo, but EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY should come from Clerk.

Suggested fix
-Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp).
+Replace the placeholder value with your real credential. You can get it from your [**Clerk Dashboard**](https://dashboard.clerk.com/).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Replace the placeholder values with your real credentials. You can get these by signing up at: [**Expo**](https://jsm.dev/nativesub-exp).
Replace the placeholder value with your real credential. You can get it from your [**Clerk Dashboard**](https://dashboard.clerk.com/).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@README.md` at line 167, Update the README line that currently points users to
Expo by replacing the Expo link with Clerk and instructing users to obtain the
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY from Clerk; specifically, change the
placeholder guidance that references Expo to instead point to Clerk's
dashboard/signup and mention the exact env var name
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY so users know where to retrieve their Clerk
publishable key.


**Running the Project**

Expand Down
6 changes: 2 additions & 4 deletions app.config.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
const appJson = require('./app.json')
const appJson = require("./app.json");

export default {
expo: {
...appJson.expo,
extra: {
...(appJson.expo?.extra || {}),
posthogProjectToken: process.env.POSTHOG_PROJECT_TOKEN,
posthogHost: process.env.POSTHOG_HOST,
},
},
}
};
6 changes: 3 additions & 3 deletions app.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"expo": {
"name": "react_native-recurrly",
"slug": "react_native-recurrly",
"name": "recurrly",
"slug": "recurrly",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"scheme": "reactnativerecurrly",
"scheme": "recurrly",
"userInterfaceStyle": "automatic",
"newArchEnabled": true,
"ios": {
Expand Down
Loading