Subscription Manager

A comprehensive subscription management application built with Next.js 14, TypeScript, Tailwind CSS, and Hasura GraphQL.

Features

• 📊 Dashboard: Overview of all subscriptions with statistics and upcoming renewals
• 💳 Subscription Management: Add, edit, delete, and organize subscriptions
• 🎨 Modern UI: Beautiful, responsive design with dark mode support
• 📱 Mobile-First: Fully responsive design that works on all devices
• 🔍 Search & Filter: Find subscriptions quickly with powerful search and filtering
• 📈 Analytics: Track spending patterns and subscription trends
• 🔔 Notifications: Get reminded before renewals
• 🌐 GraphQL API: Powered by Hasura for real-time data
• 🧪 Testing: Comprehensive unit and E2E testing with Jest and Playwright
• 🚀 Performance: Optimized for speed with Next.js 14 features

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS, CSS Variables for theming
• Database: PostgreSQL with Hasura GraphQL
• State Management: Apollo Client, React Context
• Forms: React Hook Form with Zod validation
• Testing: Jest, React Testing Library, Playwright
• Deployment: Vercel
• Icons: Lucide React

Quick Start

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database
• Hasura Cloud account (or local Hasura instance)

1. Clone and Install

git clone <repository-url>
cd subscription-manager
npm install

2. Environment Setup

Copy the environment file and update with your values:

cp .env.example .env.local

Update .env.local with your configuration:

# Hasura Configuration
NEXT_PUBLIC_HASURA_GRAPHQL_URL=https://your-hasura-project.hasura.app/v1/graphql
HASURA_GRAPHQL_ADMIN_SECRET=your-admin-secret-here

# Database Configuration
DATABASE_URL=postgresql://username:password@localhost:5432/subscription_db

# App Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-nextauth-secret-here

3. Database Setup

1. Create a PostgreSQL database
2. Run the schema from database/schema.sql:

psql -d your_database -f database/schema.sql

4. Hasura Setup

1. Create a new project at Hasura Cloud
2. Connect your PostgreSQL database
3. Import the database schema
4. Set up permissions for the tables
5. Copy your GraphQL endpoint and admin secret to .env.local

5. Run Development Server

npm run dev

Open http://localhost:3000 to see the application.

Project Structure

├── app/                    # Next.js 14 app directory
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Dashboard page
├── components/            # React components
│   ├── dashboard/         # Dashboard-specific components
│   ├── layout/           # Layout components
│   ├── subscriptions/    # Subscription components
│   ├── test/             # Test utilities
│   └── ui/               # Reusable UI components
├── context/              # React contexts
├── database/             # Database schema and migrations
├── hooks/                # Custom React hooks
├── lib/                  # Utilities and configurations
│   ├── graphql/          # GraphQL queries and mutations
│   ├── apollo-client.ts  # Apollo Client setup
│   ├── utils.ts          # Utility functions
│   └── validations.ts    # Zod schemas
├── tests/                # Test files
│   └── e2e/              # Playwright E2E tests
├── types/                # TypeScript type definitions
└── __tests__/            # Jest unit tests

Available Scripts

# Development
npm run dev              # Start development server
npm run build           # Build for production
npm run start           # Start production server

# Code Quality
npm run lint            # Run ESLint
npm run lint:fix        # Fix ESLint errors
npm run type-check      # Run TypeScript checks

# Testing
npm run test            # Run Jest tests
npm run test:watch      # Run Jest in watch mode
npm run test:coverage   # Run tests with coverage
npm run test:e2e        # Run Playwright E2E tests
npm run test:e2e:ui     # Run E2E tests with UI

Key Components

Dashboard

• StatsCards: Display key metrics (total subscriptions, monthly cost, etc.)
• UpcomingRenewals: Show subscriptions due for renewal
• QuickActions: Quick access to common actions
• RecentActivity: Timeline of recent changes

Subscription Management

• SubscriptionCard: Individual subscription display with actions
• SubscriptionForm: Add/edit subscription form with validation
• DataTable: Tabular view with sorting and filtering

Layout

• DashboardLayout: Main application layout with sidebar and header
• Header: Top navigation with search, theme toggle, and user menu
• Sidebar: Navigation menu with responsive mobile support

GraphQL Schema

The application uses the following main entities:

• users: User accounts
• subscriptions: Subscription records with cost, renewal dates, etc.
• categories: Subscription categories for organization
• payment_history: Track payment records

See database/schema.sql for the complete schema.

Customization

Theming

The app supports light/dark themes using CSS variables. Customize colors in:

• app/globals.css - CSS variables
• tailwind.config.js - Tailwind theme configuration

Categories

Default categories are defined in the database schema. Add custom categories through the UI or directly in the database.

Currency Support

Supported currencies: USD, EUR, GBP, INR, JPY. Add more in lib/utils.ts and components/subscriptions/SubscriptionForm.tsx.

Testing

Unit Tests

npm run test

Tests are located in __tests__/ and cover:

• Utility functions
• Component rendering and interactions
• Form validation
• Custom hooks

E2E Tests

npm run test:e2e

E2E tests cover:

• Dashboard functionality
• Subscription CRUD operations
• Navigation and responsive design
• Theme switching

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Set environment variables in Vercel dashboard
4. Deploy automatically on push

Manual Deployment

npm run build
npm run start

Performance Optimization

• Code Splitting: Automatic with Next.js 14
• Image Optimization: Next.js Image component
• Bundle Analysis: Run npm run analyze to analyze bundle size
• Caching: Apollo Client caching for GraphQL data
• Lazy Loading: Components loaded on demand

Security

• Input Validation: Zod schemas for all forms
• XSS Protection: Sanitized user input
• CORS: Configured for API routes
• Environment Variables: Sensitive data in environment variables
• Authentication: Ready for NextAuth.js integration

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Make changes and add tests
4. Run tests: npm run test && npm run test:e2e
5. Commit changes: git commit -m 'Add new feature'
6. Push to branch: git push origin feature/new-feature
7. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For support, please open an issue on GitHub or contact the development team.

Roadmap

• User authentication and multi-user support
• Email notifications for renewals
• Subscription sharing and family plans
• Advanced analytics and reporting
• Mobile app (React Native)
• Integration with banking APIs
• Subscription recommendations
• Bulk import/export features