SubStream

A modern subscription tracking application that helps users manage recurring payments, visualize spending patterns, and avoid forgotten charges.

Overview

SubStream provides a centralized dashboard for tracking all subscription services. Users can monitor monthly and yearly spending, receive renewal reminders, and identify unused subscriptions that could be cancelled.

Screenshots

---

Technology Stack

Category	Technology
Frontend	React 18, TypeScript
Build Tool	Vite
Styling	Tailwind CSS, shadcn/ui
Animation	Framer Motion
State Management	Zustand, TanStack Query
Authentication	Firebase Auth
Database	Neon PostgreSQL
Charts	Recharts

Prerequisites

• Node.js 18 or higher
• npm or bun package manager
• Firebase project with Authentication enabled
• Neon PostgreSQL database

Installation

1. Clone the repository:

   git clone https://github.com/yassnemo/substream.git
   cd substream

2. Install dependencies:

   npm install

3. Configure environment variables:

   cp .env.example .env

4. Update .env with your credentials (see Configuration section)

5. Initialize the database by running the schema in your Neon console:

   src/integrations/neon/schema.sql
   

6. Start the development server:

   npm run dev

Configuration

Create a .env file in the project root with the following variables:

# Firebase Authentication
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

# Neon Database
VITE_NEON_DATABASE_URL=

Refer to .env.example for the expected format of each variable.

Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Create production build
npm run preview	Preview production build locally
npm run lint	Run ESLint code analysis

Project Structure

src/
├── components/        # Reusable UI components
│   └── ui/           # shadcn/ui component library
├── hooks/            # Custom React hooks
├── integrations/     # External service integrations
│   ├── firebase/     # Firebase Auth configuration
│   └── neon/         # Database client and queries
├── lib/              # Utility functions
├── pages/            # Route page components
└── store/            # Zustand state stores

Features

• Subscription tracking with customizable categories
• Monthly and yearly spending calculations
• Renewal date reminders and notifications
• Spending analytics with visual charts
• Usage tracking to identify inactive subscriptions
• Dark theme interface

Deployment

Build the application for production:

npm run build

The dist directory can be deployed to any static hosting service:

• Vercel
• Netlify
• Cloudflare Pages
• AWS S3 / CloudFront

Security

• Environment variables are excluded from version control
• Authentication handled through Firebase Auth
• Database connections use SSL encryption
• No sensitive credentials are hardcoded in the source code

License

MIT