Subscription Management App

A modern React Native subscription management UI built with Expo Router and NativeWind. This app presents a polished dashboard for tracking recurring services, reviewing upcoming renewals, and adding new subscriptions from a bottom-sheet modal.

Overview

This project is designed as a subscription management experience for users who want to:

• keep track of their active, paused, and cancelled subscriptions
• see upcoming renewals at a glance
• search through their subscriptions quickly
• add new subscriptions with a guided form
• manage the app experience gracefully when the network goes offline

The app uses a warm, card-based visual style with a custom design system defined in the global stylesheet.

Features

Home Dashboard

• personalized header with user profile and add button
• balance card highlighting renewal summary
• upcoming subscriptions section
• full subscription list with expandable card details

Subscription Management

• searchable subscription list
• expandable cards showing payment, category, start date, renewal date, and status
• creation flow for new subscriptions
• automatic icon matching based on subscription name

Offline Awareness

• network-aware app shell that shows an offline message when connectivity is unavailable

Authentication Flow

• auth screens for sign in and sign up
• protected tabs layout for authenticated users

Tech Stack

• React Native
• Expo SDK 54
• Expo Router
• NativeWind for styling
• Clerk for authentication
• React Navigation for tab navigation
• Day.js for date formatting and renewal calculations
• NetInfo for connectivity detection

Project Structure

• app/ - Expo Router screens and layouts
  • (auth)/ - sign-in and sign-up screens
  • (tabs)/ - home, subscriptions, insights, and settings tabs
• components/ - reusable UI components such as cards and modal dialogs
• constants/ - app data, icons, and theme values
• lib/ - utility helpers
• global.css - shared design system and component classes

Main Screens

Home Screen

The home screen acts as the main dashboard and includes:

• profile area
• balance summary
• upcoming renewals list
• all subscriptions list
• add-subscription modal access

Subscriptions Screen

The subscriptions screen provides a searchable list of subscriptions using the same card component as the home screen.

Create Subscription Modal

The new subscription modal includes:

• name input
• price input
• monthly/yearly toggle
• category chips
• validation for required fields
• automatic icon selection based on name

Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js
• npm or yarn
• Expo CLI

Installation

npm install

Run the app

npx expo start

You can then open the app in:

• Expo Go on your phone
• an Android emulator
• an iOS simulator
• a web browser

Environment Variables

This app uses Clerk authentication, so you should make sure your environment includes the required Clerk publishable key.

Example:

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key_here

Design System Notes

The visual style is built around a custom set of reusable classes in the global stylesheet. These classes include:

• auth form layout and button styles
• modal layout and overlay styles
• picker option styles
• category chip styles
• subscription card appearance

Notes

This project is currently focused on UI and app flow structure, with dummy data driving the subscription experience. It is a strong foundation for turning the interface into a full production-ready subscription management app with real backend persistence and sync.