SubVault - Full-Stack Subscription Management

A modern, tech-focused subscription management application with a React frontend and Express.js backend.

Features

• User Authentication: JWT-based register/login system
• Subscription Tracking: Add, edit, delete subscriptions with full CRUD
• Auto-Payment Toggle: Mark subscriptions as auto-paying (no card numbers stored)
• Credentials Vault: Securely store login names, recovery emails, and access keys
• Pricing Database: Compare prices, find alternatives, and discover promotions
• Unsubscribe Links: Quick access to cancellation pages for popular services
• News Feed: Stay updated on price changes and new features
• Dashboard: Overview of monthly spending, upcoming bills, and trial tracking

Tech Stack

Frontend

• React 18 + TypeScript
• Tailwind CSS
• Vite build tool
• Lucide React icons

Backend

• Express.js + TypeScript
• JSON file-based database (no native dependencies)
• JWT authentication
• CORS enabled

Project Structure

app/
├── backend/           # Express.js API server
│   ├── src/          # TypeScript source files
│   ├── dist/         # Compiled JavaScript
│   ├── data/         # JSON database files
│   └── frontend/     # Built frontend files (served in production)
├── src/              # React frontend source
│   ├── components/   # UI components
│   ├── contexts/     # React contexts (Auth)
│   ├── lib/          # API client utilities
│   ├── pages/        # Page components
│   └── types/        # TypeScript type definitions
└── dist/             # Built frontend files

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn

1. Install Dependencies

# Install frontend dependencies
npm install

# Install backend dependencies
cd backend
npm install
cd ..

2. Start Development Servers

Terminal 1 - Backend:

cd backend
npm run dev

The API server will start on http://localhost:3001

Terminal 2 - Frontend:

npm run dev

The frontend will start on http://localhost:5173

3. Build for Production

# Build frontend
npm run build

# Copy frontend to backend
cp -r dist backend/frontend

# Build backend
cd backend
npm run build

4. Start Production Server

cd backend
NODE_ENV=production npm start

The full application will be available at http://localhost:3001

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• GET /api/auth/me - Get current user (protected)

Subscriptions

• GET /api/subscriptions - List all subscriptions (protected)
• GET /api/subscriptions/:id - Get single subscription (protected)
• POST /api/subscriptions - Create subscription (protected)
• PUT /api/subscriptions/:id - Update subscription (protected)
• DELETE /api/subscriptions/:id - Delete subscription (protected)

Pricing & News

• GET /api/pricing - Get pricing database (protected)
• GET /api/news - Get news feed (protected)
• GET /api/dashboard/stats - Get dashboard statistics (protected)

Health Check

• GET /api/health - Server health status

Environment Variables

Frontend (.env)

VITE_API_URL=http://localhost:3001/api

Backend (.env)

NODE_ENV=development
PORT=3001
JWT_SECRET=your-secret-key-here

Database

The application uses a JSON file-based database stored in backend/data/:

• users.json - User accounts
• subscriptions.json - User subscriptions
• pricing.json - Pricing database with promotions and alternatives
• news.json - News feed items

The database is automatically initialized with sample data on first run.

Authentication

The app uses JWT (JSON Web Tokens) for authentication:

1. User registers/logs in
2. Server returns a JWT token
3. Token is stored in localStorage
4. Token is sent with each API request in the Authorization header
5. Token expires after 7 days

Security Notes

• Passwords are hashed using SHA-256
• JWT tokens expire after 7 days
• No credit card numbers are stored (only payment method descriptions)
• All API routes (except health check) require authentication

Demo Credentials

You can register with any email and password (minimum 6 characters). Each user has their own isolated subscription data.

Mobile Responsive

The app is fully responsive and works on desktop, tablet, and mobile devices with a collapsible sidebar navigation.

License

MIT